ProModal API

作者:陈佳鑫
时间:2023-07-20

cjx-zdy-ui项目仓库open in new window

图片展示


代码展示


点击查看代码
<template>
  <el-button type="primary" @click="onAdd">打开Modal框</el-button>
  <ProModal :column="modalColumn" v-model="value" :modal="modalProps" :form="{}" ref="proModalRef" validate
    @submit="onSubmit">
    <!-- <template #footer>
      <div class="dialog-footer" style="text-align: end;">
        <el-button>Cancel</el-button>
        <el-button type="primary">
          Confirm
        </el-button>
      </div>
    </template> -->
  </ProModal>
</template>
<script setup lang="ts">
import { ProModal } from 'cjx-zdy-ui'
import { reactive, ref } from 'vue';
import { EnterFormProps, ProModalInstance } from 'cjx-zdy-ui/lib/src/proModal/types';
import { DialogProps } from 'element-plus/es/components/dialog';

const proModalRef = ref<ProModalInstance>()

const modalColumn: EnterFormProps[] = [
  { label: '奖品名', prop: 'awardName', el: 'input', rules: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }] },
  // {
  //   label: '奖品名1', prop: 'awardName1', render: (scope) => {
  //     return <el-input modelValue={value.awardName1} placeholder="请输入奖品名1" />
  //   },
  // },
  {
    label: '奖品名', prop: 'awardName2', el: 'select',
    enum: [
      { label: '测试奖品', value: '1' }
    ],
    enterProps: {
      clearable: true
    },
    rules: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
  },
]

const modalProps = reactive<Partial<DialogProps>>({
  title: '测试Modal'
})

const value = reactive<{ [k: string]: any }>({
  awardName: 11111
})

const onAdd = () => {
  proModalRef.value?.show({ formData: { awardName: '22222' }, title: '测试0002' })
}

const onSubmit = (val: boolean) => {
  console.log(val)
}
</script> 

安装

npm i cjx-zdy-ui

yarn install cjx-zdy-ui

引用 main.ts

import CjxUI from 'cjx-zdy-ui'

app.use(CjxUI)

ProModal 属性

属性名说明类型必传可选值默认值
v-modelfrom表单中数据{ [k: string]: any}false--
column输入项配置EnterFormProps[]true--
validate是否由组件validate验证 默认true, 如果传入插槽footer则需要自验证booleanfalsebooleantrue
modalDialog 属性,根据 element plus 官方文档来传递DialogPropsfalse--
formForm 属性,根据 element plus 官方文档来传递FormPropsfalse--

EnterFormProps 属性

属性名说明类型必传可选值默认值
el当前项输入框的类型input input-number autocomplete select select-v2 tree-select cascader date-picker time-picker time-select switch slider radio checkbox upload ratefalse-input
label当前项标题stringtrue--
prop当前from项prop属性stringtrue--
rules当前from项校验规则objectfalse--
enum枚举类型(字典)EnumProps[] ((params?: any) => Promise<any>)false--
fieldNames指定 label value children 的 key 值FieldNamesPropsfalse--
enterProps输入项参数,根据 element plus 官方文档来传递,该属性所有值会透传到组件anyfalse--
render自定义输入项内容渲染(tsx语法),使用render需要搭配v-modal使用实现数据双向绑定(scope: RenderScope<T>) => VNode stringfalse--

EnumProps 属性

属性名说明类型必传可选值默认值
label选项框显示的文字stringtrue--
value选项框值stringtrue--
disabled是否禁用此选项booleanfalse--
tagType当 tag 为 true 时,此选择会指定 tag 显示类型success info warning dangerfalse--
children为树形选择时,可以通过 children 属性指定子选项EnumProps[]false--

FieldNamesProps 属性

属性名说明类型必传可选值默认值
label选项框显示的文字stringtrue--
value选项框值stringtrue--
children选项框子选项stringfalse--

插槽

事件名说明
header对话框标题的内容;会替换标题部分,但不会移除关闭按钮。
title与 header 作用相同 请使用 header
footerDialog 按钮操作区的内容

事件

事件名说明参数
submit确定按钮触发事件如果使用footer插槽将不会触发form 表单数据
Last Updated:
Contributors: 1102166242@qq.com