arco design vue 点击按钮modal出现

Arco Design Vue 是一款基于 Vue.js 的设计体系，它提供了一套简洁、易用的界面组件库，旨在帮助开发者快速构建美观且功能丰富的应用。如果你想在 Arco Design Vue 中实现点击按钮后弹出 modal（模态框），你可以按照以下步骤操作：

1. 首先，安装 Arco Design Vue 的依赖，如果你还没有安装，可以在项目中运行 `npm install @arco-design/vue` 或者 `yarn add @arco-design/vue`。

2. 引入需要的组件，比如 `Modal` 组件：

   <script setup>
   import { Modal } from '@arco-design/web-vue';
   </script>

3. 创建一个按钮，并绑定 click 事件来打开 modal：

   <button @click="showModal">点击打开 Modal</button>

4. 定义一个方法 `showModal` 来显示 modal：

   const showModal = () => {
     Modal.open({
       title: '这是一个模态框',
       content: '在这里放置你的模态内容',
       // 可选配置项，如关闭按钮、确认回调等
       onOk() {
         // 当用户点击确定时执行的回调
       },
       onCancel() {
         // 当用户点击取消或关闭时执行的回调
       }
     });
   };

5. 最后，在模板中引入并使用这个方法：

完整的例子：

<template>
  <div>
    <button @click="showModal">点击打开 Modal</button>
    <Modal v-model="showModal" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Modal } from '@arco-design/web-vue';

const showModal = ref(false); // 存储 modal 是否展示的状态

onMounted(() => {
  // 初始化状态
  showModal.value = false;
});

const showModalMethod = () => {
  showModal.value = true; // 显示 modal
};

// 按需添加关闭按钮的行为
const closeModalMethod = () => {
  showModal.value = false; // 关闭 modal
};

// 在模板上绑定方法
<button @click="showModalMethod">点击打开 Modal</button>
<Modal :visible.sync="showModal">
  <!-- 模态框内容 -->
  这是一个模态框的内容...
</Modal>
</script>