vue-como-form

• 基于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自动占满位置