100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ElementUI手动控制popover弹层的显示与隐藏

ElementUI手动控制popover弹层的显示与隐藏

时间:2024-06-17 10:16:03

相关推荐

ElementUI手动控制popover弹层的显示与隐藏

是时候表演真正的技术了

网上找了一堆都是没用的。。。。搜的第一个是啥也没说

手动控制el-popover弹窗的显示与隐藏其实很简单,el-popover层绑定一个v-model的值为true或者false就行了。这是官网上给的Attributes。

<el-popover v-model="showPopover">

而且显示根本不用控制,el-popover有一个trigger属性,trigger可以为click/focus/hover/manual,默认值是click,所以单击就能触发,主要是弹窗的隐藏问题。

<el-popover trigger="click">

<el-popoverplacement="right"width="400"trigger="click"v-model="showPopover"><el-table :data="gridData"><el-table-column width="150" property="date" label="日期"></el-table-column><el-table-column width="100" property="name" label="姓名"></el-table-column><el-table-column width="300" property="address" label="地址"></el-table-column></el-table><!--激活控制弹窗的显示--><el-button slot="reference">click 激活</el-button><!--在加个按钮绑定一个方法控制弹窗的隐藏--><el-button class="btn-normal" size="medium" @click="closePopover">popover弹窗关闭</el-button></el-popover>

<script>export default {data() {return {showPopover:false,//v-model默认值是false, click激活变成truegridData: [{date: '-05-02',name: '王小虎',address: '上海'}]}},methods: {closePopover(){this.showPopover = false//关闭就是把v-model设置成false}}}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。