当前位置: 首页 > article >正文

vue echarts tooltip动态绑定模板,并且处理vue事件绑定

先上代码:

					  tooltip: {
						  // 这里是车辆icon
						  show: true,
						// trigger: "item",
						// backgroundColor: "transparent",
						appendToBody: true,
						textStyle: {
						color: "#ffffff" //设置文字颜色
						},
						formatter: (params) => {
							const TruckTooltip = Vue.extend(trucktooltipVue);
							
							const component = new TruckTooltip({
								propsData: { carData: params.data }
							});
							const vm = component.$mount();
							
							// 监听自定义事件--重要
							vm.$on('showDialog', (data) => {
								this.showDialog(data); // 调用外部的方法
							});

							return vm.$el.outerHTML; // 获取组件的 HTML
							// return formatHtml(params.data)
						},
					  },

这里自定义监听子组件,trucktooltipVue里面使用this.$emit('showDialog', this.carData.extraInfo.item.shareUrl) 来触发父组件的方法

这里的子组件,因为 tooltip 的内容是以字符串形式返回的,且 ECharts 不会自动处理 Vue 的事件绑定,所以要绑定到window对象上

vue 中动态添加的html元素,绑定点击事件onclick


http://www.kler.cn/news/322700.html

相关文章:

  • 每日论文6—16ISCAS一种新型低电流失配和变化电流转向电荷泵
  • 小学生管理系统项目
  • 前后端数据加密与解密
  • Win11家庭版升级专业版
  • 语言的输入
  • Thinkphp5x远程命令执行 靶场攻略
  • vue使用PDF.JS踩的坑--部署到服务器上显示pdf.mjs viewer.mjs找不到资源
  • Elasticsearch黑窗口启动乱码问题解决方案
  • 同声传译软件推荐哪个好?这些工具助你提升翻译效率
  • 物联网系统中声音拾取音频方案_咪头
  • element plus block报错
  • “创新驱动·融合发展”长三角软件产业盛会“2024南京软博会”
  • neo4j关系的创建删除 图的删除
  • Linux `readlink` 命令详解:轻松解析符号链接
  • C++在线开发环境搭建(WEBIDE)
  • 风景视频素材高清无水印怎么找?推荐几个风景视频素材下载网站
  • uniapp APP自动更新组件
  • 华为的数据库安全审计的功能怎么样?
  • Java后端面试题(微服务相关2)(day13)
  • DRF实操学习——收货地址的设计
  • Oracle逻辑备份脚本【生产环境适用】
  • 深入浅出CSS盒子模型
  • 命令行基础指令速查(Linux/Mac适用)
  • 【HTTP 和 HTTPS详解】2
  • 【30天玩转python】并发编程
  • 黎巴嫩BP机爆炸事件启示录:我国应加快供应链安全立法
  • 理论-同步、异步、阻塞、非阻塞
  • 微信小程序 - 最新详细安装使用 Vant weapp UI 框架环境搭建详细教程
  • 蓝桥杯15届C/C++B组省赛题目
  • Python的包管理工具pip安装