vue.js - 输入元素中的vuejs svg元素对点击事件没有反应
问题描述
在输入元素中,我有一个 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-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
解决方案
pointer-events-none
tailwindcss 中的类导致该问题,请尝试将其删除:
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-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
推荐阅读
- ruby-on-rails - 如何从登录 Ruby on Rails 中删除 IP 地址?
- apache - Apache 到 NGINX 重写问题
- c# - 无法在 RPC 中创建游戏对象 | 统一 x PUN2
- node.js - 无法在 Edge 上运行 WebdriverIO 脚本
- neo4j - 如何使用节点 ID 在两个现有节点之间创建关系?
- android - 有什么方法可以获取有关我的 android 应用程序的最新自动备份的信息?
- python - 从“输入”blob存储容器中读取excel文件并使用python在“输出”容器中导出到csv
- asp.net-core - 在 Asp .Net Core 3.1 中使用单个资源文件进行视图本地化
- visual-studio-code - 如何从程序中打开vscode中的窥视窗口
- android - Firebase 异常“发现名称冲突的 getter:isChangingConfigurations”