Vue 设置modal的按钮 只保留取消

<template>
  <a-modal
    :title="title"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    :closable="closable"
    :keyboard="keyboard"
    :maskClosable="maskClosable"
    :destroyOnClose="true"
  >
    <template slot="footer" >
      <a-button  @click="handleCancel">关闭</a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <div style="text-align: center">
        <a-row v-if="QRUrl">
          <img :src="QRUrl">
        </a-row>
        <a-row v-if="!QRUrl">
          <p>获取公众号二维码失败,请联系管理员</p>
        </a-row>
      </div>
    </a-spin>
  </a-modal>
</template>
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` 组件: ```html <script setup> import { Modal } from '@arco-design/web-vue'; </script> ``` 3. 创建一个按钮,并绑定 click 事件来打开 modal: ```html <button @click="showModal">点击打开 Modal</button> ``` 4. 定义一个方法 `showModal` 来显示 modal: ```js const showModal = () => { Modal.open({ title: '这是一个模态框', content: '在这里放置你的模态内容', // 可选配置项,如关闭按钮、确认回调等 onOk() { // 当用户点击确定时执行的回调 }, onCancel() { // 当用户点击取消或关闭时执行的回调 } }); }; ``` 5. 最后,在模板中引入并使用这个方法: 完整的例子: ```html <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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值