Vue进阶（幺玖肆）：VantUI 实现 Dialog 弹框动态显示 message

矫情吗；* 2022-10-09 06:23 315阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、实现步骤
     *  三、涉及知识点
     *  四、拓展阅读

--------------------

## 一、前言 ##

在利用`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)">下钻  ></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`锚点定位

## 四、拓展阅读 ##

*  [VantUI 官方文档][VantUI]

[VantUI]: https://vant-contrib.gitee.io/vant/#/zh-CN/