彈窗表單的使用,基於element-ui二次封裝
阿新 • • 發佈:2021-10-13
el-dialog-form
介紹
基於element-ui封裝的彈窗式表單元件
git地址
https://gitee.com/chenfency/el-dialog-form.git
安裝教程
- 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>