写点什么

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

发布于: 2021 年 08 月 02 日
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;" 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%;  }
复制代码


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

三、涉及知识点

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


  • JQuery 元素操作

  • ECharts锚点定位

四、拓展阅读

发布于: 2021 年 08 月 02 日阅读数: 3
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺玖肆):VantUI 实现 Dialog 弹框动态显示 message