Vue
-
什么是MVVM?
-
mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
-
组件之间的传值?
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用?
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用?
-
Vue 的 nextTick 的原理是什么?
-
Vuex 有哪几种属性?
#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 + ‘
’
})
}
let drillDownBtn = ‘’
if (this.mapLevel < 2) {
drillDownBtn = ‘
<a id=“drillDownBtn” style=“color: #F8A2A3;” οnclick=“drillDown(params)”>下钻 >’
}
$(‘#box’).css({display: ‘block’, fontSize: ‘12px’, lineHeight: ‘20px’})
$(‘#box-title’).html(cityName + ‘
’ + 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 官方文档](https://bbs.csdn.net/topics/618166371)
### 结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![html5](https://img-blog.csdnimg.cn/img_convert/54b86b224ababd66d550717c488a891d.webp?x-oss-process=image/format,png)
,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
[外链图片转存中...(img-uBLwy1NJ-1715165796976)]