other / mew-iview

Commit ef0901312b10e39147cef4eefabe8d8becf0bbc0

Authored by 梁灏
1 parent 8fbc8c71

optimize Input validate icon

Showing 4 changed files with 81 additions and 345 deletions   Show diff stats
Inline Side-by-side
examples/routers/form.vue
  Show/Hide comments   View file @ef09013
1 -<!--<template>-->  
2 - <!--<div>-->  
3 - <!--date: {{ formInline.date }}-->  
4 - <!--<i-form ref="formInline" :model="formInline" :rules="ruleInline">-->  
5 - <!--<Form-item prop="date" label="日期">-->  
6 - <!--<Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>-->  
7 - <!--</Form-item>-->  
8 - <!--<Form-item prop="value2" label="级联选择">-->  
9 - <!--<Cascader :data="formInline.data" v-model="formInline.value2" change-on-select></Cascader>-->  
10 - <!--</Form-item>-->  
11 - <!--<Form-item prop="user" label="输入框">-->  
12 - <!--<Input v-model="formInline.user"></Input>-->  
13 - <!--</Form-item>-->  
14 - <!--<Form-item prop="targetKeys1" label="穿梭框">-->  
15 - <!--<Transfer-->  
16 - <!--filterable-->  
17 - <!--:data="formInline.data1"-->  
18 - <!--:target-keys="formInline.targetKeys1"-->  
19 - <!--:render-format="render1"-->  
20 - <!--@on-change="handleChange1"></Transfer>-->  
21 - <!--</Form-item>-->  
22 - <!--<Form-item>-->  
23 - <!--<i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>-->  
24 - <!--</Form-item>-->  
25 - <!--</i-form>-->  
26 - <!--</div>-->  
27 -<!--</template>-->  
28 -<!--<script>-->  
29 - <!--export default {-->  
30 - <!--data () {-->  
31 - <!--return {-->  
32 - <!--formInline: {-->  
33 - <!--data1: this.getMockData(),-->  
34 - <!--targetKeys1: this.getTargetKeys(),-->  
35 - <!--date: new Date(),-->  
36 - <!--user: '',-->  
37 - <!--value2: [],-->  
38 - <!--data: [{-->  
39 - <!--value: 'beijing',-->  
40 - <!--label: '北京',-->  
41 - <!--children: [-->  
42 - <!--{-->  
43 - <!--value: 'gugong',-->  
44 - <!--label: '故宫'-->  
45 - <!--},-->  
46 - <!--{-->  
47 - <!--value: 'tiantan',-->  
48 - <!--label: '天坛'-->  
49 - <!--},-->  
50 - <!--{-->  
51 - <!--value: 'wangfujing',-->  
52 - <!--label: '王府井'-->  
53 - <!--}-->  
54 - <!--]-->  
55 - <!--}, {-->  
56 - <!--value: 'jiangsu',-->  
57 - <!--label: '江苏',-->  
58 - <!--children: [-->  
59 - <!--{-->  
60 - <!--value: 'nanjing',-->  
61 - <!--label: '南京',-->  
62 - <!--children: [-->  
63 - <!--{-->  
64 - <!--value: 'fuzimiao',-->  
65 - <!--label: '夫子庙',-->  
66 - <!--}-->  
67 - <!--]-->  
68 - <!--},-->  
69 - <!--{-->  
70 - <!--value: 'suzhou',-->  
71 - <!--label: '苏州',-->  
72 - <!--children: [-->  
73 - <!--{-->  
74 - <!--value: 'zhuozhengyuan',-->  
75 - <!--label: '拙政园',-->  
76 - <!--},-->  
77 - <!--{-->  
78 - <!--value: 'shizilin',-->  
79 - <!--label: '狮子林',-->  
80 - <!--}-->  
81 - <!--]-->  
82 - <!--}-->  
83 - <!--],-->  
84 - <!--}]-->  
85 - <!--},-->  
86 - <!--ruleInline: {-->  
87 - <!--date: [-->  
88 - <!--{-->  
89 - <!--required: true,-->  
90 - <!--type: 'date',-->  
91 - <!--message: '请选择日期',-->  
92 - <!--trigger: 'change'-->  
93 - <!--}-->  
94 - <!--],-->  
95 - <!--user: [-->  
96 - <!--{-->  
97 - <!--required: true,-->  
98 - <!--message: '请输入',-->  
99 - <!--trigger: 'change',-->  
100 - <!--min: 10-->  
101 - <!--},-->  
102 - <!--{-->  
103 - <!--required: true,-->  
104 - <!--message: '请输入2',-->  
105 - <!--trigger: 'blur'-->  
106 - <!--}-->  
107 - <!--],-->  
108 - <!--value2: [-->  
109 - <!--{-->  
110 - <!--required: true,-->  
111 - <!--type: 'array',-->  
112 - <!--message: '请输入',-->  
113 - <!--trigger: 'change'-->  
114 - <!--}-->  
115 - <!--],-->  
116 - <!--targetKeys1: [-->  
117 - <!--{-->  
118 - <!--required: true,-->  
119 - <!--type: 'array',-->  
120 - <!--max: 2,-->  
121 - <!--message: '太多了',-->  
122 - <!--trigger: 'change'-->  
123 - <!--}-->  
124 - <!--]-->  
125 - <!--}-->  
126 - <!--}-->  
127 - <!--},-->  
128 - <!--methods: {-->  
129 - <!--handleSubmit(name) {-->  
130 - <!--this.$refs[name].validate((valid) => {-->  
131 - <!--if (valid) {-->  
132 - <!--this.$Message.success('提交成功!');-->  
133 - <!--} else {-->  
134 - <!--this.$Message.error('表单验证失败!');-->  
135 - <!--}-->  
136 - <!--})-->  
137 - <!--},-->  
138 - <!--handleInput (val) {-->  
139 - <!--console.log(val)-->  
140 - <!--},-->  
141 - <!--getMockData () {-->  
142 - <!--let mockData = [];-->  
143 - <!--for (let i = 1; i <= 20; i++) {-->  
144 - <!--mockData.push({-->  
145 - <!--key: i.toString(),-->  
146 - <!--label: '内容' + i,-->  
147 - <!--description: '内容' + i + '的描述信息',-->  
148 - <!--disabled: Math.random() * 3 < 1-->  
149 - <!--});-->  
150 - <!--}-->  
151 - <!--return mockData;-->  
152 - <!--},-->  
153 - <!--getTargetKeys () {-->  
154 - <!--return this.getMockData()-->  
155 - <!--.filter(() => Math.random() * 2 > 1)-->  
156 - <!--.map(item => item.key);-->  
157 - <!--},-->  
158 - <!--render1 (item) {-->  
159 - <!--return item.label;-->  
160 - <!--},-->  
161 - <!--handleChange1 (newTargetKeys, direction, moveKeys) {-->  
162 - <!--console.log(newTargetKeys);-->  
163 - <!--console.log(direction);-->  
164 - <!--console.log(moveKeys);-->  
165 - <!--this.formInline.targetKeys1 = newTargetKeys;-->  
166 - <!--}-->  
167 - <!--}-->  
168 - <!--}-->  
169 -<!--</script>-->  
170 -  
171 -  
172 -<!--<template>-->  
173 - <!--<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">-->  
174 - <!--<Form-item label="密码" prop="passwd">-->  
175 - <!--<Input type="password" v-model="formCustom.passwd"></Input>-->  
176 - <!--</Form-item>-->  
177 - <!--<Form-item label="确认密码" prop="passwdCheck">-->  
178 - <!--<Input type="password" v-model="formCustom.passwdCheck"></Input>-->  
179 - <!--</Form-item>-->  
180 - <!--<Form-item label="年龄" prop="age">-->  
181 - <!--<Input type="text" v-model="formCustom.age" number></Input>-->  
182 - <!--</Form-item>-->  
183 - <!--<Form-item>-->  
184 - <!--<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>-->  
185 - <!--<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>-->  
186 - <!--</Form-item>-->  
187 - <!--</Form>-->  
188 -<!--</template>-->  
189 -<!--<script>-->  
190 - <!--export default {-->  
191 - <!--data () {-->  
192 - <!--const validatePass = (rule, value, callback) => {-->  
193 - <!--if (value === '') {-->  
194 - <!--callback(new Error('请输入密码'));-->  
195 - <!--} else {-->  
196 - <!--if (this.formCustom.passwdCheck !== '') {-->  
197 - <!--// 对第二个密码框单独验证-->  
198 - <!--this.$refs.formCustom.validateField('passwdCheck');-->  
199 - <!--}-->  
200 - <!--callback();-->  
201 - <!--}-->  
202 - <!--};-->  
203 - <!--const validatePassCheck = (rule, value, callback) => {-->  
204 - <!--if (value === '') {-->  
205 - <!--callback(new Error('请再次输入密码'));-->  
206 - <!--} else if (value !== this.formCustom.passwd) {-->  
207 - <!--callback(new Error('两次输入密码不一致!'));-->  
208 - <!--} else {-->  
209 - <!--callback();-->  
210 - <!--}-->  
211 - <!--};-->  
212 - <!--const validateAge = (rule, value, callback) => {-->  
213 - <!--if (!value) {-->  
214 - <!--return callback(new Error('年龄不能为空'));-->  
215 - <!--}-->  
216 - <!--// 模拟异步验证效果-->  
217 - <!--setTimeout(() => {-->  
218 - <!--if (!Number.isInteger(value)) {-->  
219 - <!--callback(new Error('请输入数字值'));-->  
220 - <!--} else {-->  
221 - <!--if (value < 18) {-->  
222 - <!--callback(new Error('必须年满18岁'));-->  
223 - <!--} else {-->  
224 - <!--callback();-->  
225 - <!--}-->  
226 - <!--}-->  
227 - <!--}, 1000);-->  
228 - <!--};-->  
229 -  
230 - <!--return {-->  
231 - <!--formCustom: {-->  
232 - <!--passwd: '',-->  
233 - <!--passwdCheck: '',-->  
234 - <!--age: ''-->  
235 - <!--},-->  
236 - <!--ruleCustom: {-->  
237 - <!--passwd: [-->  
238 - <!--{ validator: validatePass, trigger: 'blur' }-->  
239 - <!--],-->  
240 - <!--passwdCheck: [-->  
241 - <!--{ validator: validatePassCheck, trigger: 'blur' }-->  
242 - <!--],-->  
243 - <!--age: [-->  
244 - <!--{ validator: validateAge, trigger: 'blur' }-->  
245 - <!--]-->  
246 - <!--}-->  
247 - <!--}-->  
248 - <!--},-->  
249 - <!--methods: {-->  
250 - <!--handleSubmit (name) {-->  
251 - <!--this.$refs[name].validate((valid) => {-->  
252 - <!--if (valid) {-->  
253 - <!--this.$Message.success('提交成功!');-->  
254 - <!--} else {-->  
255 - <!--this.$Message.error('表单验证失败!');-->  
256 - <!--}-->  
257 - <!--})-->  
258 - <!--},-->  
259 - <!--handleReset (name) {-->  
260 - <!--this.$refs[name].resetFields();-->  
261 - <!--}-->  
262 - <!--}-->  
263 - <!--}-->  
264 -<!--</script>-->  
265 -  
266 <template> 1 <template>
267 - <div>  
268 - <Form ref="DateForm" :model="form" :rules="rules" :label-width="80" style="width: 400px;">  
269 - <Form-item label="选择日期" prop="value1">  
270 - <Cascader :data="form.data" v-model="form.value1"></Cascader> 2 + <div style="width: 300px;">
  3 + <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
  4 + <Form-item label="密码" prop="passwd">
  5 + <Input type="password" v-model="formCustom.passwd"></Input>
  6 + </Form-item>
  7 + <Form-item label="确认密码" prop="passwdCheck">
  8 + <Input type="password" v-model="formCustom.passwdCheck"></Input>
  9 + </Form-item>
  10 + <Form-item label="年龄" prop="age">
  11 + <Input type="text" v-model="formCustom.age" number></Input>
271 </Form-item> 12 </Form-item>
272 <Form-item> 13 <Form-item>
273 - <Button type="primary" @click="handleClick">确定</Button> 14 + <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
  15 + <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
274 </Form-item> 16 </Form-item>
275 </Form> 17 </Form>
276 </div> 18 </div>
@@ -278,72 +20,76 @@ @@ -278,72 +20,76 @@
278 <script> 20 <script>
279 export default { 21 export default {
280 data () { 22 data () {
  23 + const validatePass = (rule, value, callback) => {
  24 + if (value === '') {
  25 + callback(new Error('请输入密码'));
  26 + } else {
  27 + if (this.formCustom.passwdCheck !== '') {
  28 + // 对第二个密码框单独验证
  29 + this.$refs.formCustom.validateField('passwdCheck');
  30 + }
  31 + callback();
  32 + }
  33 + };
  34 + const validatePassCheck = (rule, value, callback) => {
  35 + if (value === '') {
  36 + callback(new Error('请再次输入密码'));
  37 + } else if (value !== this.formCustom.passwd) {
  38 + callback(new Error('两次输入密码不一致!'));
  39 + } else {
  40 + callback();
  41 + }
  42 + };
  43 + const validateAge = (rule, value, callback) => {
  44 + if (!value) {
  45 + return callback(new Error('年龄不能为空'));
  46 + }
  47 + // 模拟异步验证效果
  48 + setTimeout(() => {
  49 + if (!Number.isInteger(value)) {
  50 + callback(new Error('请输入数字值'));
  51 + } else {
  52 + if (value < 18) {
  53 + callback(new Error('必须年满18岁'));
  54 + } else {
  55 + callback();
  56 + }
  57 + }
  58 + }, 2000);
  59 + };
  60 +
281 return { 61 return {
282 - form: {  
283 - value1: [],  
284 - data: [{  
285 - value: 'beijing',  
286 - label: '北京',  
287 - children: [  
288 - {  
289 - value: 'gugong',  
290 - label: '故宫'  
291 - },  
292 - {  
293 - value: 'tiantan',  
294 - label: '天坛'  
295 - },  
296 - {  
297 - value: 'wangfujing',  
298 - label: '王府井'  
299 - }  
300 - ]  
301 - }, {  
302 - value: 'jiangsu',  
303 - label: '江苏',  
304 - children: [  
305 - {  
306 - value: 'nanjing',  
307 - label: '南京',  
308 - children: [  
309 - {  
310 - value: 'fuzimiao',  
311 - label: '夫子庙',  
312 - }  
313 - ]  
314 - },  
315 - {  
316 - value: 'suzhou',  
317 - label: '苏州',  
318 - children: [  
319 - {  
320 - value: 'zhuozhengyuan',  
321 - label: '拙政园',  
322 - },  
323 - {  
324 - value: 'shizilin',  
325 - label: '狮子林',  
326 - }  
327 - ]  
328 - }  
329 - ],  
330 - }] 62 + formCustom: {
  63 + passwd: '',
  64 + passwdCheck: '',
  65 + age: ''
331 }, 66 },
332 - rules: {  
333 - value1: [  
334 - {  
335 - required: true,  
336 - type: 'array',  
337 - message: '没有填写'  
338 - } 67 + ruleCustom: {
  68 + passwd: [
  69 + { validator: validatePass, trigger: 'blur' }
  70 + ],
  71 + passwdCheck: [
  72 + { validator: validatePassCheck, trigger: 'blur' }
  73 + ],
  74 + age: [
  75 + { validator: validateAge, trigger: 'blur' }
339 ] 76 ]
340 } 77 }
341 } 78 }
342 }, 79 },
343 methods: { 80 methods: {
344 - handleClick() {  
345 - this.$refs.DateForm.validate(); 81 + handleSubmit (name) {
  82 + this.$refs[name].validate((valid) => {
  83 + if (valid) {
  84 + this.$Message.success('提交成功!');
  85 + } else {
  86 + this.$Message.error('表单验证失败!');
  87 + }
  88 + })
  89 + },
  90 + handleReset (name) {
  91 + this.$refs[name].resetFields();
346 } 92 }
347 } 93 }
348 } 94 }
349 -</script>  
350 \ No newline at end of file 95 \ No newline at end of file
  96 +</script>
examples/routers/input.vue
  Show/Hide comments   View file @ef09013
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Input v-model="value" placeholder="请输入..." style="width: 300px" icon="ios-clock-outline"></Input>  
4 - <input type="text" v-model="value">  
5 - {{ value }}  
6 - <!--<Input v-model="value">-->  
7 - <!--<span slot="prepend">http://</span>-->  
8 - <!--<span slot="append">.com</span>-->  
9 - <!--</Input>-->  
10 - <br>  
11 - <Input type="textarea" v-model="value" placeholder="请输入..."></Input>  
12 - <Input type="textarea" v-model="value" :rows="4" placeholder="请输入..."></Input>  
13 - <br>  
14 - <br>  
15 - <Input type="textarea" v-model="value" :autosize="true" placeholder="请输入..."></Input>  
16 - <Input type="textarea" v-model="value" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> 3 + <Input v-model="value" placeholder="请输入..." style="width: 150px" icon="ios-clock-outline"></Input>
17 </div> 4 </div>
18 </template> 5 </template>
19 <script> 6 <script>
src/components/input/input.vue
  Show/Hide comments   View file @ef09013
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div :class="wrapClasses"> 2 <div :class="wrapClasses">
3 <template v-if="type !== 'textarea'"> 3 <template v-if="type !== 'textarea'">
4 <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" ref="prepend"><slot name="prepend"></slot></div> 4 <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" ref="prepend"><slot name="prepend"></slot></div>
5 - <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i> 5 + <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-if="icon" @click="handleIconClick"></i>
6 <transition name="fade"> 6 <transition name="fade">
7 <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> 7 <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
8 </transition> 8 </transition>
src/styles/components/input.less
  Show/Hide comments   View file @ef09013
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 display: none; 23 display: none;
24 } 24 }
25 25
26 - &-icon + &{ 26 + &-icon-normal + &{
27 padding-right: 32px; 27 padding-right: 32px;
28 } 28 }
29 29
@@ -72,5 +72,8 @@ @@ -72,5 +72,8 @@
72 &-icon-validate{ 72 &-icon-validate{
73 display: inline-block; 73 display: inline-block;
74 } 74 }
  75 + &-icon + .@{input-prefix-cls}{
  76 + padding-right: 32px;
  77 + }
75 } 78 }
76 } 79 }
77 \ No newline at end of file 80 \ No newline at end of file