美文网首页
使用 el-popover时候遇到的难点

使用 el-popover时候遇到的难点

作者: LcoderQ | 来源:发表于2024-06-05 16:52 被阅读0次
    • 在使用饿了么UI做悬浮弹出框时,官网给出了为表格中单独某一列设置弹出效果的实例。

    • 在开发公司内部系统时,由于在某些情景下必须要查看弹窗中的提示信息,因此希望设置成鼠标移入到某一列时,就展示对应的弹窗。

    image.png

    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>
    

    相关文章

      网友评论

          本文标题:使用 el-popover时候遇到的难点

          本文链接:https://www.haomeiwen.com/subject/lvhyqjtx.html