Vue 进阶(幺玖肆):VantUI 实现 Dialog 弹框动态显示 message
一、前言
在利用Echarts
实现地图展示时,需要实现点击某一省份,模态框形式给出相应的省份信息,点击模态框中的下钻按钮,实现下钻至该省份下的区域地图部分,以此类推,直至下钻至区县三级地图。
二、实现步骤
为满足以上需求,可按照如下步骤:
点击地图某一区域,弹窗展示区域信息;
点击下钻按钮,下钻至下一层级地图;
将区域弹窗信息锚点至相应区域;
在实现步骤一时,方法如下:html
共两个容器,一个地图,一个弹出框。
复制代码
javaScript
复制代码
CSS
复制代码
实现步骤二时,只需在弹窗中增加【下钻】button,点击后调用 ECharts 地图下钻方法,实现如下:
复制代码
在实现以上逻辑时,应注意控制弹窗的隐藏样式。
实现步骤三时,鉴于移动设备屏幕尺寸限制,将弹出框锚点至相应省份信息时,会出现不友好的展示方式。顾考虑将弹窗采用固定布局,实现方法如下:
复制代码
经过以上步骤,可实现针对具体区域,给出相应的区域信息。
三、涉及知识点
实现Dialog
弹出框显示动态 message 效果,涉及以下知识点:
JQuery
元素操作ECharts
锚点定位
四、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/b93696acca063ca651ef0dde9】。文章转载请联系作者。
评论