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

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

1. 基本用法：

<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>

2. 自定义触发元素：

<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>

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

<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>

4. 自定义样式：

可以通过 `style` 和 `class` 属性来自定义气泡框和触发元素的样式。

以上就是在 Vue3 后台项目中使用 Arco Design Vue 的气泡框 Popconfirm 的几种使用方式。