chenhaodong / mew-iview

Commit 42d5412a07727137bc9cf0a708e364b6a1967a39

Authored by 梁灏
1 parent d8fc2568

Input add prop prefix & suffix, also add slot prefix & suffix

Showing 3 changed files with 177 additions and 76 deletions   Show diff stats
Inline Side-by-side
examples/routers/input.vue
  Show/Hide comments   View file @42d5412
1 <template> 1 <template>
2 - <div>  
3 - <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>  
4 - <Input v-model="value11">  
5 - <span slot="prepend">http://</span>  
6 - <span slot="append">.com</span>  
7 - </Input>  
8 - <br>  
9 - <Input v-model="value12">  
10 - <Select v-model="select1" slot="prepend" style="width: 80px">  
11 - <Option value="http">http://</Option>  
12 - <Option value="https">https://</Option>  
13 - </Select>  
14 - <Select v-model="select2" slot="append" style="width: 70px">  
15 - <Option value="com">.com</Option>  
16 - <Option value="org">.org</Option>  
17 - <Option value="io">.io</Option>  
18 - </Select>  
19 - </Input>  
20 - <br>  
21 - <Input v-model="value13">  
22 - <Select v-model="select3" slot="prepend" style="width: 80px">  
23 - <Option value="day">Day</Option>  
24 - <Option value="month">Month</Option>  
25 - </Select>  
26 - <Button slot="append" icon="ios-search"></Button>  
27 - </Input>  
28 - <br> 2 + <!--<div>-->
  3 + <!--<Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>-->
  4 + <!--<Input v-model="value11">-->
  5 + <!--<span slot="prepend">http://</span>-->
  6 + <!--<span slot="append">.com</span>-->
  7 + <!--</Input>-->
  8 + <!--<br>-->
  9 + <!--<Input v-model="value12">-->
  10 + <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
  11 + <!--<Option value="http">http://</Option>-->
  12 + <!--<Option value="https">https://</Option>-->
  13 + <!--</Select>-->
  14 + <!--<Select v-model="select2" slot="append" style="width: 70px">-->
  15 + <!--<Option value="com">.com</Option>-->
  16 + <!--<Option value="org">.org</Option>-->
  17 + <!--<Option value="io">.io</Option>-->
  18 + <!--</Select>-->
  19 + <!--</Input>-->
  20 + <!--<br>-->
  21 + <!--<Input v-model="value13">-->
  22 + <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
  23 + <!--<Option value="day">Day</Option>-->
  24 + <!--<Option value="month">Month</Option>-->
  25 + <!--</Select>-->
  26 + <!--<Button slot="append" icon="ios-search"></Button>-->
  27 + <!--</Input>-->
  28 + <!--<br>-->
29 29
30 - <Input v-model="value11" size="small">  
31 - <span slot="prepend">http://</span>  
32 - <span slot="append">.com</span>  
33 - </Input>  
34 - <br>  
35 - <Input v-model="value12" size="small">  
36 - <Select v-model="select1" slot="prepend" style="width: 80px">  
37 - <Option value="http">http://</Option>  
38 - <Option value="https">https://</Option>  
39 - </Select>  
40 - <Select v-model="select2" slot="append" style="width: 70px">  
41 - <Option value="com">.com</Option>  
42 - <Option value="org">.org</Option>  
43 - <Option value="io">.io</Option>  
44 - </Select>  
45 - </Input> 30 + <!--<Input v-model="value11" size="small">-->
  31 + <!--<span slot="prepend">http://</span>-->
  32 + <!--<span slot="append">.com</span>-->
  33 + <!--</Input>-->
  34 + <!--<br>-->
  35 + <!--<Input v-model="value12" size="small">-->
  36 + <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
  37 + <!--<Option value="http">http://</Option>-->
  38 + <!--<Option value="https">https://</Option>-->
  39 + <!--</Select>-->
  40 + <!--<Select v-model="select2" slot="append" style="width: 70px">-->
  41 + <!--<Option value="com">.com</Option>-->
  42 + <!--<Option value="org">.org</Option>-->
  43 + <!--<Option value="io">.io</Option>-->
  44 + <!--</Select>-->
  45 + <!--</Input>-->
  46 + <!--<br>-->
  47 + <!--<Input v-model="value13" size="small">-->
  48 + <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
  49 + <!--<Option value="day">Day</Option>-->
  50 + <!--<Option value="month">Month</Option>-->
  51 + <!--</Select>-->
  52 + <!--<Button slot="append" icon="ios-search"></Button>-->
  53 + <!--</Input>-->
  54 + <!--<br>-->
  55 +
  56 + <!--<Input v-model="value11" size="large">-->
  57 + <!--<span slot="prepend">http://</span>-->
  58 + <!--<span slot="append">.com</span>-->
  59 + <!--</Input>-->
  60 + <!--<br>-->
  61 + <!--<Input v-model="value12" size="large">-->
  62 + <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
  63 + <!--<Option value="http">http://</Option>-->
  64 + <!--<Option value="https">https://</Option>-->
  65 + <!--</Select>-->
  66 + <!--<Select v-model="select2" slot="append" style="width: 70px">-->
  67 + <!--<Option value="com">.com</Option>-->
  68 + <!--<Option value="org">.org</Option>-->
  69 + <!--<Option value="io">.io</Option>-->
  70 + <!--</Select>-->
  71 + <!--</Input>-->
  72 + <!--<br>-->
  73 + <!--<Input v-model="value13" size="large">-->
  74 + <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
  75 + <!--<Option value="day">Day</Option>-->
  76 + <!--<Option value="month">Month</Option>-->
  77 + <!--</Select>-->
  78 + <!--<Button slot="append" icon="ios-search"></Button>-->
  79 + <!--</Input>-->
  80 + <!--<br>-->
  81 + <!--</div>-->
  82 +
  83 + <div>
  84 + <Input
  85 + v-model="value"
  86 + size="small"
  87 + prefix="ios-contact"
  88 + suffix="ios-search"
  89 + placeholder="Enter something..."
  90 + style="width: 300px"></Input>
46 <br> 91 <br>
47 - <Input v-model="value13" size="small">  
48 - <Select v-model="select3" slot="prepend" style="width: 80px">  
49 - <Option value="day">Day</Option>  
50 - <Option value="month">Month</Option>  
51 - </Select>  
52 - <Button slot="append" icon="ios-search"></Button>  
53 - </Input> 92 + <Input
  93 + v-model="value"
  94 + prefix="ios-contact"
  95 + suffix="ios-search"
  96 + placeholder="Enter something..."
  97 + style="width: 300px"></Input>
54 <br> 98 <br>
55 -  
56 - <Input v-model="value11" size="large">  
57 - <span slot="prepend">http://</span>  
58 - <span slot="append">.com</span>  
59 - </Input> 99 + <Input
  100 + v-model="value"
  101 + size="large"
  102 + prefix="ios-contact"
  103 + suffix="ios-search"
  104 + placeholder="Enter something..."
  105 + style="width: 300px"></Input>
  106 + <br><br>
  107 + <Input
  108 + v-model="value"
  109 + size="small"
  110 + icon="ios-search"
  111 + placeholder="Enter something..."
  112 + style="width: 300px"></Input>
60 <br> 113 <br>
61 - <Input v-model="value12" size="large">  
62 - <Select v-model="select1" slot="prepend" style="width: 80px">  
63 - <Option value="http">http://</Option>  
64 - <Option value="https">https://</Option>  
65 - </Select>  
66 - <Select v-model="select2" slot="append" style="width: 70px">  
67 - <Option value="com">.com</Option>  
68 - <Option value="org">.org</Option>  
69 - <Option value="io">.io</Option>  
70 - </Select>  
71 - </Input> 114 + <Input
  115 + v-model="value"
  116 + icon="ios-search"
  117 + placeholder="Enter something..."
  118 + style="width: 300px"></Input>
72 <br> 119 <br>
73 - <Input v-model="value13" size="large">  
74 - <Select v-model="select3" slot="prepend" style="width: 80px">  
75 - <Option value="day">Day</Option>  
76 - <Option value="month">Month</Option>  
77 - </Select>  
78 - <Button slot="append" icon="ios-search"></Button>  
79 - </Input> 120 + <Input
  121 + v-model="value"
  122 + size="large"
  123 + icon="ios-search"
  124 + placeholder="Enter something..."
  125 + style="width: 300px"></Input>
80 <br> 126 <br>
81 </div> 127 </div>
82 </template> 128 </template>
@@ -84,7 +130,7 @@ @@ -84,7 +130,7 @@
84 export default { 130 export default {
85 data () { 131 data () {
86 return { 132 return {
87 - value: '', 133 + value: '你好你好你真好你好你好你真好你好你好你真好你好你好你真好',
88 value11: '', 134 value11: '',
89 value12: '', 135 value12: '',
90 value13: '', 136 value13: '',
src/components/input/input.vue
  Show/Hide comments   View file @42d5412
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div> 4 <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
5 <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i> 5 <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
6 <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i> 6 <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
  7 + <span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
7 <transition name="fade"> 8 <transition name="fade">
8 <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> 9 <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
9 </transition> 10 </transition>
@@ -31,6 +32,7 @@ @@ -31,6 +32,7 @@
31 @input="handleInput" 32 @input="handleInput"
32 @change="handleChange"> 33 @change="handleChange">
33 <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div> 34 <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
  35 + <span class="ivu-input-prefix" v-else-if="showPrefix"><slot name="prefix"><i class="ivu-icon" :class="['ivu-icon-' + prefix]" v-if="prefix"></i></slot></span>
34 </template> 36 </template>
35 <textarea 37 <textarea
36 v-else 38 v-else
@@ -142,6 +144,14 @@ @@ -142,6 +144,14 @@
142 return oneOf(value, ['hard', 'soft']); 144 return oneOf(value, ['hard', 'soft']);
143 }, 145 },
144 default: 'soft' 146 default: 'soft'
  147 + },
  148 + prefix: {
  149 + type: String,
  150 + default: ''
  151 + },
  152 + suffix: {
  153 + type: String,
  154 + default: ''
145 } 155 }
146 }, 156 },
147 data () { 157 data () {
@@ -151,7 +161,9 @@ @@ -151,7 +161,9 @@
151 prepend: true, 161 prepend: true,
152 append: true, 162 append: true,
153 slotReady: false, 163 slotReady: false,
154 - textareaStyles: {} 164 + textareaStyles: {},
  165 + showPrefix: false,
  166 + showSuffix: false
155 }; 167 };
156 }, 168 },
157 computed: { 169 computed: {
@@ -174,7 +186,9 @@ @@ -174,7 +186,9 @@
174 `${prefixCls}`, 186 `${prefixCls}`,
175 { 187 {
176 [`${prefixCls}-${this.size}`]: !!this.size, 188 [`${prefixCls}-${this.size}`]: !!this.size,
177 - [`${prefixCls}-disabled`]: this.disabled 189 + [`${prefixCls}-disabled`]: this.disabled,
  190 + [`${prefixCls}-with-prefix`]: this.showPrefix,
  191 + [`${prefixCls}-with-suffix`]: this.showSuffix
178 } 192 }
179 ]; 193 ];
180 }, 194 },
@@ -273,6 +287,8 @@ @@ -273,6 +287,8 @@
273 if (this.type !== 'textarea') { 287 if (this.type !== 'textarea') {
274 this.prepend = this.$slots.prepend !== undefined; 288 this.prepend = this.$slots.prepend !== undefined;
275 this.append = this.$slots.append !== undefined; 289 this.append = this.$slots.append !== undefined;
  290 + this.showPrefix = this.prefix !== '' || this.$slots.prefix !== undefined;
  291 + this.showSuffix = this.suffix !== '' || this.$slots.suffix !== undefined;
276 } else { 292 } else {
277 this.prepend = false; 293 this.prepend = false;
278 this.append = false; 294 this.append = false;
src/styles/components/input.less
  Show/Hide comments   View file @42d5412
@@ -62,6 +62,45 @@ @@ -62,6 +62,45 @@
62 // padding-right: 24px; 62 // padding-right: 24px;
63 //} 63 //}
64 } 64 }
  65 +
  66 + // prefix & suffix
  67 + &-prefix, &-suffix{
  68 + width: 32px;
  69 + height: 100%;
  70 + text-align: center;
  71 + position: absolute;
  72 + left: 0;
  73 + top: 0;
  74 + z-index: 1;
  75 + i{
  76 + font-size: 16px;
  77 + line-height: @input-height-base;
  78 + color: @subsidiary-color;
  79 + }
  80 + }
  81 + &-suffix{
  82 + left: auto;
  83 + right: 0;
  84 + }
  85 + &-wrapper-small &-prefix, &-wrapper-small &-suffix{
  86 + i{
  87 + font-size: 14px;
  88 + line-height: @input-height-small;
  89 + }
  90 + }
  91 + &-wrapper-large &-prefix, &-wrapper-large &-suffix{
  92 + i{
  93 + font-size: 18px;
  94 + line-height: @input-height-large;
  95 + }
  96 + }
  97 +
  98 + &-with-prefix{
  99 + padding-left: 32px;
  100 + }
  101 + &-with-suffix{
  102 + padding-right: 32px;
  103 + }
65 } 104 }
66 105
67 .@{input-prefix-cls}-group{ 106 .@{input-prefix-cls}-group{