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 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 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 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 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 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 126 <br>
81 127 </div>
82 128 </template>
... ... @@ -84,7 +130,7 @@
84 130 export default {
85 131 data () {
86 132 return {
87   - value: '',
  133 + value: '你好你好你真好你好你好你真好你好你好你真好你好你好你真好',
88 134 value11: '',
89 135 value12: '',
90 136 value13: '',
... ...
src/components/input/input.vue
  Show/Hide comments   View file @42d5412
... ... @@ -4,6 +4,7 @@
4 4 <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
5 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 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 8 <transition name="fade">
8 9 <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
9 10 </transition>
... ... @@ -31,6 +32,7 @@
31 32 @input="handleInput"
32 33 @change="handleChange">
33 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 36 </template>
35 37 <textarea
36 38 v-else
... ... @@ -142,6 +144,14 @@
142 144 return oneOf(value, ['hard', 'soft']);
143 145 },
144 146 default: 'soft'
  147 + },
  148 + prefix: {
  149 + type: String,
  150 + default: ''
  151 + },
  152 + suffix: {
  153 + type: String,
  154 + default: ''
145 155 }
146 156 },
147 157 data () {
... ... @@ -151,7 +161,9 @@
151 161 prepend: true,
152 162 append: true,
153 163 slotReady: false,
154   - textareaStyles: {}
  164 + textareaStyles: {},
  165 + showPrefix: false,
  166 + showSuffix: false
155 167 };
156 168 },
157 169 computed: {
... ... @@ -174,7 +186,9 @@
174 186 `${prefixCls}`,
175 187 {
176 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 287 if (this.type !== 'textarea') {
274 288 this.prepend = this.$slots.prepend !== undefined;
275 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 292 } else {
277 293 this.prepend = false;
278 294 this.append = false;
... ...
src/styles/components/input.less
  Show/Hide comments   View file @42d5412
... ... @@ -62,6 +62,45 @@
62 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 106 .@{input-prefix-cls}-group{
... ...