diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index 6e09b88..d1c3589 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -1,21 +1,32 @@
<template>
<div>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
- <Form-item prop="name">
+ <Form-item label-for="autocomplete" prop="name">
<span slot="label"><Icon type="ionic"></Icon></span>
- <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
+ <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
</Form-item>
<Form-item label="邮箱" prop="mail">
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
<ColorPicker v-model="formValidate.mail"></ColorPicker>
</Form-item>
- <Form-item label="城市" prop="city">
- <Select v-model="formValidate.city" placeholder="请选择所在地">
+ <Form-item label-for="select" label="城市" prop="city">
+ <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
</Form-item>
+ <Form-item label-for="date" label="选择日期" prop="date">
+ <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
+ </Form-item>
+ <Form-item label-for="cascader" label="级联选择" prop="cascader">
+ <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>
+ </Form-item>
+
+ <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
+ <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>
+ </Form-item>
+
<Form-item label="选择日期">
<Row>
<Col span="11">
@@ -45,8 +56,8 @@
<Checkbox label="看电影"></Checkbox>
</Checkbox-group>
</Form-item>
- <Form-item label="介绍" prop="desc">
- <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
+ <Form-item label-for="input" label="介绍" prop="desc">
+ <Input element-id="input" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
</Form-item>
<Form-item>
<Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
@@ -83,6 +94,53 @@
export default {
data () {
return {
+ dataCascader: [{
+ value: 'beijing',
+ label: '北京',
+ children: [
+ {
+ value: 'gugong',
+ label: '故宫'
+ },
+ {
+ value: 'tiantan',
+ label: '天坛'
+ },
+ {
+ value: 'wangfujing',
+ label: '王府井'
+ }
+ ]
+ }, {
+ value: 'jiangsu',
+ label: '江苏',
+ children: [
+ {
+ value: 'nanjing',
+ label: '南京',
+ children: [
+ {
+ value: 'fuzimiao',
+ label: '夫子庙',
+ }
+ ]
+ },
+ {
+ value: 'suzhou',
+ label: '苏州',
+ children: [
+ {
+ value: 'zhuozhengyuan',
+ label: '拙政园',
+ },
+ {
+ value: 'shizilin',
+ label: '狮子林',
+ }
+ ]
+ }
+ ],
+ }],
color: '#19be6b',
valuer: 3,
valuec: [],
@@ -172,7 +230,9 @@
interest: [],
date: '',
time: '',
- desc: ''
+ desc: '',
+ cascader: [],
+ inputnumber: 1
},
ruleValidate: {
name: [
diff --git a/src/components/auto-complete/auto-complete.vue b/src/components/auto-complete/auto-complete.vue
index c514439..4989ccc 100644
--- a/src/components/auto-complete/auto-complete.vue
+++ b/src/components/auto-complete/auto-complete.vue
@@ -15,6 +15,7 @@
:transfer="transfer">
<slot name="input">
<i-input
+ :element-id="elementId"
ref="input"
slot="input"
v-model="currentValue"
@@ -85,6 +86,9 @@
},
name: {
type: String
+ },
+ elementId: {
+ type: String
}
},
data () {
diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue
index ade65a1..16dfc70 100644
--- a/src/components/cascader/cascader.vue
+++ b/src/components/cascader/cascader.vue
@@ -4,6 +4,7 @@
<input type="hidden" :name="name" :value="currentValue">
<slot>
<i-input
+ :element-id="elementId"
ref="input"
:readonly="!filterable"
:disabled="disabled"
@@ -131,6 +132,9 @@
},
name: {
type: String
+ },
+ elementId: {
+ type: String
}
},
data () {
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index dc1fc70..d54fa7d 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -3,6 +3,7 @@
<div ref="reference" :class="[prefixCls + '-rel']">
<slot>
<i-input
+ :element-id="elementId"
:class="[prefixCls + '-editor']"
:readonly="!editable || readonly"
:disabled="disabled"
@@ -202,6 +203,9 @@
},
name: {
type: String
+ },
+ elementId: {
+ type: String
}
},
data () {
diff --git a/src/components/form/form-item.vue b/src/components/form/form-item.vue
index 574ac2f..01f6042 100644
--- a/src/components/form/form-item.vue
+++ b/src/components/form/form-item.vue
@@ -1,6 +1,6 @@
<template>
<div :class="classes">
- <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label || $slots.label"><slot name="label">{{ label }}</slot></label>
+ <label :class="[prefixCls + '-label']" :for="labelFor" :style="labelStyles" v-if="label || $slots.label"><slot name="label">{{ label }}</slot></label>
<div :class="[prefixCls + '-content']" :style="contentStyles">
<slot></slot>
<transition name="fade">
@@ -10,8 +10,6 @@
</div>
</template>
<script>
- // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
-
import AsyncValidator from 'async-validator';
import Emitter from '../../mixins/emitter';
@@ -70,6 +68,9 @@
showMessage: {
type: Boolean,
default: true
+ },
+ labelFor: {
+ type: String
}
},
data () {
diff --git a/src/components/input-number/input-number.vue b/src/components/input-number/input-number.vue
index 68d7905..0bc1321 100644
--- a/src/components/input-number/input-number.vue
+++ b/src/components/input-number/input-number.vue
@@ -16,6 +16,7 @@
</div>
<div :class="inputWrapClasses">
<input
+ :id="elementId"
:class="inputClasses"
:disabled="disabled"
autocomplete="off"
@@ -101,6 +102,9 @@
},
precision: {
type: Number
+ },
+ elementId: {
+ type: String
}
},
data () {
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index 43d5ae3..32aba84 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -7,6 +7,7 @@
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
</transition>
<input
+ :id="elementId"
:autocomplete="autocomplete"
ref="input"
:type="type"
@@ -30,8 +31,9 @@
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
</template>
<textarea
- :autocomplete="autocomplete"
v-else
+ :id="elementId"
+ :autocomplete="autocomplete"
ref="textarea"
:class="textareaClasses"
:style="textareaStyles"
@@ -119,6 +121,9 @@
return oneOf(value, ['on', 'off']);
},
default: 'off'
+ },
+ elementId: {
+ type: String
}
},
data () {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index ae554a7..959f746 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -13,6 +13,7 @@
<span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span>
<span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
<input
+ :id="elementId"
type="text"
v-if="filterable"
v-model="query"
@@ -135,6 +136,9 @@
},
name: {
type: String
+ },
+ elementId: {
+ type: String
}
},
data () {
--
libgit2 0.21.4