ant-design-vue/components/popconfirm/demo/dynamic-trigger.md

69 lines
1.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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 'vue-antd-ui'
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>
```