- 基于element ui的中后台表单组件,增加了的element ui的表单功能,功能强大，灵活、快捷
npm install vue-como-form
//在main.js中引入
import vueComoForm from 'vue-como-form';
import 'vue-como-form/vue-como-form.css';
Vue.use(vueComoForm);
<template>
<div class="add-form">
<vue-como-form :config="formConfig" :attr="{labelWidth:'100px'}" @submit="onSubmit" ref="addForm">
</vue-como-form>
</div>
</template>
<script>
//依赖图片处理组件
import comoImage from 'vue-como-image';
//依赖编辑器组件
export default {
name: 'add-form',
components: {},
data() {
let that = this;
return {
formConfig:[
[
{type:'select',color:'#ff0000',label:'文章类型',value:1,name:'article_category',options:[
{label:'分类一',selectvalue:1},{label:'<i class="el-icon-more-outline"></i> 测试分类',selectvalue:2}
],span:8},
{type:'input',color:'#ff0000',label:'文章标题',span:16,name:'title'},
],
{type:'textarea',label:'文章描述',attr:{rows:2},name:'article_desc'},
[
{type:'radio',label:'文章类型',value:0,name:'article_type',options:[
{label:'<span style="color:#ff0000;">普通文章</span>',radiovalue:0},{label:'视频文章',radiovalue:1}
],span:10,attr:{disabled:true}},
{type:'number',label:'浏览数量',name:'article_views',span:7},
{type:'input',label:'文章排序',span:7,name:'article_order'},
],
{type:'image',label:'轮播图片',placeholder:'请上传轮播图片',name:'article_image',attr:{
httpRequest:that.handleUploadImage,showFileList:false,action:'',accept:'image/jpeg'
}},
{type:'file',label:'附件上传',name:'article_file',attr:{
httpRequest:that.handleUploadFile}},
[{type:'autocomplete',label:'审核意见',span:12,attr:{
fetchSuggestions:that.fetchAuto
},events:{select:that.selectHandler},name:'article_examine'},
{type:'autocomplete',label:'审核意见1',span:12}],
[
{type:'checkbox',label:'文章标签',value:[1,2],options:[
{label:'<span style="color:#02c367;">新闻</span>',checkvalue:1,disabled:true},{label:'娱乐',checkvalue:2},{label:'八卦',checkvalue:3}
],span:12,name:'article_tags'},
{type:'time',label:'定时时间',span:6,name:'article_time'},
{type:'color',label:'标题颜色',span:6,name:'article_color'},
],
[
{type:'switch',label:'是否显示',value:0,span:6,name:'is_show'},
{type:'switch',label:'首页显示',value:1,name:'is_home',span:6},
{type:'datetime',label:'发布时间',name:'create_time',span:12},
],
{type:'cascader',label:'三级联动',attr:{options:[]},name:'article_category_name'},
{type:'editor',label:'文章内容',name:'content',upload:that.handleEditorUploadImage},
{type:'hidden',label:'文章ID',value:123,name:'article_id'}
]
};
},
methods:{
initialize:function() {
let that = this;
},
/**
* [onSubmit 表单提交事件]
* @author szjcomo
* @date 2020-10-21
* @param {[type]} data [description]
* @return {[type]} [description]
*/
onSubmit:function(data) {
let that = this;
console.log(data);
},
/**
* [fetchAuto 自动完成]
* @author szjcomo
* @date 2020-10-20
* @param {[type]} str [description]
* @param {Function} callback [description]
* @return {[type]} [description]
*/
fetchAuto:function(str,callback) {
let search = [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
];
callback(search);
},
/**
* [handleEditorUploadImage 编辑器图片上传事件]
* @author szjcomo
* @date 2020-10-21
* @param {[type]} files [description]
* @param {Function} callback [description]
* @return {[type]} [description]
*/
handleEditorUploadImage:function(files,callback) {
let that = this;
files.forEach(async (file) => {
let imageHandle = await comoImage.compress(file);
callback(imageHandle.content);
})
},
/**
* [handleUploadImage 图片上传功能]
* @author szjcomo
* @date 2020-10-21
* @param {[type]} params [description]
* @return {[type]} [description]
*/
handleUploadImage:async function(params) {
let that = this;
let imageHandle = await comoImage.compress(params.file);
params.data.value = imageHandle.content;
},
/**
* [handleUploadFile 执行文件上传]
* @author szjcomo
* @date 2020-10-21
* @param {[type]} params [description]
* @return {[type]} [description]
*/
handleUploadFile:async function(params) {
let that = this;
let handle = await comoImage.file2Base64(params.file);
params.data.value = handle;
}
},
//此时，已经将编译好的模板，挂载到了页面指定的容器中显示
mounted:function(){
let that = this;
that.initialize();
},
}
</script>
<style scoped>
/*pass*/
</style>
组件属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| attr | form属性 | Object | 详见 element ui 表单组件属性 |
| config | 表单item项配置 | array | 详见示例 |
config 每一项参数说明
| 参数名 | 说明 | 类型 | 是否必传 |
|---|---|---|---|
| type | 组件类型 示例上都有,其它的没有 | string | - Y |
| name | 键名称 | string | - Y |
| label | 标签名称 | string | - Y |
| span | 当config 每一项是数组时必传,否则不用传(宽度) | int | - Y |
| color | 标签颜色 (#666666) | string | - N |
| value | 值 | array/string | - N |
| attr | 各组件的具体属性,用什么组件请参考element ui组件属性 | object | - N |
组件事件
| 属性名 | 说明 | 参数 |
|---|---|---|
| submit | 用户点击提交 | function(object) |
组件方法
| 属性名 | 说明 | 参数 |
|---|---|---|
| getFormData | 获取表单数据 | - object |
2020年10月21日
- 首次完成表单组件的封装
2020年10月24日
- 修复已知的bug
2020年10月26日
- 增加下拦框、单选框、复选框的html渲染
2020年10月31日
- el-select自动占满位置