Vue进阶（幺捌玖）：VantUI 实现 Dialog 弹框动态显示 message_van-dialog 动态设置message

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;
#### 后话

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

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

对于面试，说几句个人观点。



面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。