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

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

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

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

// 点击触发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;" onclick="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%;  }