方法一:使用组建的手动激活方式,通过visible属性真假来控制
<el-popover
placement="top"
width="160"
v-model="visible">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible = false">确定</el-button>
</div>
<el-button slot="reference">删除</el-button>
</el-popover>
<script>
export default {
data() {
return {
visible: false,
};
}
}
</script>
方式二:通过原型上方法来控制(文档中没有例子)
<el-popover
placement="top"
width="160"
ref='popover'
v-model="visible">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visibleTrue">取消</el-button>
<el-button type="primary" size="mini" @click="visibleFalse">确定</el-button>
</div>
<el-button slot="reference">删除</el-button>
</el-popover>
<script>
export default {
data() {
return {
};
methods:{
visibleTrue(){
this.$refs.popover.doShow();
},
visibleFalse(){
this.$refs.popover.doClose();
},
}
}
}
</script>