当前位置: 首页 > 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/a/322700.html

相关文章:

  • 蓝牙 HFP 协议详解及 Android 实现
  • C/C++基础知识复习(23)
  • aws中AcmClient.describeCertificate返回值中没有ResourceRecord
  • 活着就好20241118
  • 孙赢利_11月17日_超分周报
  • 校园二手交易网站毕业设计基于SpringBootSSM框架
  • 每日论文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实操学习——收货地址的设计