Ant Design of Vue switch使用Popconfirm气泡确认框
在使用switch开关使用Popconfirm气泡确认框二次确认<template><div><a-popconfirmtitle="选择否将清除数据?":visible="visible"ok-text="是"cancel-text="否"@visibleChange="handleVisibleChange"@confirm="confirm"@cancel=
·
在使用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>
更多推荐
已为社区贡献6条内容
所有评论(0)