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

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

**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 + ‘
’
})
}
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%;
}

### js基础
1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

![js基础.PNG](https://img-blog.csdnimg.cn/img_convert/1ec6717618d4ce91d7089f94c8642a4c.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/6f975b7921d17611471a837d7ee22bd9.webp?x-oss-process=image/format,png)

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

转存中...(img-J7ASQdau-1715842793652)]

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