vue3后台项目中arco design vue气泡框Popconfirm有哪几种使用方式

在 Vue3 后台项目中使用 Arco Design Vue 的气泡框 Popconfirm，有以下几种使用方式：

基本用法：

<template>
<div>
<a-popconfirm title="确定要删除吗？" @confirm="handleDelete">
<a-button>Delete</a-button>
</a-popconfirm>
</div>
</template>

<script>
import { defineComponent } from 'vue';
import { Popconfirm, Button } from '@arco-design/web-vue';

export default defineComponent({
components: { Popconfirm, Button },
methods: {
handleDelete() {
// 处理删除逻辑
},
},
});
</script>
登录后复制

自定义触发元素：

<template>
<div>
<a-popconfirm 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-popconfirm>
</div>
</template>

<script>
import { defineComponent } from 'vue';
import { Popconfirm, Button } from '@arco-design/web-vue';

export default defineComponent({
components: { Popconfirm, Button },
methods: {
handleDelete() {
// 处理删除逻辑
},
},
});
</script>
登录后复制

控制弹出框的显示和隐藏：

<template>
<div>
<a-button @click="visible = true">Open</a-button>
<a-popconfirm 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-popconfirm>
</div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Popconfirm, Button } from '@arco-design/web-vue';

export default defineComponent({
components: { Popconfirm, Button },
setup() {
const visible = ref(false);

const handleDelete = () => {
// 处理删除逻辑
visible.value = false;
};

return {
visible,
handleDelete,
};
},
});
</script>
登录后复制

自定义样式：

可以通过 style 和 class 属性来自定义气泡框和触发元素的样式。
以上就是在 Vue3 后台项目中使用 Arco Design Vue 的气泡框 Popconfirm 的几种使用方式。