输入元素中的vuejs svg元素对点击事件没有反应

Posted 2023-03-07

【中文标题】输入元素中的vuejs svg元素对点击事件没有反应

【英文标题】：vuejs svg element within input element not reactive on click event

【发布时间】：2021-05-14 01:53:12

【问题描述】：

在输入元素中，我有一个 svg 图标，其中包含一个链接到方法的 @click 事件。但是点击它什么都不做。尝试@click.prevent @click.native 也没有成功。将@click 放在输入元素中使其在单击输入字段时起作用。但是，我只希望在输入字段中的 svg 图标上触发点击事件。帮助表示赞赏。

<input
  class="w-full pl-10 pr-3 py-3 border border-transparent leading-5 bg-gray-600 text-gray-100 placeholder-gray-400 focus:outline-none focus:bg-white focus:text-gray-900 sm:text-md transition duration-150 ease-in-out"
  type="text"
  v-model="search"
  @input="$emit('update:inputData', validatedSearch)"
  @keyup.down="onArrowDown()"
  @keyup.up="onArrowUp()"
/>
<div
  class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    v-show="search.length > 0"
    class="h-5 w-5 text-gray-400"
    stroke="currentColor"
    viewBox="0 0 20 20"
    @click="delSearch()"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-
      d="M6 18L18 6M6 6l12 12"
    />
  </svg>
</div>

【参考方案1】：

tailwindcss 中的pointer-events-none 类导致了该问题，请尝试将其删除：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue(
  el: '#app',

  data() 
    return 
      search: ""
    
  ,
  methods: 
    delSearch() 
      console.log("delete search");
      this.search=""
    
  

)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div id="app">
  <input class="border border-gray-500" type="text" v-model="search" />
  <div class=" inset-y-0 right-0 pr-3 flex items-center ">
    <svg xmlns="http://www.w3.org/2000/svg" v-show="search.length > 0" class="h-5 w-5 text-gray-400" stroke="currentColor" viewBox="0 0 20 20" @click="delSearch">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-
      d="M6 18L18 6M6 6l12 12"
    />
  </svg>
  </div>
</div>