响应式网站 cms,北京网站建设最新消息,品牌推广公司简介,东莞哪家做网站很有名的公司“vue”: “^2.7.13” “element-ui”: “^2.15.7” 代码地址
【说明】 该组件时使用vue3#xff08;vue2.7#xff09;语法封装#xff0c;使用时可用vue2语法使用也可以使用vue3语法使用
一、vue2语法使用案例
基础用法
templatediv classform-demo… “vue”: “^2.7.13” “element-ui”: “^2.15.7” 代码地址
【说明】 该组件时使用vue3vue2.7语法封装使用时可用vue2语法使用也可以使用vue3语法使用
一、vue2语法使用案例
基础用法
templatediv classform-demodiv classformBasicForm:schemasschemas:colProps{span: 12}:showActionButtonGroupfalseregisterregisterchangehandleChange//divdiv classbtnsel-button typeprimary clicksaveForm保存/el-buttonel-button clickresetForm重置/el-button/div/div
/templatescriptexport default {name: BasicFormDemo,data() {return {schemas: [{prop: id,component: Input,show: false // 显示隐藏},{prop: username,component: Input,label: 姓名,labelWidth: 100px,defaultValue: 张三, // 默认值colProps: {span: 8},required: true},{prop: address,component: Input,label: 地址,labelWidth: 100px,defaultValue: 1, // 默认值componentProps: {maxlength: 10,showWordLimit: true},colProps: {span: 8}},{prop: rate,component: Input,label: 税率,labelWidth: 100px,componentProps: {append: %},colProps: {span: 8}},{prop: url,component: Input,label: 网址,labelWidth: 100px,componentProps: {prepend: http},colProps: {span: 8}},{prop: inputNumber,component: InputNumber,label: 距离,labelWidth: 100px,defaultValue: 1 // 默认值},{prop: age,component: Switch,label: 年龄,labelWidth: 100px,defaultValue: true // 默认值},{prop: remark,component: Input,label: 评论,labelWidth: 100px,componentProps: {type: textarea,placeholder: 请输入评论}},{prop: divider,component: Divider,labelWidth: 0px,componentProps: {contentPosition: left,content: 日期类型组件}},{prop: time1,component: TimePicker,label: 时间选择器},{prop: time2,component: TimePicker,label: 时间选择器,componentProps: {isRange: true,rangeSeparator: 至,startPlaceholder: 开始时间,endPlaceholder: 结束时间,placeholder: 选择时间范围}},{prop: createDate,component: DatePicker,label: 创建日期,componentProps: {}},{prop: endDate,component: DatePicker,label: 带快捷选项,componentProps: {valueFormat: yyyy-MM-dd,pickerOptions: {disabledDate(time) {return time.getTime() Date.now()},shortcuts: [{text: 今天,onClick(picker) {picker.$emit(pick, new Date())}},{text: 昨天,onClick(picker) {const date new Date()date.setTime(date.getTime() - 3600 * 1000 * 24)picker.$emit(pick, date)}},{text: 一周前,onClick(picker) {const date new Date()date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)picker.$emit(pick, date)}}]}}},{prop: weekly,component: DatePicker,label: 周,componentProps: {type: week,format: yyyy 第 WW 周,placeholder: 请选择周}},{prop: dateRange,component: DatePicker,label: 日期范围,componentProps: {type: daterange,rangeSeparator: 至,startPlaceholder: 开始日期,endPlaceholder: 结束日期}},{prop: dateRange1,component: DatePicker,label: 日期范围-带快捷选项,labelWidth: 140px,componentProps: {type: daterange,align: right,unlinkPanels: true,rangeSeparator: 至,startPlaceholder: 开始日期,endPlaceholder: 结束日期,pickerOptions: {shortcuts: [{text: 最近一周,onClick(picker) {const end new Date()const start new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)picker.$emit(pick, [start, end])}},{text: 最近一个月,onClick(picker) {const end new Date()const start new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)picker.$emit(pick, [start, end])}},{text: 最近三个月,onClick(picker) {const end new Date()const start new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)picker.$emit(pick, [start, end])}}]}}},{prop: monthRange,component: DatePicker,label: 月份范围,componentProps: {type: monthrange,rangeSeparator: 至,startPlaceholder: 开始月份,endPlaceholder: 结束月份}},{prop: monthRange1,component: DatePicker,label: 月份范围-带选项,labelWidth: 130px,componentProps: {type: monthrange,align: right,unlinkPanels: true,rangeSeparator: 至,startPlaceholder: 开始月份,endPlaceholder: 结束月份,pickerOptions: {shortcuts: [{text: 本月,onClick(picker) {picker.$emit(pick, [new Date(), new Date()])}},{text: 今年至今,onClick(picker) {const end new Date()const start new Date(new Date().getFullYear(), 0)picker.$emit(pick, [start, end])}},{text: 最近六个月,onClick(picker) {const end new Date()const start new Date()start.setMonth(start.getMonth() - 6)picker.$emit(pick, [start, end])}}]}}},{prop: DateTimePicker,component: DatePicker,label: 日期时间选择器,labelWidth: 110px,componentProps: {type: datetime}},{prop: divider,component: Divider,labelWidth: 0px,componentProps: {contentPosition: left,content: 单选框}},{prop: radio,component: RadioGroup,label: 单选框,defaultValue: 2,colProps: { span: 12 },componentProps: {options: [{label: 1,value: 选项1},{label: 2,value: 选项2},{label: 3,value: 选项3,border: true},{label: 4,value: 选项4,disabled: true}]}},{prop: divider,component: Divider,labelWidth: 0px,componentProps: {contentPosition: left,content: 复选框}},{prop: checkbox,component: CheckboxGroup,label: 复选框,defaultValue: [2],colProps: { span: 12 },componentProps: {options: [{label: 1,value: 选项1},{label: 2,value: 选项2},{label: 3,value: 选项3,border: true},{label: 4,value: 选项4,disabled: true}]}},{prop: selectAll,component: SelectAll,label: 全选,colProps: { span: 12 },defaultValue: [2],componentProps: {options: [{label: 1,value: 选项1},{label: 2,value: 选项2}]}},{prop: divider,component: Divider,labelWidth: 0px,componentProps: {contentPosition: left,content: 下拉框}},{prop: select,component: Select,label: 下拉框,defaultValue: 2,componentProps: {options: [{label: 选项1,value: 1},{label: 选项2,value: 2,disabled: true}]}},{prop: select1,component: Select,label: 多选,componentProps: {multiple: true,placeholder: 请选择,options: [{unitName: 选项1,id: 1},{unitName: 选项2,id: 2,disabled: true}],fieldNames: {label: unitName,value: id}}},{prop: select11,component: ApiSelect,label: 远程下拉框,componentProps: {api: () this.getOpt(),resultField: result,fieldNames: {label: unitName,value: id}}},{prop: ApiTreeSelect,component: ApiTreeSelect,label: 树下拉框,componentProps: {api: () this.getTreeData(),resultField: result,fieldNames: {label: name}}},{prop: divider1,component: Divider,labelWidth: 0px,componentProps: {contentPosition: left,content: 级联选择器}},{prop: Cascader,component: Cascader,label: 基本用法,componentProps: {options: [{value: zhinan,label: 指南,children: [{value: shejiyuanze,label: 设计原则,children: [{value: yizhi,label: 一致},{value: fankui,label: 反馈},{value: xiaolv,label: 效率},{value: kekong,label: 可控}]},{value: daohang,label: 导航,children: [{value: cexiangdaohang,label: 侧向导航},{value: dingbudaohang,label: 顶部导航}]}]},{value: zujian,label: 组件,children: [{value: basic,label: Basic,children: [{value: layout,label: Layout 布局},{value: color,label: Color 色彩},{value: typography,label: Typography 字体},{value: icon,label: Icon 图标},{value: button,label: Button 按钮}]},{value: form,label: Form,children: [{value: radio,label: Radio 单选框},{value: checkbox,label: Checkbox 多选框},{value: input,label: Input 输入框},{value: input-number,label: InputNumber 计数器},{value: select,label: Select 选择器},{value: cascader,label: Cascader 级联选择器},{value: switch,label: Switch 开关},{value: slider,label: Slider 滑块},{value: time-picker,label: TimePicker 时间选择器},{value: date-picker,label: DatePicker 日期选择器},{value: datetime-picker,label: DateTimePicker 日期时间选择器},{value: upload,label: Upload 上传},{value: rate,label: Rate 评分},{value: form,label: Form 表单}]},{value: data,label: Data,children: [{value: table,label: Table 表格},{value: tag,label: Tag 标签},{value: progress,label: Progress 进度条},{value: tree,label: Tree 树形控件},{value: pagination,label: Pagination 分页},{value: badge,label: Badge 标记}]},{value: notice,label: Notice,children: [{value: alert,label: Alert 警告},{value: loading,label: Loading 加载},{value: message,label: Message 消息提示},{value: message-box,label: MessageBox 弹框},{value: notification,label: Notification 通知}]},{value: navigation,label: Navigation,children: [{value: menu,label: NavMenu 导航菜单},{value: tabs,label: Tabs 标签页},{value: breadcrumb,label: Breadcrumb 面包屑},{value: dropdown,label: Dropdown 下拉菜单},{value: steps,label: Steps 步骤条}]},{value: others,label: Others,children: [{value: dialog,label: Dialog 对话框},{value: tooltip,label: Tooltip 文字提示},{value: popover,label: Popover 弹出框},{value: card,label: Card 卡片},{value: carousel,label: Carousel 走马灯},{value: collapse,label: Collapse 折叠面板}]}]},{value: ziyuan,label: 资源,children: [{value: axure,label: Axure Components},{value: sketch,label: Sketch Templates},{value: jiaohu,label: 组件交互文档}]}]}},{prop: Cascader2,component: Cascader,label: 多选,componentProps: {props: { multiple: true },options: [{value: zhinan,label: 指南,children: [{value: shejiyuanze,label: 设计原则,children: [{value: yizhi,label: 一致},{value: fankui,label: 反馈},{value: xiaolv,label: 效率},{value: kekong,label: 可控}]},{value: daohang,label: 导航,children: [{value: cexiangdaohang,label: 侧向导航},{value: dingbudaohang,label: 顶部导航}]}]},{value: zujian,label: 组件,children: [{value: basic,label: Basic,children: [{value: layout,label: Layout 布局},{value: color,label: Color 色彩},{value: typography,label: Typography 字体},{value: icon,label: Icon 图标},{value: button,label: Button 按钮}]},{value: form,label: Form,children: [{value: radio,label: Radio 单选框},{value: checkbox,label: Checkbox 多选框},{value: input,label: Input 输入框},{value: input-number,label: InputNumber 计数器},{value: select,label: Select 选择器},{value: cascader,label: Cascader 级联选择器},{value: switch,label: Switch 开关},{value: slider,label: Slider 滑块},{value: time-picker,label: TimePicker 时间选择器},{value: date-picker,label: DatePicker 日期选择器},{value: datetime-picker,label: DateTimePicker 日期时间选择器},{value: upload,label: Upload 上传},{value: rate,label: Rate 评分},{value: form,label: Form 表单}]},{value: data,label: Data,children: [{value: table,label: Table 表格},{value: tag,label: Tag 标签},{value: progress,label: Progress 进度条},{value: tree,label: Tree 树形控件},{value: pagination,label: Pagination 分页},{value: badge,label: Badge 标记}]},{value: notice,label: Notice,children: [{value: alert,label: Alert 警告},{value: loading,label: Loading 加载},{value: message,label: Message 消息提示},{value: message-box,label: MessageBox 弹框},{value: notification,label: Notification 通知}]},{value: navigation,label: Navigation,children: [{value: menu,label: NavMenu 导航菜单},{value: tabs,label: Tabs 标签页},{value: breadcrumb,label: Breadcrumb 面包屑},{value: dropdown,label: Dropdown 下拉菜单},{value: steps,label: Steps 步骤条}]},{value: others,label: Others,children: [{value: dialog,label: Dialog 对话框},{value: tooltip,label: Tooltip 文字提示},{value: popover,label: Popover 弹出框},{value: card,label: Card 卡片},{value: carousel,label: Carousel 走马灯},{value: collapse,label: Collapse 折叠面板}]}]},{value: ziyuan,label: 资源,children: [{value: axure,label: Axure Components},{value: sketch,label: Sketch Templates},{value: jiaohu,label: 组件交互文档}]}]}},{prop: field3,component: Cascader,label: 可搜索,componentProps: {filterable: true,props: { label: unitName, value: id },options: [{unitName: 神印王座,id: 1,children: [{unitName: 龙皓晨,id: 11},{unitName: 圣彩儿,id: 12}]},{unitName: 吞噬星空,id: 2},{unitName: 天行九歌,id: 3}]}},{prop: field3,component: ApiCascader,label: ApiCascader,componentProps: {filterable: true,props: { label: unitName, value: id },api: () this.getCascaderOpt()}},{prop: field4,component: Divider,labelWidth: 0px,componentProps: {contentPosition: left,content: 上传}},{prop: field4,component: Upload,label: 上传附件,componentProps: {action: https://httpbin.org/post}}],formAction: {}}},methods: {register(e) {this.formAction econsole.log(e, e)},handleChange(e) {console.log(handleChange, e)},saveForm() {this.formAction.validate()console.log(t, this.formAction.getFieldValues())},resetForm() {this.formAction.clearValidate()},getOpt() {return new Promise(resolve {const result {result: [{id: 选项1,unitName: 黄金糕},{id: 选项2,unitName: 双皮奶},{id: 选项3,unitName: 蚵仔煎},{id: 选项4,unitName: 龙须面},{id: 选项5,unitName: 北京烤鸭},{id: 选项6,unitName: 冰激淋},{id: 7,unitName: 榴莲千层},{id: 8,unitName: 煎饼},{id: 9,unitName: 手抓饼}]}resolve(result)})},getTreeData() {return Promise.resolve([{id: 118808,parentId: null,name: 新疆,children: [{id: 118809,parentId: 118808,name: 巴州乐禾,children: [{id: 118817,parentId: 118809,name: 采购部},{id: 118818,parentId: 118809,name: 销售部},{id: 118824,parentId: 118809,name: 运营部},{id: 111824,parentId: 113809,name: 研发部},{id: 118814,parentId: 118829,name: 市场部}]}]},{id: 118809,parentId: null,name: 广东,children: [{id: 118879,parentId: 118801,name: 广州}]}])},getCascaderOpt() {return Promise.resolve([{unitName: 神印王座,id: 1,children: [{unitName: 龙皓晨,id: 11},{unitName: 圣彩儿,id: 12}]},{unitName: 吞噬星空,id: 2},{unitName: 天行九歌,id: 3}])}}}
/script
style langscss.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
/style可折叠表单
templatediv classform-demodiv classformBasicForm:schemasschemas:colProps{span: 12}registerregisterchangehandleChange//div/div
/templatescriptexport default {name: BasicFormDemo,data() {return {schemas: [{prop: username,component: Input,label: 姓名},{prop: address,component: Input,label: 地址},{prop: rate,component: Input,label: 税率,componentProps: {append: %}}],formAction: {}}},methods: {register(e) {this.formAction econsole.log(formAction, e)},handleChange(e) {console.log(handleChange, e)}}}
/script
style langscss.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
/style设置表单表项值
templatediv classform-demodiv classformBasicForm:schemasschemas:colProps{span: 12}:showActionButtonGroupfalseregisterregisterchangehandleChange//divdiv classbtnsel-button typeprimary clicksetFormData设置值/el-buttonel-button typeprimary clickupdateSchema更新表单项配置项/el-buttonel-button typeprimary clickinsetSchema插入表单项/el-buttonel-button typeprimary clickremoveSchemaByFiled删除表单项/el-buttonel-button typeprimary clickresetSchemas重置表单/el-button/div/div
/templatescriptexport default {name: BasicFormDemo,data() {return {schemas: [{prop: username,component: Input,label: 姓名},{prop: address,component: Input,label: 地址},{prop: rate,component: Input,label: 税率,componentProps: {append: %}}],formAction: {}}},methods: {register(e) {this.formAction econsole.log(formAction, e)},handleChange(e) {console.log(handleChange, e)},setFormData() {// 调用 setFieldValues 方法可设置表单项值, 返回值是更新之后表单的值const data this.formAction.setFieldValues({ username: 李四 })console.log(data, data)},updateSchema() {this.formAction.updateSchema({prop: rate,component: Input,label: 税率,componentProps: {placeholder: 请输入税率}})},insetSchema() {this.formAction.insetSchema(rate, {prop: rate1,component: Input,label: 新增,componentProps: {placeholder: 请输入}})},removeSchemaByFiled() {this.formAction.removeSchemaByFiled(address)},resetSchemas() {this.formAction.resetSchemas()}}}
/script
style langscss.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
/style使用插槽 slots
templatediv classform-demodiv classformBasicForm :schemasschemas :colProps{span: 24}template #usernamespanusername slot/span/templatetemplate #submitBeforesubmit 左侧插槽/template/BasicForm/div/div
/templatescriptexport default {name: BasicFormDemo,data() {return {schemas: [{prop: username,component: Input,label: 姓名,slots: username},{prop: address,component: Input,label: 地址},{prop: rate,component: Input,label: 税率,componentProps: {append: %}}]}}}
/script
style langscss.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
/style二、vue3语法使用
templateBasicFormregisterregistersubmithandleSubmitresethandleSubmitchangehandleChange/
/templatescript setup
const [register, { updateSchema, getFieldValues, setFieldValues }] useForm({schemas: [{prop: orgUnitId,component: ApiSelect,label: label1,componentProps: {api: $api.getOrgUnitByUserId,fieldNames: { label: departmentName, value: id },resultField: result},required: true},{prop: projectId,component: Select,label: label2,required: true},],labelWidth: 110px
})
/scriptForm Attributes
参数说明类型可选值默认值colonlabel 是否显示冒号boolean—显示schemas必填表单配置项具体 看下表array——colProps表单项栅格布局具体看下表objeact——labelWidthlabel 宽度string—‘100px’labelPosition表单域标签的位置如果值为 left 或者 right 时则需要设置 label-widthstring—rightshowActionButtonGroup是否显示操作按钮boolean—trueshowSearchBtn是否显示查询按钮boolean—trueshowResetBtn是否显示清空按钮Boolean—truesearchText查询按钮文本string—‘查询’resetText清空按钮文本string—清空isFlex是否开启自适应布局boolean—trueformSize尺寸不同的lebel设置不同的尺寸以适应屏幕, 设置此属性必须设置isFlex为trueboolean—truemodel表单数据对象object——isEnterSearch是否按下回车查询boolean—trueformItemMb表单项的 margin-bottomString—‘16px’
Schemas Attributes
参数说明类型可选值默认值colonlabel 是否显示冒号boolean——trueprop必填字段名称, 唯一string————component必填输入框类型,stringInput、InputNumber 、TimePicker、DatePicker、Switch、RadioGroup、CheckboxGroup、SelectAll、Select、ApiSelect、ApiTreeSelect、Cascader、ApiCascader、Upload、Divider——label标签文本string————label-width表单域标签的的宽度string——’100px‘required是否必填boolean——falseshow表单项显示隐藏boolean——falsecomponentProps可设置组件属性element 组件的属性具体可查看 element 组件文档如禁用输入框componentProps{disabled: true}object——{}defaultValue输入框默认值any————colProps表单项栅格布局具体看下表object————rules表单验证规则array————disabled是否禁用, 如此处设置表单禁用无需在 componentProps 中设置false————slots表单项插槽string————renderContent渲染内容, 需要返回渲染函数否则会报错Function————formItemMb表单项的 margin-bottomString——‘16px’
colProps Attributes
参数说明类型可选值默认值span栅格占据的列数number——8xs768px 响应式栅格数或者栅格属性对象number————sm≥768px 响应式栅格数或者栅格属性对象number————md≥992px 响应式栅格数或者栅格属性对象number————lg≥1200px 响应式栅格数或者栅格属性对象number————xl≥1920px 响应式栅格数或者栅格属性对象number————
Events
事件名称说明回调参数change值改变时触发InputNumber 类型输入如果设置默认值, 初始时会触发一次 change 事件e: anyregister注册 BasicForm 组件实例, 获取实例上的方法e: object
Slots
name说明submitBeforesubmit btn 左侧插槽resetBeforereset btn 左侧插槽resetAfterreset btn 右侧插槽moreAfter更多 右侧插槽
Methods
⚠️ 该组件二次封装后需注册 register事件, 获取实例方法, 并且需要保存到当前组件实例中
方法名说明参数validate校验—clearValidate清空表单校验—reset清空表单校验, 清空输入框值—getFieldValues获取表单的值—setFieldValues设置表单的值, 返回值是更新之后表单的值objectupdateSchema更新表单配置项, prop 必须存在 schemas 中, 不存在则更新失败—insetSchema插入表单项field, schemaremoveSchemaByFiled删除表单项fieldresetSchemas重置配置项, 恢复初始值—
