el-dialog-form
介绍
基于element-ui封装的弹窗式表单组件
示例
git地址
https://gitee.com/chenfency/el-dialog-form.git
更新日志
2021-8-12
- 版本1.0.0
2021-8-17
- 优化组件，兼容element原组件所有Attributes及Events
2021-9-9
- 新增tip提示
安装教程
- npm install el-dialog-form --save
使用说明
- 插件基于element-ui开发：element-ui文档
- 安装前请先确保已经安装element-ui
- npm install element-ui --save
- 验证器文档地址：https://github.com/yiminghe/async-validator
参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示dialog | Boolean | true | false |
| title | 标题 | String | - | - |
| width | 表单宽度 | String | - | - |
| items | 表单项，详细见下方说明 | Array | - | [] |
| form | 初始表单值 | Object | - | {} |
items参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 表单项的类型,必填 | String | input/input-number/radio-group/checkbox-group/select/switch/time-picker/date-picker | - |
| span | el-col的span值 | Number | - | 20 |
| label | 表单项label | String | - | - |
| prop | 表单项key | String | - | - |
| tip | 文字提示 | String | - | - |
| rules | 表单验证规则，验证器文档地址:https://github.com/yiminghe/async-validator | Array | - | - |
| hidden | 隐藏条件函数，返回true/false来控制显示隐藏 | Function | - | - |
| options | 选择项数组，仅type等于radio-group/checkbox-group/select生效,详细见下方说明 | Array | - | - |
| on | 事件监听，key->value形式，key值同element-ui的Events，value为一个函数，详见element-ui文档 | Object | - | - |
| attrs | 属性参数，key->value形式，key值同element-ui的Attributes，详见element-ui文档 | Object | - | - |
options参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 显示的label | String | - | - |
| value | 选中的value | Any | - | - |
示例代码
<template>
<div class="app-container">
<el-button @click="dialog = true">打开表单</el-button>
<!-- 表单 -->
<el-dialog-form :visible.sync="dialog" title="表单标题" width="500px" :items="items" :form="form"
@submit="onSubmit">
</el-dialog-form>
</div>
</template>
<script>
import elDialogForm from 'el-dialog-form'
export default {
components: {
elDialogForm
},
data() {
return {
form: {
input: '',
inputNumber:0,
switch:false,
timePicker:'',
datePicker:'',
radioGroup:1,
checkboxGroup:[],
select:[],
checkbox:true
},
dialog: false,
items: [
{
type: 'input',
label: '普通输入',
prop: 'input',
rules: [{
required: true,
message: "请输入名称",
trigger: 'blur'
}],
attrs:{
placeholder:'请输入名称'
},
on: {
blur: (e) => {
console.log(e);
}
},
},
{
type: 'input-number',
label: '计数器',
prop: 'inputNumber',
on: {
}
},
{
type: 'switch',
label: '开关',
prop: 'switch',
on: {
}
},
{
type: 'time-picker',
label: '时间选择',
prop: 'timePicker',
on: {
}
},
{
type: 'date-picker',
label: '日期选择',
prop: 'datePicker',
attrs:{
},
},
{
type: 'radio-group',
label: '单选框组',
prop: 'radioGroup',
tip:'radio-group说明',
options:[
{
label:'苹果',
value:1
},
{
label:'西瓜',
value:2
}
],
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
{
type: 'checkbox-group',
label: '多选框组',
prop: 'checkboxGroup',
options:[
{
label:'金毛',
value:1
},
{
label:'哈士奇',
value:2
}
],
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
{
type: 'select',
label: '下拉选择',
prop: 'select',
options:[
{
label:'鼠标',
value:1
},
{
label:'键盘',
value:2
}
],
attrs:{
placeholder:'请输入名称'
},
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
{
type: 'checkbox',
label: '选择',
prop: 'checkbox',
attrs:{
label:"我同意"
},
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
]
}
},
methods: {
onSubmit(form) {
console.log(form);
}
},
}
</script>