63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
||
<div>
|
||
<md>
|
||
## 条件触发
|
||
可以判断是否需要弹出。
|
||
</md>
|
||
<Popconfirm
|
||
title="Are you sure delete this task?"
|
||
:visible="visible"
|
||
@visibleChange="handleVisibleChange"
|
||
@confirm="confirm"
|
||
@cancel="cancel"
|
||
okText="Yes"
|
||
cancelText="No"
|
||
>
|
||
<a href="#">Delete a task</a>
|
||
</Popconfirm>
|
||
<br />
|
||
<br />
|
||
Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Popconfirm, Checkbox } from 'antd'
|
||
export default {
|
||
data () {
|
||
return {
|
||
visible: false,
|
||
condition: true,
|
||
}
|
||
},
|
||
methods: {
|
||
changeCondition (e) {
|
||
this.condition = e.target.checked
|
||
},
|
||
confirm () {
|
||
this.visible = false
|
||
},
|
||
cancel () {
|
||
this.visible = false
|
||
},
|
||
handleVisibleChange (visible) {
|
||
if (!visible) {
|
||
this.visible = false
|
||
return
|
||
}
|
||
// Determining condition before show the popconfirm.
|
||
console.log(this.condition)
|
||
if (this.condition) {
|
||
this.confirm() // next step
|
||
} else {
|
||
this.visible = true
|
||
}
|
||
},
|
||
},
|
||
components: {
|
||
Popconfirm,
|
||
Checkbox,
|
||
},
|
||
}
|
||
</script>
|