ijijin-view(Vue)

表单组件

涉及到表单输入的相关组件，本UI库采用了以下两个组件（输入框、选择器）。

输入框

1.调用方式

按需引用Input组件

    import Input from 'ijijin-view/vue/Input'

如

    <template>
        <div>
            <v-input 
                :border="false"
                :clearable="true"
                className="u-input"
                v-model="value"
                placeholder="输入框"
            />
        </div>
    </template>
    <script>
        import Input from 'ijijin-view/vue/Input'

        export default {
            data () {
                return {
                    value: ''
                }
            },

            components: {
                'v-input': Input
            }
        }
    </script>

2.API

参数 类型 默认值 说明
readonly Boolean false 是否只读（可选）
clearable Boolean false 是否带有清除功能（可选）
className String/Array '' 给input标签添加class，多用于设置样式（可选）
type String 'text' input类型（可选）
border Boolean true 是否显示边框（可选）
value String/Number '' value类型（可选）

添加事件

事件 说明
focus 获得焦点事件
blur 失去焦点事件
input 输入值修改事件
keypress 键盘敲入事件（PC）

事件demo

    <template>
        <div>
            <v-input 
                clearable="true"
                v-model="value"
                placeholder="事件输入框"
                @focus="eventShow('focus')"
                @blur="eventShow('blur')"
                @input="eventShow('input')"
            />
        </div>
    </template>
    <script>
        import Input from 'ijijin-view/vue/Input'

        export default {
            data () {
                return {
                    value: ''
                }
            },
            methods: {
                eventShow (type) {
                    this.$toast.show('触发事件： ' + type);
                }
            },
            components: {
                'v-input': Input
            }
        }
    </script>

选择器

单个选择器

1. 调用方式

    import Picker from 'ijijin-view/vue/Picker'

如

	<template>
		<picker v-model="pickerValue" @change="changePicker" :data="pickerData"></picker>
	</template>
	<script>
		import Picker from 'ijijin-view/vue/Picker'
	    export default {
        data() {
            return {
	            pickerValue: 0,
	           pickerData: ['西瓜', '苹果', '猕猴桃', '梨', '桂圆'],
            }
        },
        methods: {
            changePicker(data) {
			    // data格式
			    // {
				//     value:data[value], 当选项的值 
				//     index:value  当前项的索引
				// }
                console.log(data)
            },
        },
        components: {
            Picker
        }
    }

	</script>

2.API

参数 类型 默认值 说明 格式（例）
value Number 必选 当前选择项的索引
data Array 必选 数据数组 ['西瓜', '苹果', '猕猴桃', '梨', '桂圆']
showNum Number 5 显示选择项的数量
height Number 40（px） 每个选择项的高度
columnIndex Number 选填 多个选择器时，当前选择器的列数

3.Event

事件 说明 值
change 改变选择项时触发 {value:data[value],index:value}

选择器组

1.调用方式

    import PickerGroup from 'ijijin-view/vue/PickerGroup'

如

	<template>
		<picker-group v-model="pickerGroupValue" @change="changePickerGroup" :data="pickerGroupData"></picker-group>
	</template>
	<script>
	  import PickerGroup from 'ijijin-view/vue/PickerGroup'
	    let provincesData = [
        {provinces: '浙江', city: ['杭州', '温州', '嘉兴', '海宁', '绍兴']},
        {provinces: '江苏', city: ['南京', '苏州', '常州']},
        {provinces: '广州', city: ['广东', '深圳','东莞']},
        {provinces: '青海', city: ['西宁', '格尔木', '海东', '玉树']},
        {provinces: '西藏', city: ['拉萨', '林芝', '山南']},
       ];
	    export default {
	        data() {
	            return {
		           pickerGroupValue: [0,1], // 每一列的选择项的索引值
		           pickerGroupData: [['浙江', '江苏', '广州', '青海', '西藏'],provincesData[0].city],
	            }
	        },
	        methods: {
	            changePickerGroup(data) {
		            // data格式：
		            // {
	                //     $picker: Object, // 组件PickerGroup本身 抛出setColumnData方法改变选择器数据
	                //     column: 1,       // 本次改变选择器列数
	                //     value: "嘉兴"    // 本次改变的值
	                //     index: 2,        // 本次改变的值的索引
	                //     data: [{value: '第一列选中值',index: '第一列选中值索引'},...], // 所有列当前选中状态
	                // };
                
				   // 改变列的数据，多列联动时需要
			          data.$picker.setColumnData(provincesData[data.index].city, data.column + 1, true);
	            },
	        },
	        components: {
	            PickerGroup 
	        }
	   }
	</script>

2.API

参数 类型 默认值 说明 格式
value Number 必选 当前选择项的索引 [第一列选中值索引，第二列选中值索引]
data Array 必选 数据数组 [[第一列的数据列表]，[第二列的数据列表]]

3.Event

事件 说明 值
change 改变选择项时触发 {$picker: Object, column: 1, data: [{value: '第一列选中值',index: '第一列选中值索引'},...], index: 2, value: "嘉兴"} 具体注释见调用方式

4.Function

方法 说明 参数
setColumnData 改变某一列数据 data:要改变的数据，column:要改变的列,init:是否初始化该列后面列的值

具体样例见右示例

← 其他组件 →