1.0.6 • Published 3 years ago
lform v1.0.6
安装
npm i lform
main.js中使用
// 全局注册组件
import LForm from 'lform'
Vue.use(LForm)
# 页面中使用
<lform
title="编辑"
ref="LWForm"
:LWFormData="LWFormData"
:LWFormList="LWFormList"
:rules="rules"
:searchOpera="searchOpera"
:showDialog="showDialog"
:isBtn="isBtn"
></lform>
# 参数描述
// 下拉数据
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
// 是否显示提示弹窗
showDialog: false,
// 是否显示操作按钮
isBtn:true,
// 校验规则
rules: {
name: [
{ required: true, message: "请输入贡献值名称", trigger: "blur" },
{ min:5, max: 20, message: "长度在5-20个字符以内", trigger: "blur" },
],
steep: [
{ required: true, message: "请选择贡献值分值", trigger: "change" },
],
role: [
{
type: "array",
required: true,
message: "请至少选择一个角色",
trigger: "change",
},
],
desc: [
{ required: true, message: "请填写贡献值描述", trigger: "blur" },
],
},
// 表单数据
LWFormData: {
name: "",
desc: "",
steep: 1,
role: [],
},
// 循环遍历
LWFormList: [
{
# 关联表单校验
prop: "name",
# 标签名称
label: "贡献值名称",
# 类型
type: "input",
# 参数value值
value: "",
#是否禁用
Lwdisabled:true
},
{
prop: "desc",
label: "贡献值描述",
type: "textvalue",
value: "",
rules: ["required"],
},
{ prop: "steep", value: "", label: "贡献值分值", type: "steep" },
{
prop: "role",
label: "贡献值使用角色",
type: "checkbox",
value: [],
options: [
{ label: "专家志愿者", value: 1 },
{ label: "医护志愿者", value: 2 },
{ label: "社会志愿者", value: 2 },
],
},
],
//按钮
searchOpera: [
{
label: "取消",
type: "info",
size: "small",
clickEvent: this.Btncance,
},
{ label: "保存", type: "primary",param:2, size: "small", clickEvent: this.editClick },
],