vben：对话框组件

_乐多_2024-09-01 15:31

本文将介绍如何在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>