superui
Search K

Appearance

弹出框业务组件 ​

基础用法 ​

基础用法
根据配置生成弹出框弹出框
<template>
  <div>
    <a-button @click="open">打开</a-button>
    <su-modal
      class="vp-raw"
      ref="modalRef"
      :formParam="formParam"
      :formList="formList"
      :title="modal.title"
      :visible="modal.show"
      :edit="modal.edit"
      @cancel="handleCancel"
      @submit="handleSubmit"
    ></su-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const modal = reactive({
    title: '弹出框',
    show: false,
    edit: true,
})

const handleCancel = () => {
    modal.show = false;
};

const handleSubmit = () => {
    modal.show = false;
};

let formList:any = reactive([
    {
        name: 'input',
        key: 'input',
        title: '用户名',
        labelCol: {span:4}
    },
])
let formParam: any = reactive({});
// 初始化数据
const initSearch = () => {
    formList.forEach((item: any) => {
        formParam[item.key] = item.value || '';
    });
};

const open = () => {
  modal.show = true
  initSearch()
}
</script>

仅查看 ​

查看数据不进行编辑
仅查看
<template>
  <div>
    <a-button @click="open">打开</a-button>
    <su-modal
      class="vp-raw"
      ref="modalRef"
      :formParam="formParam"
      :formList="formList"
      :title="modal.title"
      :visible="modal.show"
      :edit="modal.edit"
      @cancel="handleCancel"
      @submit="handleSubmit"
    ></su-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const modal = reactive({
    title: '弹出框',
    show: false,
    edit: false,
})

const handleCancel = () => {
    modal.show = false;
};

const handleSubmit = () => {
    modal.show = false;
};

let formList: any = reactive([
    {
        name: 'input',
        key: 'input',
        title: '用户名',
        labelCol: {span:4},
        value: '张三'
    },
])
let formParam: any = reactive({});
// 初始化数据
const initSearch = () => {
    formList.forEach((item: any) => {
        formParam[item.key] = item.value || '';
    });
};

const open = () => {
  modal.show = true
  initSearch()
}
</script>

动态配置弹出框 ​

动态配置弹出框
动态修改弹出框
<template>
  <div>
    <a-button @click="open">打开</a-button>
    <su-modal
      class="vp-raw"
      ref="modalRef"
      :formParam="formParam"
      :formList="formList"
      :title="modal.title"
      :visible="modal.show"
      :edit="modal.edit"
      @cancel="handleCancel"
      @submit="handleSubmit"
    >
       <template #add>
          <a-button @click="addItem">添加</a-button>
       </template>
    </su-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue'
const modal = reactive({
    title: '弹出框',
    show: false,
    edit: true,
})

const handleCancel = () => {
    modal.show = false;
};

const handleSubmit = () => {
  console.log(formParam)
    modal.show = false;
};

let formList:any = reactive([
    {
        name: 'slot',
        slotName: 'add',
        key: 'add',
        title: '添加',
        labelCol: {span:4}
    },
    {
        name: 'input',
        key: 'input',
        title: '用户名',
        labelCol: {span:4}
    },
])
let formParam: any = reactive({});
// 初始化数据
const initSearch = () => {
    formList.forEach((item: any) => {
        formParam[item.key] = item.value || '';
    });
};

const open = () => {
  modal.show = true
  initSearch()
}

let modalRef = ref()
const addItem = () => {
  formList.push({
    name: 'input',
    key: 'input' + (Math.random() * 100).toFixed(0),
    title: '用户名',
    labelCol: {span:4}
  })
  initSearch()
  modalRef.value.updateForm()
}
</script>

弹出框赋值 ​

弹出框赋值
弹出框赋值
<template>
  <div>
    <a-button @click="open">打开</a-button>
    <su-modal
      class="vp-raw"
      ref="modalRefSetData"
      :formParam="formParam"
      :formList="formList"
      :title="modal.title"
      :visible="modal.show"
      :edit="modal.edit"
      @cancel="handleCancel"
      @submit="handleSubmit"
    >
       <template #add>
          <a-button @click="changeValue">随机值</a-button>
       </template>
    </su-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue'
const modal = reactive({
    title: '弹出框',
    show: false,
    edit: true,
})

const handleCancel = () => {
    modal.show = false;
};

const handleSubmit = () => {
  console.log(formParam)
    modal.show = false;
};

let formList:any = reactive([
    {
        name: 'slot',
        slotName: 'add',
        key: 'add',
        title: '修改',
        value: '',
        labelCol: {span:4}
    },
    {
        name: 'input',
        key: 'input',
        title: '用户名',
        value: '',
        labelCol: {span:4}
    },
])
let formParam: any = reactive({});
// 初始化数据
const initSearch = () => {
    formList.forEach((item: any) => {
        formParam[item.key] = item.value || '';
    });
};

const open = () => {
  modal.show = true
  initSearch()
}

let modalRefSetData = ref()
const changeValue = () => {
  modalRefSetData.value.updateData({input: (Math.random() * 100).toFixed(0)})
}
</script>

弹出框组件参数配置 ​

参数

说明

类型

默认值

formList弹出框配置itemType[]配置请查看下方FormList弹出框配置
formParam弹出框数据string、number、string[]、number[]、boolean数值需要根据formList去生成,请查看下方FormParam生成方法
title弹出框标题string--
visible弹出框显隐状态booleanfalse
edit弹出框编辑状态booleanfalse
width弹出框宽度string'540px'
submitText提交按钮文案string'保存修改'
cancelText取消按钮文案string'取消'
subLoading确认按钮的加载状态booleanfalse
maskClosable点击蒙层是否允许关闭booleanfalse

弹出框内部暴露方法或变量 ​

参数

说明

类型

示例

updateData更新弹出框值function--
updateForm更新弹出框配置function--
itemChange组件值改变时触发的回调function--

弹出框单项配置 ​

参数

说明

类型

示例

key弹出框组件键值string唯一的key值
name弹出框组件类别stringinput 、InputNumber 、select 、timePicker 、 timeRangePicker 、datePicker 、dateRangePicker 、cascader、switch、radio、checkbox、slot
slotName自定义组件--当name值为slot时可使用
value弹出框组件初始值--string、number、string[]、number[]、boolean
enumselect组件搜索项array下拉列表数据，默认取value、label
labelName自定义枚举文字string更改下拉数据取值
valueName自定义枚举值string更改下拉数据取值
api动态枚举function获取接口返回的下拉数据
params动态获取枚举的参数object{}
style组件左侧文字样式string设置文字行内样式
format时间类选项输出的格式string使用dayjs格式化时间格式：'YYYY MM DD hh:mm:ss'
optionType组合式radiostring沿用自antd
width表格列宽度number沿用自antd
mininputNumber组件最小值number沿用自antd
maxinputNumber组件最大值number沿用自antd
placeholder组件无值时显示的文字string沿用自antd
labelCol组件左侧文件宽度string沿用自antd
labelAlign组件左侧文件定位string沿用自antd
wrapperCol组件宽度string沿用自antd
picker日期选项样式string沿用自antd
rules数据校验object[]沿用自antd

FormParam生成方法 ​

let formParam: any = reactive({});
// 初始化搜索值
const initSearch = () => {
  formData.forEach((item: itemType) => {
    formParam[item.key] = item.value || '';
  });
};
initSearch();