vue+Ts+element组件封装
Posted html网页设计
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+Ts+element组件封装相关的知识，希望对你有一定的参考价值。
#Typora快捷键
#Vue 公用组件使用说明
MyForm表单
对element-ui 中 form表单的二次封装支持如下模块
下面的代码封装支持 栅格布局 -普通常规布局
<!--
* @Author: ruanjiafeng
* @Date: 2020-08-11 09:26:11
* @LastEditTime: 2020-10-13 08:41:08
* @LastEditors: Please set LastEditors
* @Description: form 表单封装
* @FilePath: \\tyt-manage-h5\\src\\components\\utils\\MyForm.vue
-->
<template>
<el-form
:ref="refName"
:size="size"
:inline="inline"
:label-width="labelWidth"
:model="formData"
:rules="myFormRules"
:label-position="labelPosition"
:class="myFormClass"
>
<!-- --------------------自定义行布局------------------- -->
<!-- (xs <768px) (sm ≥768px) (md ≥992px ) (lg ≥1200px) (xl ≥1920px)-->
<template v-if="customStyle">
<template v-for="(formCfgItem, index) in formCfg">
<el-row :key="index">
<template v-for="(item, index) in formCfgItem">
<el-col
:key="index"
:xs="customCol[0] || null"
:sm="customCol[1] || null"
:md="customCol[2] || null"
:lg="customCol[3] || null"
:xl="customCol[4] || null"
>
<el-form-item
v-if="!item.hide"
:label="item.label"
:style="item.style"
:label-width="item.labelWidth"
:prop="getProp(item, index)"
:key="item.prop"
:class="getFormItemClass(item)"
>
<!-- 如果是myFormDialog自定义-并且设isFormDialog:true-->
<template v-if="item.type === custom">
<slot :name="item.prop" :item="item"></slot>
</template>
<!-- 渲染自定义标题:标签 -->
<!-- 释:
customLabel: 销售价：<br/>(最低建议销售价), type: custom, prop: 表单所定义的prop,
-->
<template v-if="item.customLabel || item.labelFormatter">
<slot slot="label">
<div
class="custom_label"
v-html="getCustomLabel(item)"
></div>
</slot>
</template>
<!-- 如果不是type:title 标题 -->
<template v-if="item.type != title && item.type !== custom">
<!-- 输入框 -->
<el-input
v-if="item.type === input || item.type === password"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
:type="item.inputType"
:maxlength="item.maxlength"
:style=" width: item.width "
:placeholder="getInputPlaceholder(item.placeholder)"
></el-input>
<!-- 文本域 -->
<el-input
v-else-if="item.type === textarea"
type="textarea"
:disabled="item.disabled"
@change="item.change && item.change(formData[item.prop])"
:placeholder="getInputPlaceholder(item.placeholder)"
:maxlength="item.maxlength"
:show-word-limit="item.maxlength ? true : false"
:autosize="getTextareaAutosize(item)"
v-model="formData[item.prop]"
:style=" width: item.width "
></el-input>
<!-- 下拉框 -->
<el-select
v-else-if="item.type === select"
v-model="formData[item.prop]"
:style=" width: item.width ? item.width : 100% "
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
:placeholder="getSelectPlaceholder(item.placeholder)"
>
<!-- 下拉框option选项 -->
<el-option
v-for="(op, opIndex) in item.options"
:label="item.valueMap ? op[item.valueMap[1]] : op.value"
:value="item.valueMap ? op[item.valueMap[0]] : op.key"
:key="
item.valueMap + opIndex
? op[item.valueMap[0]] + opIndex
: op.key + opIndex
"
></el-option>
</el-select>
<!-- 单选 -->
<el-radio-group
v-else-if="item.type === radio"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
>
<el-radio
v-for="ra in item.radios"
:label="item.valueMap ? ra[item.valueMap[1]] : ra.value"
:key="item.valueMap ? ra[item.valueMap[0]] : ra.key"
>
item.valueMap ? ra[item.valueMap[1]] : ra.value
</el-radio>
</el-radio-group>
<!-- 单选按钮 -->
<el-radio-group
v-else-if="item.type === radioButton"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
>
<el-radio-button
v-for="ra in item.radios"
:label="item.valueMap ? ra[item.valueMap[1]] : ra.value"
:key="item.valueMap ? ra[item.valueMap[0]] : ra.key"
>
item.valueMap ? ra[item.valueMap[1]] : ra.value
</el-radio-button>
</el-radio-group>
<!-- 复选框 -->
<el-checkbox-group
v-else-if="item.type === checkbox"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
>
<el-checkbox
v-for="ch in item.checkboxs"
:label="item.valueMap ? ch[item.valueMap[0]] : ch.key"
:key="item.valueMap ? ch[item.valueMap[0]] : ch.key"
:border="item.border"
>
item.valueMap ? ch[item.valueMap[1]] : ch.value
</el-checkbox
>
</el-checkbox-group>
<!-- 日期 -->
<el-date-picker
v-else-if="item.type === date"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
></el-date-picker>
<!-- 时间 -->
<el-time-select
v-else-if="item.type === time"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
>
</el-time-select>
<!-- 日期时间 -->
<el-date-picker
v-else-if="item.type === datetime"
type="datetime"
v-model="formData[item.prop]"
:prop="item.prop[0]"
@change="item.change && item.change(formData[item.prop])"
:placeholder="
item.placeholder ? item.placeholder[0] : 开始时间
"
:disabled="item.disabled"
></el-date-picker>
<!-- 日期区间 -格式显示为:2020-02-05 12:20:35 返回时间戳:1598404858000格式-->
<template v-else-if="item.type === datetimerange">
<el-col :span="11">
<el-form-item
class="mr0"
:picker-options="
dateConfig ? dateConfig.pickerOptionsStart : null
"
:prop="item.prop[0]"
>
<el-date-picker
style="width:"
type="datetime"
v-model="formData[item.prop[0]]"
@change="
datetimerangeValue =>
datetimerangeChange(item, datetimerangeValue, 0)
"
:placeholder="
item.placeholder ? item.placeholder[0] : 开始时间
"
:disabled="item.disabled"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="1"
><span class="yzf_telephone_line">-</span></el-col
>
<el-col :span="12">
<el-form-item :prop="item.prop[1]">
<el-date-picker
:picker-options="
dateConfig ? dateConfig.pickerOptionsEnd : null
"
style="width:"
type="datetime"
v-model="formData[item.prop[1]]"
@change="
datetimerangeValue =>
datetimerangeChange(item, datetimerangeValue, 1)
"
:placeholder="
item.placeholder ? item.placeholder[1] : 结束时间
"
:disabled="item.disabled"
></el-date-picker>
</el-form-item>
</el-col>
</template>
<!-- 日期区间 -格式显示: 2020-02-05 -->
<template v-else-if="item.type === ordinaryDate">
<el-col :span="11">
<el-form-item
class="mr0"
:picker-options="
dateConfig ? dateConfig.pickerOptionsStart : null
"
:prop="item.prop[0]"
>
<el-date-picker
style="width:"
v-model="formData[item.prop[0]]"
@change="
ordinaryValue =>
ordinaryDateChange(item, ordinaryValue, 0)
"
:placeholder="
item.placeholder ? item.placeholder[0] : 开始时间
"
:disabled="item.disabled"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="1"
><span class="yzf_telephone_line">-</span></el-col
>
<el-col :span="12">
<el-form-item :prop="item.prop[1]">
<el-date-picker
:picker-options="
dateConfig ? dateConfig.pickerOptionsEnd : null
"
style="width:"
v-model="formData[item.prop[1]]"
@change="
ordinaryValue =>
ordinaryDateChange(item, ordinaryValue, 1)
"
:placeholder="
item.placeholder ? item.placeholder[1] : 结束时间
"
:disabled="item.disabled"
></el-date-picker>
</el-form-item>
</el-col>
</template>
<!-- 滑块 -->
<!-- <el-slider v-if="item.type===Slider" v-model="editData[item.prop]"></el-slider> -->
<!-- 开关 -->
<el-switch
v-else-if="item.type === switch"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
>
</el-switch>
<!-- 级联选择器 -->
<el-cascader
v-else-if="item.type === cascader"
v-model="formData[item.prop]"
style="width:"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
:props="item.props"
:show-all-levels="item.showAllLevels"
:options="item.options"
>
</el-cascader>
<!-- 自定义插槽 -->
<template v-else-if="item.type === custom">
<slot :name="item.prop" :data="formData"></slot>
</template>
<!-- 图片上传 -->
<template v-else-if="item.type === uploadImage">
<div
class="yzf_image_box"
v-for="(listItem, listIndex) in formData[item.prop[0]]"
:key="listIndex"
>
<el-image
fit="cover"
class="yzf_image_item"
:src="ImageTool.getSmallImg(listItem[item.imageName])"
>
<div slot="error" class="el-image__error">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div
class="yzf_image_item_dlt"
@click="deleteImage(item, listItem, listIndex)"
>
删除
</div>
</div>
<el-upload
v-if="
formData[item.prop[0]].length >= item.limit
? false
: true
"
class="yzf_upload"
:multiple="item.limit > 1 ? true : false"
:limit="item.limit"
:ref="getUploadImageRef(index)"
:headers="uploadImageHead"
:action="item.action"
accept="image/gif, image/jpeg, image/jpg, image/png"
:show-file-list="false"
:file-list="formData[item.prop[0]]"
:on-exceed="
(files, fileList) =>
handleExceed(item, files, fileList);
"
:http-request="
file =>
uploadImageHttpRequest(item, file);
"
>
<div slot="trigger">
新增图片相册<br /> "(暂定最多" + item.limit + "张)"
</div>
</el-upload>
</template>
<!-- 电话号码 -->
<template v-else-if="item.type === telephone">
<el-col :span="5">
<el-form-item :prop="item.prop[0]">
<el-input
v-model="formData[item.prop[0]]"
@change="telephoneChange(item)"
maxlength="4"
:disabled="item.disabled"
placeholder="区号"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="1"
><span class="yzf_telephone_line">-</span></el-col
>
<el-col :span="18">
<el-form-item :prop="item.prop[1]">
<el-input
v-model="formData[item.prop[1]]"
@change="telephoneChange(item)"
:maxlength="8"
:disabled="item.disabled"
placeholder="电话号"
>
</el-input>
</el-form-item>
</el-col>
</template>
<!-- 按钮 -->
<template v-else-if="item.type === button">
<el-row :gutter="20">
<template v-for="(action, index) in formAction">
<el-button
:disabled="btLoading"
v-waves
v-if="!getAtionFormatter(action).hide"
:style="action.style"
:type="action.type || null"
@click="actionButtonClick(action)"
:key="index"
>
<i v-if="action.icon" :class="action.icon"></i>
getAtionFormatter(action).label
</el-button>
</template>
</el-row>
</template>
</template>
</el-form-item>
</el-col>
</template>
</el-row>
</template>
</template>
<!-- --------------------普通布局------------------- -->
<template v-if="!customStyle">
<template v-for="(item, index) in formCfg">
<el-form-item
v-if="!item.hide"
:label="item.label"
:style="customStyle ? `$getWidth(item) $item.style ` : item.style"
:label-width="item.labelWidth"
:prop="getProp(item, index)"
:key="item.type + index"
:class="getFormItemClass(item)"
>
<!-- 作用域插槽 -->
<!--
例子:
<template slot-scope="scope" slot=tempMerchantNo>
<el-input v-model="mySearchFormInfo.searchFormInline.tempMerchantNo" placeholder="请输入内容"></el-input>
</template>
label: 临时商商户编号:,
type: custom,
prop: tempMerchantNo,
placeholder: 请输入临时商商户编号,
,
-->
<!-- 如果是myFormDialog自定义-并且设isFormDialog:true-->
<template v-if="item.type === custom">
<slot :name="item.prop" :item="item"></slot>
</template>
<!-- 渲染自定义标题:标签 -->
<!-- 释:
customLabel: 销售价：<br/>(最低建议销售价), type: custom, prop: 表单所定义的prop,
-->
<template v-if="item.customLabel || item.labelFormatter">
<slot slot="label">
<div class="custom_label" v-html="getCustomLabel(item)"></div>
</slot>
</template>
<!-- 如果不是type:title 标题 -->
<template v-if="item.type != title && item.type !== custom">
<!-- 输入框 -->
<el-input
v-if="item.type === input || item.type === password"
v-model="formData[item.prop]"
@change="item.change && item.change(formData[item.prop])"
:disabled="item.disabled"
:type="item.inputType"
:maxlength="item.maxlength"
:style=" width: item.width "
:placeholder="getInputPlaceholder(item.placeholder)"
></el-input>
<!-- 文本域 -->
<el-input
v-else-if="item.type === textarea"
type="textarea"
:disabled="item.disabled"
@change="item.change && item.change(formData[item.prop])"
:placeholder="getInputPlaceholder(item.placeholder)"
:maxlength=以上是关于vue+Ts+element组件封装的主要内容，如果未能解决你的问题，请参考以下文章vue3.0+ts+element-plus多页签应用模板：如何优雅地使用Svg图标