在 Vue3 后台项目中
使用 Arco
Design Vue 的气泡框 P
opconfirm，有以下几种
使用方式：
1. 基本用法：
```vue
<template>
<div>
<a-p
opconfirm title="确定要
删除吗？" @
confirm="handleDelete">
<a-button>Delete</a-button>
</a-p
opconfirm>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { P
opconfirm, Button } from '@arco-
design/web-vue';
export default defineComponent({
components: { P
opconfirm, Button },
methods: {
handleDelete() {
// 处理
删除逻辑
},
},
});
</script>
```
2. 自定义触发元素：
```vue
<template>
<div>
<a-p
opconfirm title="确定要
删除吗？" trigger-slot>
<a-button slot="trigger">Delete</a-button>
<template #content>
<p>确定要
删除吗？</p>
<a-button type="primary" size="small" @click="handleDelete">确定</a-button>
<a-button size="small">取消</a-button>
</template>
</a-p
opconfirm>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { P
opconfirm, Button } from '@arco-
design/web-vue';
export default defineComponent({
components: { P
opconfirm, Button },
methods: {
handleDelete() {
// 处理
删除逻辑
},
},
});
</script>
```
3. 控制弹出框的显示和隐藏：
```vue
<template>
<div>
<a-button @click="visible = true">Open</a-button>
<a-p
opconfirm title="确定要
删除吗？" v-model:visible="visible">
<template #content>
<p>确定要
删除吗？</p>
<a-button type="primary" size="small" @click="handleDelete">确定</a-button>
<a-button size="small" @click="visible = false">取消</a-button>
</template>
</a-p
opconfirm>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { P
opconfirm, Button } from '@arco-
design/web-vue';
export default defineComponent({
components: { P
opconfirm, Button },
setup() {
const visible = ref(false);
const handleDelete = () => {
// 处理
删除逻辑
visible.value = false;
};
return {
visible,
handleDelete,
};
},
});
</script>
```
4. 自定义样式：
可以通过 `style` 和 `class` 属性来自定义气泡框和触发元素的样式。
以上就是在 Vue3 后台项目中
使用 Arco
Design Vue 的气泡框 P
opconfirm 的几种
使用方式。
扫一扫
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
