vben:对话框组件

本文将介绍如何在vben admin vue 框架中,创建对话框组件,并成功应用的代码。代码即插即用。

结果如下图所示,

一、创建对话框组件

创建 myModal/index.vue

javascript 复制代码
<template>
  <div>
    <BasicModal
      @register="registerModal"
      v-bind="$attrs"
      title="示例对话框"
      @ok="handleSubmit"
      width="58%"
    >
      <p>这是示例内容</p>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data: any) => {
    setModalProps({ confirmLoading: false });
    console.log(data);
  });
  const handleSubmit = () => {
    closeModal();
  };
</script>

二、应用对话框组件

javascript 复制代码
<template>
  <div class="more"  @click="showModal">
    <span class="more-span">点击显示对话框</span>
    <i class="arrow"></i>
  </div>
  <myModal width="50%" @register="modalOpen" @success="handleSuccess" ></myModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import myModal from './myModal/index.vue';
  import { useModal } from '/@/components/Modal';
  const [modalOpen, { openModal }] = useModal();

  // true时显示。
  const showModal = (record: any) => {
    openModal(true, { isUpdate: true, record });
  };
</script>
相关推荐
jaywongX1 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
前端极客探险家5 小时前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
有什么东东21 小时前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络71 天前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
万水千山走遍TML2 天前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能
90后小陈老师2 天前
WebXR教学 05 项目3 太空飞船小游戏
windows·3d·web·js
脑瓜嗡3 天前
发送百度地图的定位
vue·php
巴啦啦臭魔仙3 天前
buildadmin 自定义单元格渲染
vue·php
小贺要学前端3 天前
前端如何优雅地对接后端
前端·性能优化·vue·前端优化