-
在使用饿了么UI做悬浮弹出框时,官网给出了为表格中单独某一列设置弹出效果的实例。
-
在开发公司内部系统时,由于在某些情景下必须要查看弹窗中的提示信息,因此希望设置成鼠标移入到某一列时,就展示对应的弹窗。
1.在初次尝试时,定义了一个专门的变量(ifShow)用于控制pop的显示与隐藏,并利用表格api中的cell-mouse-enter和cell-mouse-leave事件更改ifShow的值来控制发现各行的弹窗要么都显示要么都不显示。
2.然后尝试通过给el-popover
添加唯一的ref属性,在上述两个表格的回调事件中拿到对应的组件实例修改其showPoper属性来进行控制得到的结果和第一点一样。
3.查询相关资料后发现,el-popover中每一个组件的显示与控制由一个value(v-model)控制,因此可以采用以下方式设置,或者是对要展示的数据添加一个用于控制显示和隐藏的字段
// popover的v-model是个boolean,所以show是个boolean数组就行
<van-popover
v-model="show[index]"
...
>
<template #reference>
...
</template>
</van-popover>
data() {
return {
// v-model属性
show: []
}
}
// 请使用Vue的set方法,立即触发popover内对value的监听
this.$set(this.show, index, true)</pre>
网友评论