怎么新建MySQL数据库

发布时间：2022-07-09 作者：admin
阅读：365
在这篇文章中，我们来学习一下“Vue项目中怎么添加点击事件，及其相关问题怎样解决”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。



目录
 

     
 
  • 需求
    •  
 
  • 解决方法
    •  
 
       
  
    • 1、设置tooltip
      •  
  
    • 2、定义hookToolTip变量
      •  
  
    • 3、在methods中添加方法
      •  
  
    • 4、完整代码
      •  
 
     

  

 

需求
 

需要在echarts tooltip点击学校的名称，跳转到详情页面；项目是从上海市---> 某个区----> 具体的学校（在最后一级的tooltip中绑定一个点击事件）
 

 

 

 

 

 项目是用vue和echarts实现的，echarts是新版本（^5.0.2），并不能把点击事件绑定在window上
 

 

解决方法
 

 

1、设置tooltip
 

enterable: true, //允许鼠标进入提示悬浮层中，triggeron:'click',//提示框触发的条件  mousemove鼠标移动时触发 click鼠标点击时触发  'mousemove|click'同时鼠标移动和点击时触发
  

tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 出发条件
          //   formatter: "名称:{b}<br/>坐标:{c}",
          enterable: true, //允许鼠标进入提示悬浮层中
          showContent: true,
          triggerOn: "click", //提示框触发的条件  mousemove鼠标移动时触发 click鼠标点击时触发  'mousemove|click'同时鼠标移动和点击时触发
          //   confine: true, //把toolTip限制在图表的区域内
          className: "areaTool",
          // hideDelay: 100000, //延时消失时间
          formatter: (item) => {
            this.hookToolTip = item;
            // 经纬度太长需要对位数进行截取显示，保留七位小数
            // 需要绑定点击事件
            var tipHtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer">' +   
              item.name +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "经度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "纬度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "考场数" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "监考教师" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>";

            return tipHtml;
          },
        },
  

 

2、定义hookToolTip变量
 

在formatter中给hookToolTip赋值，添加一个id，然后通过watch去检测dom元素，可以通过onclick去绑定事件，也可以通过addEventListerner去注册事件
 

 

 

  

watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //通过onclick注册事件 querySelectorAll获取的元素是一个数组
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // 通过addEventListener注册事件
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      //   immediate: true,
      //   deep: true,
    },
  },
  

 

3、在methods中添加方法
 

 

 

4、完整代码
  

data(){
       hookToolTip: {},     
},

  watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //通过onclick注册事件 querySelectorAll获取的元素是一个数组
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // 通过addEventListener注册事件
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      //并不需要进入页面就检查
      //   immediate: true,
      //   deep: true,
    },
  },

  methods: {
    chartClick() {
      console.log(
        this.hookToolTip,
        "-------addEventList",
        this.hookToolTip.name
      );
    },
 },

    
//echarts
      tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 出发条件
          //   formatter: "名称:{b}<br/>坐标:{c}",
          enterable: true, //允许鼠标进入提示悬浮层中
          showContent: true,
          triggerOn: "click", //提示框触发的条件  mousemove鼠标移动时触发 click鼠标点击时触发  'mousemove|click'同时鼠标移动和点击时触发
          //   confine: true, //把toolTip限制在图表的区域内
          className: "areaTool",
          // hideDelay: 100000, //延时消失时间
          formatter: (item) => {
            this.hookToolTip = item;
            console.log(item, "-----", this.hookToolTip);
            // 经纬度太长需要对位数进行截取显示，保留七位小数
            // 需要绑定点击事件
            var tipHtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer" onclick="chartClick">' +
              item.name +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "经度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "纬度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "考场数" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "监考教师" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>";

            return tipHtml;
          },
        },
     


以上就是关于“Vue项目中怎么添加点击事件，及其相关问题怎样解决”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
    

            

            

                
推荐阅读：

                
    
                                            
  1. 
                            
                                在HTML中如何让button居中，有几种方法
                            
                        
    2. 
                                            
  2. 
                            
                                CSS中flex布局如何实现自动换行？
                            
                        
    3. 
                                            
  3. 
                            
                                JS中怎样删除数组末尾元素？教你两种方法
                            
                        
    4. 
                                    

            

        


        

        
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。


        

                            Vue添加点击事件
            
        

    

    

                    
上一篇：Vue中的三种分别是什么插槽，怎么应用

                            
下一篇：原生网络请求怎么理解，过程是怎样的 

            


    

        
相关阅读

        

            
        

    


                

                    

                        
                    

                


                

                    

                        二维码-群英
                        
长按识别二维码并关注微信

                        
更方便到期提醒、手机管理

                    

                    

                        

                            
7*24 全天候服务

                            
售前  400-678-4567
                            

                            
售后 
                                    0668-2555666

                            
                            
售后 
                                 400 678 4567
                            

                            
信息安全 
                                    0668-2555 118

                            
域名空间 
                                 3004329145
                            

                            
                        

                    

                


                

                    新用户注册，获新人礼包
                    管理控制台