从后端到前端之Vue（六）表单组件 HTML5原生的表单和表单元素Vue组件的基础知识表单元素组件辅助工具开源

Vue.component('button-counter', {
        props:["value"],
        data: function() {
            return {
                count: 0
            }
        },
        template: `<button v-on:click="count++">
You clicked me {{ count }} times.{{value}}</button>`
    });

    new Vue({ el: '#components-demo' });

<div id="components-demo">
    <button-counter value="3"></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<select>
  <option value ="1">男</option>
  <option value ="0">女</option>
</select>

<input type="radio" checked="checked" name="Sex" value="1" />男性
<input type="radio" name="Sex" value="0" />女性

Vue.component('my-input', {
        props:["value"],
        template: `<input type="text" 
        :value="value" 
        @input="$emit('input',$event.target.value)"  
        :key="1">`
    });
var form = new Vue({ 
        el: '#components-demo',
        data:{
            formValue:{
                v1:'22'
            }
        }
    });

<div id="components-demo">
    <my-input v-model="formValue.v1"></my-input>
     {{formValue.v1}}
</div>

methods:{
            fun:function(data) {
                alert(data);
            }
        }

c1:{
    //辅助
    controlId: '150', // 编号，区别同一个表单里的其他控件
    controlType: 101, // 用类型编号表示type
    colName: '姓名', //中文名称 
    isClear: false, //isClear  连续添加时是否恢复默认值
    
    //通用
    disabled: false,  // 是否禁用
    required: true, //必填 
    pattern: '', //用正则做验证。 
    tabIndex:0, // tab 键顺序
    class:'cssTxt input_t1',
    title: '',  //提示信息

    //多行文本
    rows:5,  //行数
    cols:100, //列数

    //文本框类
    name:'',  
    value: '',  
    placeholder: '请输入姓名',  
    readonly: false, //只读  
    size: 10, // 字符宽度
    maxlength: 20, //最大字符数
    autocomplete: 'on', //off
    min: 1, // 最小值
    max: 100, // 最大值
    step: 1, // 步长
    multiple: false, //是否可以有多个值，用于上传文件
    
    listKey:'browsers', //备选文字标识
     
    //选择类和备选文字的选项
    list: [{
            "id": "1",
            "name": "北京",
            "check": false
        }
        , {
            id: '2',
            name: '上海',
            check: false
        }, {
            id: '3',
            name: '广州',
            check: false
        }
    ]
}

colName:{
        controlId: 'colName', //ColumnID
        controlType: 116,  
        class:'cssTxt input_t1',
        placeholder: '请填写标题',  
        size: 30,  
        maxlength: 50
}

 Vue.component('my-input', {
    props:["value","meta"],
    data:function(){
        return {
            type:{  //把编号变成文本的形式
            100:'textarea',         //多行文本框
            101:'text',             //单行文本框
            102:'password',         //密码
            103:'date',             //日期
            //其他略。。。。。。
            }
        }
     },
    methods:{
        //text
        textInput:function(event, meta){
            var returnValue = event.target.value;
            //添加自己的监听事件。本来想写在一起的，但是不好用，只好分开了。
            //vue的回调
            this.$emit('input',returnValue);
            
        },
        textChange:function(event, meta){
            var returnValue = event.target.value;
            //添加自己的监听事件
            this.$emit('change', returnValue,event.target, meta);  
        } 
    },
    template: `<span>
        <span v-if="meta.controlType===100">
            <!--多行文本框-->
            <textarea :id="'c'+meta.controlId" 
            :name="'c'+meta.controlId"  
            :class="meta.class" 
            :readonly="meta.readonly"
            :rows="meta.rows" 
            :cols="meta.cols" 
            @input="$emit('input',$event.target.value)"  
            @onkeyup="textChange($event,meta)"
            :placeholder="meta.placeholder"
            >
            </textarea>
        </span>
        <span v-else-if="meta.controlType>100 && meta.controlType<130 ">
            <!--文本框类-->
            <input  :id="'c'+meta.controlId" 
            :name="'c'+meta.controlId"  
            :disabled="meta.disabled"
            :class="meta.class" 
            :type="type[meta.controlType]" 
            :value="value" 
            :placeholder="meta.placeholder"
            :readonly="meta.readonly"
            :size="meta.size"
            :maxlength="meta.maxlength"
            :autocomplete="meta.autocomplete"
            :min="meta.min"
            :max="meta.max"
            :step="meta.step"
            :multiple="meta.multiple"
            :list="meta.listKey"
            :title="meta.title"
            
            @input="textInput($event,meta)"
            @change="textChange($event,meta)"
             
            :key="'ckey_'+meta.controlId">

            <!--文本框的备选项-->
            <datalist v-if="typeof(meta.listKey)!=='undefined'" :id="meta.listKey">
                <option v-for="item in meta.list" :label="item.id" :value="item.name" />
            </datalist>
        </span>
});

Vue.component('my-input', {
    props:["value","meta"],
    methods:{
        //select
        selectChange:function(event, meta){
            var returnValue = '';

            var items = event.target.selectedOptions; //选中项的集合
            var arr = [];
            for (var i=0;i<items.length;i++) {
                var item = items[i];
                arr.push(item.value);
            }
            returnValue = arr.join(',');

            //添加联动事件
            this.$emit('select', returnValue, meta.nextSelect);  
            //vue的回调
            this.$emit('input',returnValue);

            return returnValue;
        },

        //CheckBox
        checkChange: function (event) {
            var returnValue = event.target.value;

            if (this.meta.controlType === 155) {
                //复选框
                returnValue = event.target.checked;
            }
            else{
                //修改绑定情况
                var selectValue = returnValue;
                var arr = [];
                for (var key in this.meta.list) {
                    var item = this.meta.list[key];
                    if (item.id === selectValue) {
                        this.meta.list[key].check = event.target.checked;
                    }
                    if (item.check) {
                        arr.push(item.id);
                    }
                }
                returnValue = arr.join(',');
            }
            
            //调用上级的input事件
            this.$emit('input',returnValue);

            return  returnValue;
        },

        //radio
        radioChange: function (event, meta) {
            //单选
            var returnValue = '';

            var items = event.target.selectedOptions; //选中项的集合
            var arr = [];
            for (var i=0;i<items.length;i++) {
                var item = items[i];
                arr.push(item.id);
            }
            returnValue = arr.join(',');
            this.$emit('select', returnValue, meta.nextSelect);  //添加联动事件
            return returnValue;
        }
    },
    template: `<span>
        <span v-else-if="meta.controlType >= 150 && meta.controlType <= 152  ">
        <!--下拉列表框-->
            <select  :id="'c'+meta.controlId" 
            :name="'c'+meta.controlId"  
            :class="meta.class" 
            :multiple="meta.controlType === 151"
            @change="selectChange($event,meta)" 
            >
                <option :key="-2" value="-2" >请选择</option>
                <option  
                 v-for="(item,index) in meta.list" 
                 :key="index"  
                 :value="item.id" 
                 :selected="item.check">
                    {{item.name}}
                </option> 
            </select>
        </span> 

        <span v-else-if="meta.controlType === 153 ">
            <!--单选组 -->
            <label role="radio" v-for="item in meta.list" >
                <input 
                    type="radio" 
                    :class="meta.class"  
                    :checked="item.check" 
                    :name="'c'+meta.controlId" 
                    :value="item.id"
                    @input="$emit('input',$event.target.value)"  
                >
                <span>{{item.name}}</span>
            </label> 

        </span>

        <span v-else-if="meta.controlType === 154 ">
            <!--多选组-->
            <label role="checkbox" 
            v-for="item in meta.list" 
            class="checkbox_g_t" 
            :key="'lblchks'+item.id"  > 
                <input  :id="'c'+meta.controlId" 
                type="checkbox"
                :name="'c'+meta.controlId"  
                :class="meta.class" 
                :value="item.id"
                :readonly="meta.readonly"
                :key="'chks'+item.id"
                @input="checkChange($event)"
                >
                <span>{{item.name}}</span>
            </label> 

        </span> 

        <span v-else-if="meta.controlType === 155 ">
            <!--复选框-->
            <label role="checkbox" 
            v-for="item in meta.list" 
            class="checkbox_g_t" 
            :key="'lblchk'+item.id"  > 
                <input  :id="'c'+meta.controlId" 
                type="checkbox"
                :name="'c'+meta.controlId"  
                :class="meta.class" 
                :value="item.id"
                :readonly="meta.readonly"
                :key="'chk'+item.id"
                @input="checkChange($event)"
                >
                <span>{{item.name}}</span>
            </label> 
        </span>
    </span>`
});