Выборочный компонент на Vue с SVG - PullRequest
Новая
       56

Выборочный компонент на Vue с SVG

0 голосов
/ 06 июля 2019

Я создаю настраиваемый компонент выбора в 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 при нажатии не открывает раскрывающийся список.

Select image

Есть предложения?

1 Ответ

0 голосов
/ 15 июля 2019

К тегу <svg> необходимо добавить класс .pointer-events-none.Из документов Tailwind

Используйте .pointer-events-none, чтобы элемент игнорировал события указателя.События указателя будут по-прежнему срабатывать на дочерних элементах и ​​проходить к элементам, которые находятся «под» целью.

В документах Tailwind есть полезный пример пользовательского выбора .

...