lc-vue-biz-cu-dialog

新增/创建弹窗

Demo

demo

安装

npm i lc-vue-biz-cu-dialog 

例子

<template>
  <div>
    <el-button @click='onClick'>
      aaa
    </el-button>
    <biz-cu-dialog
      ref='dialogRef'
      title='aaaa'
      :show-footer='false'
      :init-func='initFunc'
      :submit-func='submitFunc'>
      <template #default='{defaultData}'>
        {{ defaultData }}
      </template>
      <template #prefix-footer>
        <footer-button btn-type='cancel'>
          取消1
        </footer-button>
      </template>
      <template #suffix-footer>
        <footer-button btn-type='submit' type='primary'>
          下一步
        </footer-button>
      </template>
    </biz-cu-dialog>
  </div>
</template>

<script setup lang="ts">
import { BizCuDialog, FooterButton } from 'lc-vue-biz-cu-dialog';
import { ref } from 'vue';

const dialogRef = ref();

const onClick = () => {
  dialogRef.value.show(1, { a: 1 });
};

const initFunc = (...args:any[]) => {
  console.log('initFunc', ...args);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ bb: 33 });
    }, 2000);
  });
};

const submitFunc = (...args:any[]):Promise<void> => {
  console.log('submitFunc', ...args);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 2000);
  });
};

</script>

<style scoped>

</style>

API

BizCuDialog

Attributes

属性名	说明	类型	默认值
initFunc	数据初始化方法	(id?:any, options?:any)=>Promise	() => ({})
submitFunc	提交方法	(id?:any, options?:any)=>Promise	() => ({})
title	标题	string	''
width	宽度	string	'600'
showFooter	显示底	Boolean	true
closeOnClickModal	点击modal关闭弹窗	Boolean	false
closeOnPressEscape	按ESC关闭弹窗	Boolean	false

Events

事件名	说明	类型
cancel-completed	取消逻辑执行完成	-
cancel-success	取消逻辑执行成功	-
submit-completed	提交逻辑执行成功	-
submit-success	提交逻辑执行成功	-

Slots

插槽名	说明	参数
default	弹窗内容	-
footer	弹窗底部	-

Expose

方法名	说明	类型
show	显示弹窗	(id?:any, options?:any)=>void

FooterButton

Attributes

属性名	说明	类型	默认值
type	el-button type 属性	string	-
btnType	按钮逻辑类型	'cancel' | 'submit'	'cancel'

Events

事件名	说明	类型
completed	逻辑执行完成	-
success	逻辑执行成功	-

Slots

插槽名	说明	参数
default	按钮内容	-