vue.js - 使用 SVG 在 Vue 上自定义选择组件

Question

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

我想让一个 chevron-down caret 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 文档

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

Tailwind 文档中有一个有用的自定义选择示例。