chenhaodong / 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 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 12 </Form-item>
272 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 16 </Form-item>
275 17 </Form>
276 18 </div>
... ... @@ -278,72 +20,76 @@
278 20 <script>
279 21 export default {
280 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 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 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 95 \ No newline at end of file
  96 +</script>
... ...
examples/routers/input.vue
  Show/Hide comments   View file @ef09013
1 1 <template>
2 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 4 </div>
18 5 </template>
19 6 <script>
... ...
src/components/input/input.vue
  Show/Hide comments   View file @ef09013
... ... @@ -2,7 +2,7 @@
2 2 <div :class="wrapClasses">
3 3 <template v-if="type !== 'textarea'">
4 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 6 <transition name="fade">
7 7 <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
8 8 </transition>
... ...
src/styles/components/input.less
  Show/Hide comments   View file @ef09013
... ... @@ -23,7 +23,7 @@
23 23 display: none;
24 24 }
25 25  
26   - &-icon + &{
  26 + &-icon-normal + &{
27 27 padding-right: 32px;
28 28 }
29 29  
... ... @@ -72,5 +72,8 @@
72 72 &-icon-validate{
73 73 display: inline-block;
74 74 }
  75 + &-icon + .@{input-prefix-cls}{
  76 + padding-right: 32px;
  77 + }
75 78 }
76 79 }
77 80 \ No newline at end of file
... ...