Commit 6ff31952a6eb27dfd2a824ab406263bac08d4ba7

Authored by 梁灏
1 parent 0a48ac45

optimize Input shaking when it init

optimize Input shaking when it init
src/components/cascader/cascader.vue
1 <template> 1 <template>
2 - 2 + <div :class="[prefixCls]">
  3 + <i-input
  4 + readonly
  5 + :disabled="disabled"
  6 + :value.sync="displayRender"
  7 + :size="size"
  8 + :placeholder="placeholder"></i-input>
  9 + </div>
3 </template> 10 </template>
4 <script> 11 <script>
  12 + import iInput from '../input/input.vue';
  13 + import Dropdown from '../select/dropdown.vue';
  14 + import clickoutside from '../../directives/clickoutside';
  15 + import { oneOf, MutationObserver } from '../../utils/assist';
  16 +
  17 + const prefixCls = 'ivu-cascader';
  18 +
5 export default { 19 export default {
6 props: { 20 props: {
7 - 21 + data: {
  22 + type: Array,
  23 + default () {
  24 + return []
  25 + }
  26 + },
  27 + value: {
  28 + type: Array
  29 + },
  30 + disabled: {
  31 + type: Boolean,
  32 + default: false
  33 + },
  34 + clearable: {
  35 + type: Boolean,
  36 + default: false
  37 + },
  38 + placeholder: {
  39 + type: String,
  40 + default: '请选择'
  41 + },
  42 + size: {
  43 + validator (value) {
  44 + return oneOf(value, ['small', 'large']);
  45 + }
  46 + },
  47 + trigger: {
  48 + validator (value) {
  49 + return oneOf(value, ['click', 'hover']);
  50 + },
  51 + default: 'click'
  52 + },
  53 + changeOnSelect: {
  54 + type: Boolean,
  55 + default: false
  56 + },
  57 + renderFormat: {
  58 + type: Function,
  59 + default: (label, selectedData) => {
  60 + label.join('/');
  61 + }
  62 + }
8 }, 63 },
9 data () { 64 data () {
10 return { 65 return {
11 - 66 + prefixCls: prefixCls,
  67 + selected: []
12 } 68 }
13 }, 69 },
14 computed: { 70 computed: {
15 - 71 + displayRender () {
  72 + let label = [];
  73 + for (let i = 0; i < this.selected.length; i++) {
  74 + label.push(this.selected[i].label);
  75 + }
  76 +
  77 + return this.renderFormat(label);
  78 + }
16 }, 79 },
17 methods: { 80 methods: {
18 81
src/components/checkbox/checkbox-group.vue
@@ -10,7 +10,9 @@ @@ -10,7 +10,9 @@
10 props: { 10 props: {
11 model: { 11 model: {
12 type: Array, 12 type: Array,
13 - default: [] 13 + default () {
  14 + return []
  15 + }
14 } 16 }
15 }, 17 },
16 computed: { 18 computed: {
src/components/input/input.vue
1 <template> 1 <template>
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-el:prepend><slot name="prepend"></slot></div> 4 + <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" v-el: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']" v-if="icon" @click="handleIconClick"></i>
6 <input 6 <input
7 :type="type" 7 :type="type"
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 @keyup.enter="handleEnter" 14 @keyup.enter="handleEnter"
15 @focus="handleFocus" 15 @focus="handleFocus"
16 @blur="handleBlur"> 16 @blur="handleBlur">
17 - <div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div> 17 + <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" v-el:append><slot name="append"></slot></div>
18 </template> 18 </template>
19 <textarea 19 <textarea
20 v-else 20 v-else
@@ -87,6 +87,7 @@ @@ -87,6 +87,7 @@
87 prefixCls: prefixCls, 87 prefixCls: prefixCls,
88 prepend: true, 88 prepend: true,
89 append: true, 89 append: true,
  90 + slotReady: false,
90 textareaStyles: {} 91 textareaStyles: {}
91 } 92 }
92 }, 93 },
@@ -161,6 +162,7 @@ @@ -161,6 +162,7 @@
161 this.prepend = false; 162 this.prepend = false;
162 this.append = false; 163 this.append = false;
163 } 164 }
  165 + this.slotReady = true;
164 this.resizeTextarea(); 166 this.resizeTextarea();
165 } 167 }
166 } 168 }
test/routers/cascader.vue
1 <template> 1 <template>
2 - 2 + <div style="margin: 150px;width:300px">
  3 + <Cascader></Cascader>
  4 + </div>
3 </template> 5 </template>
4 <script> 6 <script>
  7 + import { Cascader } from 'iview';
5 export default { 8 export default {
6 props: { 9 props: {
7 10