Переключатель класов на кнопках, toggle click buttons

148

13 апреля 2022, 01:20

Как добавить к этому функционалу чтобы на toggle click каждого блока менялся фон на прозрачный и стрелка крутилась к низу rotate(180deg)

.btn-filter {
    font-family: "MuseoSansCyrl_1";
    padding: 6px 10px 6px 10px;
    border: 1px solid #ffffff;
    border-radius: 6px;
    font-size: 14px;
    line-height: 18px;
    color: #484848;
}
.btn-filter {
    background: transparent;
    border: 1px solid #c9cecf;
}
.btnfilteractive {
    border: 1px solid #ffffff;
    background: #FFFFFF;
    transition: .3s ease-in;
}

темплейт

 <button class="btn-filter mr-2"
                    @click="activate(li.id)"
                    :class="{ btnfilteractive : active_el == li.id }"
                    v-for="li in lista">{{li.texto}}
                <img src="@/assets/images/icons/arr-down-black-i.svg"
                     :class="{ rotateimg : active_el == li.id }"
                     alt="">
            </button>

дата:

 lista: [
                {"id": "1", "texto": " Час відправлення"},
                {"id": "2", "texto": "Ціна"},
                {"id": "3", "texto": "Комфорт"},
                {"id": "4", "texto": "Час прибуття"},
                {"id": "5", "texto": "Час в дорозі"},
                {"id": "6", "texto": "Рейтинг"},
                {"id": "7", "texto": "За формуванням"}
            ],
            active_el: 1

Answer 1

Используя active_el как идентификатор активного элемента, вы можете управлять классами css для назначения элементу дополнительных классов css, когда элемент активен.

Для добавления стрелок, достаточно создать css стили, вроде этих:

.arrow {
  width: 10px;
  transition: all .3s;
}
.btnfilteractive>.arrow {
  transform: rotate(180deg);
}

И когда элемент становится активным(т.е. на нем кликнули), он получает дополнительный класс .btnfilteractive и вложенная в этот элемент стрелка выполняет трансформацию в виде поворота

Рабочий пример:

new Vue({
  el: '#app',
  data: {
    lista: [{
        "id": "1",
        "texto": " Час відправлення"
      },
      {
        "id": "2",
        "texto": "Ціна"
      },
      {
        "id": "3",
        "texto": "Комфорт"
      },
      {
        "id": "4",
        "texto": "Час прибуття"
      },
      {
        "id": "5",
        "texto": "Час в дорозі"
      },
      {
        "id": "6",
        "texto": "Рейтинг"
      },
      {
        "id": "7",
        "texto": "За формуванням"
      }
    ],
    active_el: 0
  },
  methods: {
    activate(id) {
      this.active_el === id ? this.active_el = 0 : this.active_el = id
    },
  },
})

.btn-filter {
  font-family: "MuseoSansCyrl_1";
  padding: 6px 10px 6px 10px;
  border: 1px solid #ffffff;
  border-radius: 6px;
  font-size: 14px;
  line-height: 18px;
  color: #484848;
}
.btn-filter {
  background: transparent;
  border: 1px solid #c9cecf;
}
.btnfilteractive {
  border: 1px solid #ffffff;
  background: #FFFFFF;
  transition: .3s ease-in;
}
.arrow {
  width: 10px;
  transition: all .3s;
}
.btnfilteractive>.arrow {
  transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button
   class="btn-filter mr-2"
   :class="{ btnfilteractive : active_el == li.id }"
   v-for="li in lista"
   @click="activate(li.id)"
  >
    {{li.texto}}
    <img
      src="https://cdn.onlinewebfonts.com/svg/img_227668.png"
      class="arrow"
      alt=""
     >
  </button>
</div>