使用 SVG 在 Vue 上自定义选择组件

Posted 2023-03-07

【中文标题】使用 SVG 在 Vue 上自定义选择组件

【英文标题】：Custom Select Component on Vue with SVG

【发布时间】：2019-11-16 16:35:41

【问题描述】：

我正在 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"   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 时不会打开下拉菜单。

有什么建议吗？

【问题讨论】：

您确定您使用的 svg 正确吗？看看这个：codepen.io/herrfischer/pen/aNpWwy

【参考方案1】：

到<svg>标签，你需要添加.pointer-events-none类。来自Tailwind Docs

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

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