vue-como-form

    1.0.4 • Public • Published

    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);
     
     

    组件效果

    alt 效果图

    使用示例

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

    Install

    npm i vue-como-form

    DownloadsWeekly Downloads

    7

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    310 kB

    Total Files

    6

    Last publish

    Collaborators

    • como20170606