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

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

先上代码:

					  tooltip: {// 这里是车辆iconshow: 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

相关文章:

  • 将ai模型部署在服务器,会比本地离线更快吗
  • Proteus-7.8sp2安装
  • 论文阅读 | 一种基于潜在向量优化的可证明安全的图像隐写方法(TMM 2023)
  • Apache Cordova和PhoneGap
  • Redis支持数据类型,它们各自的应用场景是
  • 基于深度学习的文本情感原因提取研究综述——论文阅读
  • Spring Boot 2.x基础教程:实现文件上传
  • 理解:基础地理实体相关概述
  • 局域网中实现一对一视频聊天(附源码)
  • Shp2pb:Shapefile转Protocol Buffers的高效工具
  • 直线模组降噪攻略
  • 【专题】2024年中国白酒行业数字化转型研究报告合集PDF分享(附原数据表)
  • 高性能计算应用优化实践之WRF
  • 深度学习04:无监督学习
  • Golang | Leetcode Golang题解之第433题最小基因变化
  • 【跃迁之路】【735天】程序员高效学习方法论探索系列(实验阶段492-2019.2.25)...
  • 03Go 类型总结
  • canvas 绘制双线技巧
  • CentOS6 编译安装 redis-3.2.3
  • github从入门到放弃(1)
  • Java 23种设计模式 之单例模式 7种实现方式
  • JavaScript标准库系列——Math对象和Date对象(二)
  • js递归,无限分级树形折叠菜单
  • JWT究竟是什么呢?
  • Spring声明式事务管理之一:五大属性分析
  • vue2.0项目引入element-ui
  • 阿里中间件开源组件:Sentinel 0.2.0正式发布
  • 前端临床手札——文件上传
  • 设计模式走一遍---观察者模式
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • 阿里云API、SDK和CLI应用实践方案
  • 翻译 | The Principles of OOD 面向对象设计原则
  • ​Kaggle X光肺炎检测比赛第二名方案解析 | CVPR 2020 Workshop
  • #HarmonyOS:基础语法
  • #pragam once 和 #ifndef 预编译头
  • #数据结构 笔记三
  • (23)mysql中mysqldump备份数据库
  • (4)通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • (C)一些题4
  • (poj1.2.1)1970(筛选法模拟)
  • (代码示例)使用setTimeout来延迟加载JS脚本文件
  • (翻译)terry crowley: 写给程序员
  • (附源码)springboot教学评价 毕业设计 641310
  • (附源码)ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • (三)c52学习之旅-点亮LED灯
  • (算法)Game
  • **PyTorch月学习计划 - 第一周;第6-7天: 自动梯度(Autograd)**
  • .NET 3.0 Framework已经被添加到WindowUpdate
  • .NET CLR基本术语
  • .net framework4与其client profile版本的区别
  • .NET NPOI导出Excel详解
  • .net 设置默认首页
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地定义和使用弱事件
  • .Net7 环境安装配置
  • .net反编译工具