在使用switch开关使用Popconfirm气泡确认框二次确认
<template>
<div>
<a-popconfirm
title="选择否将清除数据?"
:visible="visible"
ok-text="是"
cancel-text="否"
@visibleChange="handleVisibleChange"
@confirm="confirm"
@cancel="cancel"
>
<a-switch :checked="iscolse">
<a-icon slot="checkedChildren" type="check" />
<a-icon slot="unCheckedChildren" type="close" />
</a-switch>
</a-popconfirm>
<br />
<div v-if="iscolse">
这里是通过开关控制显示与隐藏的
</div>
</div>
</template>
<script>
export default {
data () {
return {
visible: false,
iscolse: false
}
},
created () {
this.iscolse = true
},
methods: {
confirm () {
this.visible = false
this.iscolse = false
},
cancel () {
this.visible = false
},
handleVisibleChange (visible) {
if (!visible) {
this.visible = false
return
}
if (this.iscolse) {
this.visible = true
} else {
this.iscolse = true
console.log('isclose', this.iscolse)
}
}
}
}
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dce55fec87cc96c079202dd80f99cbc7.gif)