VueJs Клик на стрелочку

Question

Есть страничка которая генерируется на vuejs. Там некий псевдо каталог и у каждой карточки есть вот такой div:

<div class="b-catalog__select">
    <select class="b-select" name="" @change="setCurrentNominalForItem({id: item.id, val: $event.target})">
        <option :value="option.value" v-for="(option, index) in getNominals(item.id)" :key="'option_' + index">{{ option.label }}</option>
    </select>
</div>

Для блока b-catalog__select есть вот такие стили:

&__select {
  flex: 1 1 auto;
  position: relative;

  &::after {
    content: '\f107';
    border: 0;
    font: 800 32px 'Font Awesome';
    transform: none;
    transition: transform 0.1s linear;
    transform-origin: 50% 50%;
    color: #aaa;
    position: absolute;
    right: 0;
  }
}

Вообщем как видно из кода, я через псевдоэлемент создаю стрелочку и всё бы ничего, но если на неё жать select не открывается как и должно быть, т.к. это другой элемент. Так вот как сделать, чтобы открывался ?? Желательно без создания стрелочки как отдельного компонента.

Answer 1

Если псевдо-элемент над селектом то добавьте к ::after стиль pointer-events: none - это пропустит события мыши к селекту.

Если рядом, то можно попытаться добиться эффекта стилями, но это, возможно, не всегда подойдет, например если нужно будет сделать селект с закругленными краями или будет какой-то специфический фон на странице.

По сути говоря решение в обоих случаях одно и то же:

new Vue({
  el: "#app",
  data() {
      return {
          currentItem: 0,
          item: {
            id: 1
          }
      }
  },
  methods: {
      getNominals(i){
        return [{value:1, label:"опция1" },{value:2, label:"опция2"}];
      },
      setCurrentNominalForItem(){
      }
  },
})

.b-catalog__select::after {
   content: '▾';
   display: inline-block;
   pointer-events: none; /* пропускаем события мыши */
   position: relative;
   left: -15px;
   width: 20px;
   padding-left: 5px;
   color: blue;
   background: white; /* прячем фон селекта */
}

.b-select {
  position: relative;
  padding-right:20px; /* расширям для стрелки */
  /* убираем стили */
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
  border:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="app">
<div class="b-catalog__select">
    <select class="b-select" name="" @change="setCurrentNominalForItem({id: item.id, val: $event.target})">
        <option :value="option.value" v-for="(option, index) in getNominals(item.id)" :key="'option_' + index">{{ option.label }}</option>
    </select>
</div>
</div>

Если Вам не обязательно использовать Font Avesome для стрелочки можете посмотреть на этот вариант решения fiddle мне он кажется компактным.

БЛОГ НА HUSL

VueJs Клик на стрелочку

Ответы (1 шт):