Vue进阶(幺玖肆):VantUI 实现 Dialog 弹框动态显示 message

Posted No Silver Bullet

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue进阶(幺玖肆):VantUI 实现 Dialog 弹框动态显示 message相关的知识,希望对你有一定的参考价值。


一、前言

在利用Echarts实现地图展示时,需要实现点击某一省份,模态框形式给出相应的省份信息,点击模态框中的下钻按钮,实现下钻至该省份下的区域地图部分,以此类推,直至下钻至区县三级地图。

二、实现步骤

为满足以上需求,可按照如下步骤:

  1. 点击地图某一区域,弹窗展示区域信息;
  2. 点击下钻按钮,下钻至下一层级地图;
  3. 将区域弹窗信息锚点至相应区域;

在实现步骤一时,方法如下:
html

共两个容器,一个地图,一个弹出框。

<!-- 地图 -->
 <div id="map" style="height: 600px;width: 600px;"></div>
 <!-- 弹出框 -->
 <div id="box" >
     <span id="box-title"></span>
 </div>

javaScript

myChart.on('click', function (params) {//点击事件
  if (params.componentType === 'series') {
    var provinceName =params.name;
    $('#box').css('display','block');
    $("#box-title").html(provinceName);
  }
}

CSS

#box{
     display:none;
     background-color: goldenrod;
     width: 180px;
     height: 30px;
 }
 #box-title{
     display:block;
 }

实现步骤二时,只需在弹窗中增加【下钻】button,点击后调用ECharts地图下钻方法,实现如下:

// 点击触发
that.myChart.on("click", param => {
   if (param.componentType === 'series') {
     $('#box').css({display: 'block'})
     $('#box-title').css('display', 'block')
     window.params = param
     let cityName = param.name
     let cityContent = ''
     if (param.data) {
       param.data.dataValue.forEach((item, index, array) => {
         cityContent += item.name + ':' + item.value + '<br>'
       })
     }
     let drillDownBtn = ''
     if (this.mapLevel < 2) {
       drillDownBtn = '<hr><a id="drillDownBtn" style="color: #F8A2A3;" οnclick="drillDown(params)">下钻&nbsp;&nbsp;></a>'
     }
     $('#box').css({display: 'block', fontSize: '12px', lineHeight: '20px'})
     $('#box-title').html(cityName + '<br>' + cityContent + drillDownBtn)
   }
});

// 下钻
window.drillDown = param => {
 $('#box').css('display', 'none')
 $('#box-title').css('display', 'none')
 if (param.name in that.provinces) {
   // 处理省模块
   this.mapLevel = 1;
   this.provinceName = param.name;
   for (let key in that.provinces) {
     if (that.provinceName == key) {
       showProvince(that.provinces[key], key);
       break;
     }
   }

 } else if (param.name in that.cityMap) {
   // 处理市模块
   this.mapLevel = 2;
   that.cityName = param.name;
   for (let key in that.cityMap) {
     if (that.cityName == key) {
       showCitys(that.cityMap[key], key);
       break;
     }
   }
 }
}

在实现以上逻辑时,应注意控制弹窗的隐藏样式。

实现步骤三时,鉴于移动设备屏幕尺寸限制,将弹出框锚点至相应省份信息时,会出现不友好的展示方式。顾考虑将弹窗采用固定布局,实现方法如下:

  #box {
    display: none;
    background-color: #7F7F7F;
    width: 128px;
    border-radius: 10px;
    position: fixed;
    left: 30%;
    top: 16%;
  }
  #box-title {
    display: block;
    color: white;
    text-align: left;
    margin: 5px 5%;
  }

经过以上步骤,可实现针对具体区域,给出相应的区域信息。

三、涉及知识点

实现Dialog 弹出框显示动态message效果,涉及以下知识点:

  • JQuery 元素操作
  • ECharts锚点定位

四、拓展阅读

以上是关于Vue进阶(幺玖肆):VantUI 实现 Dialog 弹框动态显示 message的主要内容,如果未能解决你的问题,请参考以下文章

Vue进阶(幺玖幺)::ECharts实现地图功能

Vue进阶(幺玖叁):Vue实例属性$OPTIONS

Vue进阶(幺玖贰):获取url传参

Vue进阶(幺玖陆):js保留两位小数方法总结

vue3+typescript+vantUi 实现一个带有搜索功能的 picker选择器

vue3+typescript+vantUi 实现一个带有搜索功能的 picker选择器