fixed #433
This commit is contained in:
梁灏
parent
ca13135480
commit
acb79ba30e
8 changed files with 97 additions and 11 deletions
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue