1.0.2 • Published 1 year ago

lc-vue-biz-cu-dialog v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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显示底Booleantrue
closeOnClickModal点击modal关闭弹窗Booleanfalse
closeOnPressEscape按ESC关闭弹窗Booleanfalse

Events

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

Slots

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

Expose

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

FooterButton

Attributes

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

Events

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

Slots

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

1 year ago

1.0.0

1 year ago