vue中svg-icon添加点击事件不生效

最新推荐文章于 2023-03-05 11:51:37 发布
最新推荐文章于 2023-03-05 11:51:37 发布
阅读量2k 收藏 5
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52563146/article/details/119102698
版权

vue中svg-icon添加点击事件不生效

在svg-icon外面再包裹一层a标签，将click事件绑定到a标签上，哦了~亲测有用

<a href='javascript:;' @click="handleKeepOut">
	<svg-icon slot="prefix" iconClass="play" class="el-icon-user-solid" id="playButton" />
</a>
小、样
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态添加click_vue动态渲染svg、添加点击事件的实现
weixin_39661345的博客
12-20 3932
业务需求(vue项目中)1.页面展示svg内容2.监听svg内部的点击事件3.动态改变svg内部元素的属性和值html标签经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能(尤其是svg内部点击事件)，最终采用Vue.extend()方法完整实现，代码也较为简洁，html结构如下：直接将svg文件的内容复制粘贴到.vue文件里，是可以在标签内直接添加@click事件...
vue-svg-icon-loader:将SVG文件转换为VueJS组件
05-17
import MyIcon from ' ./my-icon.svg 'export default { components : { MyIcon },}</ script > 可以使用CSS覆盖SVG属性，也可以在模板的icon元素上内联SVG属性。 有关更多用法示例，请参见。注意事项尽管此...
html svg 点击事件失效_想做SVG但不会改代码？来用动画功能呀！
weixin_31474035的博客
12-27 461
嘿，胖友们大家好呀，我是小三儿最近这段时间，SVG推文大热，135编辑器也是新上架了数十款热门SVG样式，三儿的教程也是一波接着一波的出。为了让胖友们更快捷的对SVG样式进行设置，135编辑器也进行了一波大改动，在专业版菜单栏中增加了『动画』选项，我们目前所有的教程都是在『动画』菜单栏中进行设置的。那么问题来了，不少胖友对动画功能还是有点没搞懂，『动画』按钮到底在哪里？『动画』设置到底有...
svg click事件失效（仅限edge浏览器）
weixin_34110749的博客
06-15 1851
1、重现问题: <svg viewbox="0 0 16 16" class="svg-download"> <use xlink:href="../content/img/icon.svg#svg-download"></use> </svg> 如果直接在svg绑定click事件，在e...
svg 图标只有点击 图标的边才会触发点击事件
qq_40247562的博客
08-13 1523
近来开发时发现，svg 图标添加点击事件只有在点击 图标的边时才有效。 经过查阅，解决办法有两个 ，在此记录一下 1. 设置css svg{ pointer-events: none; } 2. 在svg 图标 外层套一层 ，给外层添加点击事件 ...
标签栏右键点击icon不触发点击事件
W.vv的博客
01-11 439
项目需求: 在标签栏上右键可以清除全部或清除右侧 在测试过程中,发现右键点击整个标签可以触发点击事件,但是如果把鼠标放在icon图标上却无法触发事件 在控制台打印事件,可以获取到父元素标签的id,但是点击icon图标却获取不到id,经查找,发现事件绑定的id只在父元素身上,但是icon图标属于svg,所以在事件e.target中并没有当前icon所对应的id,所以打印事件e,获取当前点击事件,发现icon图标的id在e.path的数组中,返回代码,打印icon图标的点击事件,找到当前图标对应的id,再绑
Vue子组件添加点击事件无效
Acid_lemon的博客
06-03 1644
在vue中使用组件，给该组件添加点击事件，点击该组件无效。 原因： 在组件上绑定事件，你不加 .native修饰符 告诉它是这是原生点击事件，它会以为这是你定义的自定义事件。 解决方法： 给点击事件加 .native <svg-icon icon-class='synchronization' class-name="icon" @click.native="deleteIssue()"></svg-icon> ...
vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）
02-04
vue-svg-icon vue2图标方案中多色svg图标的解决 v1.2.9 演示： : 特征： 不再需要在main.js中注入SVG 支持SVG的路径，圆，椭圆，矩形，线，折线，多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时...
vue-svg-icon-set:有效地公开Vue中设置的SVG图标
05-03
将以下更改添加到Webpack配置中，以便vue-svg-icon-set可以转换vue-svg-icon-set并可以输出IconLayer。 module.exports = { ..., entry: { + 'lib/icon-layer': 'vue-svg-icon-set/icon-layer.
vue-svg-icon-demo:Vue SVG图标演示
03-11
Vue SVG图标演示 这是CSS-Tricks文章的演示仓库，文章关于构建。 以下图标用于此演示： badge-check从 来自cog-solid excalamation从 来自fire 从send 安装依赖项 npm install 构建并运行开发服务器 npm run ...
vue动态渲染svg、添加点击事件的实现
10-15
主要介绍了vue动态渲染svg、添加点击事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
蓝胖子的博客
06-30 3269
vue项目 使用svg渲染地图 并添加点击事件，下拉框选中区域，动态改变地上对应区域的背景颜色（按百分比渲染背景颜色）
Vue中使用导出来的svg icon时有的icon无法显示的问题
qq_41892833的博客
06-29 2657
Vue中使用导出来的svg icon时有的icon无法显示的问题 正常显示如下图; 无法显示的图标如下图： 解决方法： 如下图所示，svg文件的路径替换成对应的http路径。
svg 点击事件_关于vue-router控制底部导航栏点击切换icon的实例
weixin_39639622的博客
12-10 287
首先先上一下界面：底部导航栏使用vue-router做的需求就是：让导航栏的Icon点击之后切换为一个新的Icon,下面是代码板块<template> <div class="router-link-container"> <router-link to="/labels" active-class="selected" v-on:cl...
iview icon按钮添加点击事件失效问题
weixin_47239395的博客
08-18 1774
// 方法一: 如果只是在图标上添加点击事件是没效果的,解决方法可以在外面再包个盒子,在盒子上添加点击事件 <div @click='BtnIcon'> <Icon type="checkmark"></Icon> </div> // 方法二: 添加native <Icon type="checkmark" @click.native='BtnIcon'></Icon> // 方法三: 如果是reder在domProps
icon可以使用点击事件嘛
MYmayue的博客
12-08 2056
使用了一个Element UI中的icon图标，想对它设置点击事件，发现不生效。.onclick = " "，这样并不起作用。因为icon是以伪元素的形式存在的，这样是无法获取事件的。转载自：https://www.jianshu.com/p/1e7eadff54a8。icon元素.style.pointerEvents = " none"利用这个提示，首先获取icon元素，然后再利用。就可以实现对icon元素的事件禁用。
Vue 中 SVG 动态渲染 包括（绑定事件，修改元素，SVG缩放） 支持PC 移动端
C_jian_的博客
03-05 4192
Vue 中 SVG 动态渲染 包括（绑定事件，修改元素，SVG缩放） 支持PC 移动
【vue】svg-icon小图标选择器
小朋友的博客
12-11 2920
svg-icon小图标选择器
vue中写svg组件svg图片加载不出来
Dilemma_me的博客
11-08 6050
vue中写svg组件svg图片加载不出来
vue-svg-icon 与 v-charts 冲突
最新发布
09-04
vue-svg-icon 和 v-charts 主要是两个不同的 Vue 库，可能在使用过程中会出现冲突的情况。 首先，vue-svg-icon 是一个用于在 Vue 中使用 SVG 图标的库。它提供了一个组件，可以将 SVG 图标直接导入到项目中，并通过指定名称来使用。这个库主要解决了在项目中使用 SVG 图标的问题，提供了方便的方式来管理和使用这些图标。 而 v-charts 是一个基于 Vue 和 ECharts 的图表库。它提供了一系列的图表组件，可以方便地在 Vue 项目中创建各种图表。v-charts 是为了解决在 Vue 项目中集成和使用 ECharts 图表的问题而开发的，它提供了一套易于使用的组件 API，可以轻松地创建和定制各种图表。 由于这两个库都对 Vue 进行了扩展和修改，它们可能会对 Vue 的内部机制产生冲突。例如，它们可能会修改 Vue 中的某些原型方法或者全局变量，导致在同时使用这两个库时出现问题。 如果遇到 vue-svg-icon 和 v-charts 的冲突问题，我们可以尝试以下几种解决方法： 1. 排除冲突的版本：检查 vue-svg-icon 和 v-charts 的版本，看是否存在已知冲突或者已修复的问题。如果有，可以尝试使用最新版本或已知没有冲突的版本。 2. 修改引入方式：如果可能，可以尝试修改这两个库的引入方式，例如改用按需加载的方式，只引入需要的组件，以减少潜在的冲突。 3. 自定义解决方案：如果以上方法无效，我们可以尝试自己解决冲突。这可能需要深入了解两个库的实现细节，查找冲突的原因，并尝试修改代码以解决冲突。 总之，vue-svg-icon 和 v-charts 之间可能存在冲突，但我们可以通过选择合适的版本、修改引入方式或者自定义解决方案来解决这个问题。更重要的是要深入了解这两个库的用法和实现，以便更好地集成和使用它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值