带有SVG的Vue上的自定义选择组件

Question

我正在Vue上创建自定义选择组件，并使用顺风样式对其进行样式设置。

我想将人字形向下的插入符号svg对齐到右侧，单击该按钮将打开选择选项。我对此有些麻烦。

<template>
  <div class="flex flex-wrap mb-4 relative">

    <select :value="value" @input="$emit('input', $event.target.value)" class="w-full h-12 pl-4 bg-white focus:bg-grey-10 focus:text-grey-5 border-2 border-grey-9 rounded-lg text-sm focus:outline-none">
        <option :value="null">
          Select an option
        </option>
        <option v-for="option in options" :value="option.slug">{{ option.name }}</option>
    </select>

    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="absolute mt-4 mr-4 right-0 cursor-pointer">
      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
    </svg>


  </div>
</template>

<script>
  export default {
    props: [ 'value'],
    data () {
        return {
            options: [
                { slug: 'test1', name: 'Test 1' },
                { slug: 'test2', name: 'Test 2' },
            ],
        };
    },
  }
</script>

这是它的外观，但是单击时的svg不会打开下拉列表。

有什么建议吗？

Answer 1

对于<svg>标签，您需要添加.pointer-events-none类。从Tailwind Docs

  

使用.pointer-events-none可使元素忽略指针事件。指针事件仍将在子元素上触发并传递到位于目标“下面”的元素。

Tailwind文档中有一个有用的custom select example。