使用 SVG 在 Vue 上自定义 Select 组件

Question

我正在 Vue 上创建一个自定义 select 组件，我正在使用 tailwind 来设置它的样式。

我想要一个 V 形向下插入符号 svg 对齐到右侧，这将在单击时打开 select 选项。我遇到了一些麻烦。

<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-noneclass。来自 Tailwind Docs

Use .pointer-events-none to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.

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

使用 SVG 在 Vue 上自定义 Select 组件

Custom Select Component on Vue with SVG

select

vue.js

vue-component

tailwind-css