69 lines
1.3 KiB
Markdown
69 lines
1.3 KiB
Markdown
|
<cn>
|
|||
|
|
#### 条件触发
|
|||
|
|
可以判断是否需要弹出。
|
|||
|
|
</cn>
|
|||
|
|
|
|||
|
|
<us>
|
|||
|
|
#### Conditional trigger
|
|||
|
|
Make it pop up under some conditions.
|
|||
|
|
</us>
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<a-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>
|
|||
|
|
</a-popconfirm>
|
|||
|
|
<br />
|
|||
|
|
<br />
|
|||
|
|
Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { message } from 'antd'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
visible: false,
|
|||
|
|
condition: true,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
changeCondition (e) {
|
|||
|
|
this.condition = e.target.checked
|
|||
|
|
},
|
|||
|
|
confirm () {
|
|||
|
|
this.visible = false
|
|||
|
|
message.success('Next step.')
|
|||
|
|
},
|
|||
|
|
cancel () {
|
|||
|
|
this.visible = false
|
|||
|
|
message.error('Click on cancel.')
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|