vue常见问题及解决方法(三)

vue常见问题及解决方法(三)

好久没更新博客了,很长一段时间在刚python,不得不说python真是方便,后面可能回更新一些python的学习历程。好,废话不说,进入主题。。

1.监听某个DOM节点,当其失去焦点(鼠标点击到页面其他标签)时,触发相应的事件。

以下是一个点击按钮,就会弹出框,点击页面其他地方,就会关闭弹出框的例子。

  • DOM结构:
1
2
3
4
5
6
7
8
9
10
<div ref="elLogout">
<div class="userControl" @click="showLogoutdiv = !showLogoutdiv">
<svg class="iconuser" aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
</div>
<div class="userLogout" v-show="showLogoutdiv">
<el-button type="primary" plain size="small" @click="toLogout">退出</el-button>
</div>
</div>
  • js部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
data () {
showLogoutdiv:false,
},
mounted() {
document.addEventListener('click',e => { //监听页面的点击事件
if(this.$refs.elLogout){ //判断是否存在该标签对象
//contains()判断DOM元素的包含关系,如果两个DOM对象一样,则返回true
if(!this.$refs.elLogout.contains(e.target)){
this.showLogoutdiv = false; //点击其他区域关闭
}
}
})
},
}

拓展:contains()函数的用法

  • 题目描述:

查找两个节点的最近的一个共同父节点,可以包括节点自身

  • 输入描述:
oNode1 和 oNode2 在同一文档中,且不会为相同的节点

递归实现:

1
2
3
4
5
6
7
function commonParentNode(oNode1, oNode2) {
if(oNode1.contains(oNode2)){
return oNode1
}else{
return commonParentNode(oNode1.parentNode, oNode2)
}
}

迭代实现:
方式一:

1
2
3
4
5
6
7
function commonParentNode(oNode1, oNode2) {
for(;;oNode1=oNode1.parentNode){
if(oNode1.contains(oNode2)){
return oNode1;
}
}
}

方式二:

1
2
3
4
5
6
7
8
function commonParentNode(oNode1, oNode2) {
while(1){
if(oNode1.contains(oNode2)){
return oNode1
}
oNode1 = oNode1.parentNode
}
}
2.计算属性computed方法内传参
  • index.vue
1
2
3
4
5
6
7
8
9
10
11
<van-circle
v-model="Ratedata[index].currentRate"
color="#2462E8"
fill="#fff"
layer-color="#E6E6E6"
:rate="Ratedata[index].rate"
:text="text(index)"
:speed="60"
:clockwise="true"
:stroke-width="40"
/>
  • computed中text方法传递index,利用了闭包传值
1
2
3
4
5
6
7
computed: {
text() {
return function (index) {
return this.Ratedata[index].currentRate.toFixed(0) + '%';
}
}
}
# vue, 前端
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×