主页 / 问题 / 1452299
Accepted
Moonwolf45
Asked:2022-09-28 16:27:43 +0800 CST2022-09-28 16:27:43 +0800 CST

VueJs 点击箭头

  • 772

有一个在 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;
  }
}

一般来说，正如你从代码中看到的那样，我创建了一个穿过伪元素的箭头，一切都会好起来的，但是如果你按下它，它就不会按原样打开，因为 这是一个不同的元素。那么如何让它打开呢？最好不要将箭头创建为单独的组件。

vue.js

1 个回答

  1. Best Answer

    如果伪元素在选择上方，则为其添加::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，您可以查看这个小提琴解决方案，这对我来说似乎很紧凑。

    • 1

相关问题