diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index e283331..403a4f4 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -1,276 +1,18 @@
-<!--<template>-->
- <!--<div>-->
- <!--date: {{ formInline.date }}-->
- <!--<i-form ref="formInline" :model="formInline" :rules="ruleInline">-->
- <!--<Form-item prop="date" label="日期">-->
- <!--<Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>-->
- <!--</Form-item>-->
- <!--<Form-item prop="value2" label="级联选择">-->
- <!--<Cascader :data="formInline.data" v-model="formInline.value2" change-on-select></Cascader>-->
- <!--</Form-item>-->
- <!--<Form-item prop="user" label="输入框">-->
- <!--<Input v-model="formInline.user"></Input>-->
- <!--</Form-item>-->
- <!--<Form-item prop="targetKeys1" label="穿梭框">-->
- <!--<Transfer-->
- <!--filterable-->
- <!--:data="formInline.data1"-->
- <!--:target-keys="formInline.targetKeys1"-->
- <!--:render-format="render1"-->
- <!--@on-change="handleChange1"></Transfer>-->
- <!--</Form-item>-->
- <!--<Form-item>-->
- <!--<i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>-->
- <!--</Form-item>-->
- <!--</i-form>-->
- <!--</div>-->
-<!--</template>-->
-<!--<script>-->
- <!--export default {-->
- <!--data () {-->
- <!--return {-->
- <!--formInline: {-->
- <!--data1: this.getMockData(),-->
- <!--targetKeys1: this.getTargetKeys(),-->
- <!--date: new Date(),-->
- <!--user: '',-->
- <!--value2: [],-->
- <!--data: [{-->
- <!--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: '狮子林',-->
- <!--}-->
- <!--]-->
- <!--}-->
- <!--],-->
- <!--}]-->
- <!--},-->
- <!--ruleInline: {-->
- <!--date: [-->
- <!--{-->
- <!--required: true,-->
- <!--type: 'date',-->
- <!--message: '请选择日期',-->
- <!--trigger: 'change'-->
- <!--}-->
- <!--],-->
- <!--user: [-->
- <!--{-->
- <!--required: true,-->
- <!--message: '请输入',-->
- <!--trigger: 'change',-->
- <!--min: 10-->
- <!--},-->
- <!--{-->
- <!--required: true,-->
- <!--message: '请输入2',-->
- <!--trigger: 'blur'-->
- <!--}-->
- <!--],-->
- <!--value2: [-->
- <!--{-->
- <!--required: true,-->
- <!--type: 'array',-->
- <!--message: '请输入',-->
- <!--trigger: 'change'-->
- <!--}-->
- <!--],-->
- <!--targetKeys1: [-->
- <!--{-->
- <!--required: true,-->
- <!--type: 'array',-->
- <!--max: 2,-->
- <!--message: '太多了',-->
- <!--trigger: 'change'-->
- <!--}-->
- <!--]-->
- <!--}-->
- <!--}-->
- <!--},-->
- <!--methods: {-->
- <!--handleSubmit(name) {-->
- <!--this.$refs[name].validate((valid) => {-->
- <!--if (valid) {-->
- <!--this.$Message.success('提交成功!');-->
- <!--} else {-->
- <!--this.$Message.error('表单验证失败!');-->
- <!--}-->
- <!--})-->
- <!--},-->
- <!--handleInput (val) {-->
- <!--console.log(val)-->
- <!--},-->
- <!--getMockData () {-->
- <!--let mockData = [];-->
- <!--for (let i = 1; i <= 20; i++) {-->
- <!--mockData.push({-->
- <!--key: i.toString(),-->
- <!--label: '内容' + i,-->
- <!--description: '内容' + i + '的描述信息',-->
- <!--disabled: Math.random() * 3 < 1-->
- <!--});-->
- <!--}-->
- <!--return mockData;-->
- <!--},-->
- <!--getTargetKeys () {-->
- <!--return this.getMockData()-->
- <!--.filter(() => Math.random() * 2 > 1)-->
- <!--.map(item => item.key);-->
- <!--},-->
- <!--render1 (item) {-->
- <!--return item.label;-->
- <!--},-->
- <!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
- <!--console.log(newTargetKeys);-->
- <!--console.log(direction);-->
- <!--console.log(moveKeys);-->
- <!--this.formInline.targetKeys1 = newTargetKeys;-->
- <!--}-->
- <!--}-->
- <!--}-->
-<!--</script>-->
-
-
-<!--<template>-->
- <!--<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">-->
- <!--<Form-item label="密码" prop="passwd">-->
- <!--<Input type="password" v-model="formCustom.passwd"></Input>-->
- <!--</Form-item>-->
- <!--<Form-item label="确认密码" prop="passwdCheck">-->
- <!--<Input type="password" v-model="formCustom.passwdCheck"></Input>-->
- <!--</Form-item>-->
- <!--<Form-item label="年龄" prop="age">-->
- <!--<Input type="text" v-model="formCustom.age" number></Input>-->
- <!--</Form-item>-->
- <!--<Form-item>-->
- <!--<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>-->
- <!--<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>-->
- <!--</Form-item>-->
- <!--</Form>-->
-<!--</template>-->
-<!--<script>-->
- <!--export default {-->
- <!--data () {-->
- <!--const validatePass = (rule, value, callback) => {-->
- <!--if (value === '') {-->
- <!--callback(new Error('请输入密码'));-->
- <!--} else {-->
- <!--if (this.formCustom.passwdCheck !== '') {-->
- <!--// 对第二个密码框单独验证-->
- <!--this.$refs.formCustom.validateField('passwdCheck');-->
- <!--}-->
- <!--callback();-->
- <!--}-->
- <!--};-->
- <!--const validatePassCheck = (rule, value, callback) => {-->
- <!--if (value === '') {-->
- <!--callback(new Error('请再次输入密码'));-->
- <!--} else if (value !== this.formCustom.passwd) {-->
- <!--callback(new Error('两次输入密码不一致!'));-->
- <!--} else {-->
- <!--callback();-->
- <!--}-->
- <!--};-->
- <!--const validateAge = (rule, value, callback) => {-->
- <!--if (!value) {-->
- <!--return callback(new Error('年龄不能为空'));-->
- <!--}-->
- <!--// 模拟异步验证效果-->
- <!--setTimeout(() => {-->
- <!--if (!Number.isInteger(value)) {-->
- <!--callback(new Error('请输入数字值'));-->
- <!--} else {-->
- <!--if (value < 18) {-->
- <!--callback(new Error('必须年满18岁'));-->
- <!--} else {-->
- <!--callback();-->
- <!--}-->
- <!--}-->
- <!--}, 1000);-->
- <!--};-->
-
- <!--return {-->
- <!--formCustom: {-->
- <!--passwd: '',-->
- <!--passwdCheck: '',-->
- <!--age: ''-->
- <!--},-->
- <!--ruleCustom: {-->
- <!--passwd: [-->
- <!--{ validator: validatePass, trigger: 'blur' }-->
- <!--],-->
- <!--passwdCheck: [-->
- <!--{ validator: validatePassCheck, trigger: 'blur' }-->
- <!--],-->
- <!--age: [-->
- <!--{ validator: validateAge, trigger: 'blur' }-->
- <!--]-->
- <!--}-->
- <!--}-->
- <!--},-->
- <!--methods: {-->
- <!--handleSubmit (name) {-->
- <!--this.$refs[name].validate((valid) => {-->
- <!--if (valid) {-->
- <!--this.$Message.success('提交成功!');-->
- <!--} else {-->
- <!--this.$Message.error('表单验证失败!');-->
- <!--}-->
- <!--})-->
- <!--},-->
- <!--handleReset (name) {-->
- <!--this.$refs[name].resetFields();-->
- <!--}-->
- <!--}-->
- <!--}-->
-<!--</script>-->
-
<template>
- <div>
- <Form ref="DateForm" :model="form" :rules="rules" :label-width="80" style="width: 400px;">
- <Form-item label="选择日期" prop="value1">
- <Cascader :data="form.data" v-model="form.value1"></Cascader>
+ <div style="width: 300px;">
+ <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
+ <Form-item label="密码" prop="passwd">
+ <Input type="password" v-model="formCustom.passwd"></Input>
+ </Form-item>
+ <Form-item label="确认密码" prop="passwdCheck">
+ <Input type="password" v-model="formCustom.passwdCheck"></Input>
+ </Form-item>
+ <Form-item label="年龄" prop="age">
+ <Input type="text" v-model="formCustom.age" number></Input>
</Form-item>
<Form-item>
- <Button type="primary" @click="handleClick">确定</Button>
+ <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
+ <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
</Form-item>
</Form>
</div>
@@ -278,72 +20,76 @@
<script>
export default {
data () {
+ const validatePass = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('请输入密码'));
+ } else {
+ if (this.formCustom.passwdCheck !== '') {
+ // 对第二个密码框单独验证
+ this.$refs.formCustom.validateField('passwdCheck');
+ }
+ callback();
+ }
+ };
+ const validatePassCheck = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('请再次输入密码'));
+ } else if (value !== this.formCustom.passwd) {
+ callback(new Error('两次输入密码不一致!'));
+ } else {
+ callback();
+ }
+ };
+ const validateAge = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error('年龄不能为空'));
+ }
+ // 模拟异步验证效果
+ setTimeout(() => {
+ if (!Number.isInteger(value)) {
+ callback(new Error('请输入数字值'));
+ } else {
+ if (value < 18) {
+ callback(new Error('必须年满18岁'));
+ } else {
+ callback();
+ }
+ }
+ }, 2000);
+ };
+
return {
- form: {
- value1: [],
- data: [{
- 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: '狮子林',
- }
- ]
- }
- ],
- }]
+ formCustom: {
+ passwd: '',
+ passwdCheck: '',
+ age: ''
},
- rules: {
- value1: [
- {
- required: true,
- type: 'array',
- message: '没有填写'
- }
+ ruleCustom: {
+ passwd: [
+ { validator: validatePass, trigger: 'blur' }
+ ],
+ passwdCheck: [
+ { validator: validatePassCheck, trigger: 'blur' }
+ ],
+ age: [
+ { validator: validateAge, trigger: 'blur' }
]
}
}
},
methods: {
- handleClick() {
- this.$refs.DateForm.validate();
+ handleSubmit (name) {
+ this.$refs[name].validate((valid) => {
+ if (valid) {
+ this.$Message.success('提交成功!');
+ } else {
+ this.$Message.error('表单验证失败!');
+ }
+ })
+ },
+ handleReset (name) {
+ this.$refs[name].resetFields();
}
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/routers/input.vue b/examples/routers/input.vue
index 6b8418d..03c2d58 100644
--- a/examples/routers/input.vue
+++ b/examples/routers/input.vue
@@ -1,19 +1,6 @@
<template>
<div>
- <Input v-model="value" placeholder="请输入..." style="width: 300px" icon="ios-clock-outline"></Input>
- <input type="text" v-model="value">
- {{ value }}
- <!--<Input v-model="value">-->
- <!--<span slot="prepend">http://</span>-->
- <!--<span slot="append">.com</span>-->
- <!--</Input>-->
- <br>
- <Input type="textarea" v-model="value" placeholder="请输入..."></Input>
- <Input type="textarea" v-model="value" :rows="4" placeholder="请输入..."></Input>
- <br>
- <br>
- <Input type="textarea" v-model="value" :autosize="true" placeholder="请输入..."></Input>
- <Input type="textarea" v-model="value" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
+ <Input v-model="value" placeholder="请输入..." style="width: 150px" icon="ios-clock-outline"></Input>
</div>
</template>
<script>
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index dc5924c..1e1ea8b 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -2,7 +2,7 @@
<div :class="wrapClasses">
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" ref="prepend"><slot name="prepend"></slot></div>
- <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
+ <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-if="icon" @click="handleIconClick"></i>
<transition name="fade">
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
</transition>
diff --git a/src/styles/components/input.less b/src/styles/components/input.less
index 93bfc82..974acca 100644
--- a/src/styles/components/input.less
+++ b/src/styles/components/input.less
@@ -23,7 +23,7 @@
display: none;
}
- &-icon + &{
+ &-icon-normal + &{
padding-right: 32px;
}
@@ -72,5 +72,8 @@
&-icon-validate{
display: inline-block;
}
+ &-icon + .@{input-prefix-cls}{
+ padding-right: 32px;
+ }
}
}
\ No newline at end of file
--
libgit2 0.21.4