optimize Input shaking when it init
optimize Input shaking when it init
This commit is contained in:
parent
0a48ac45a4
commit
6ff31952a6
4 changed files with 78 additions and 8 deletions
|
@ -1,18 +1,81 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div :class="[prefixCls]">
|
||||||
|
<i-input
|
||||||
|
readonly
|
||||||
|
:disabled="disabled"
|
||||||
|
:value.sync="displayRender"
|
||||||
|
:size="size"
|
||||||
|
:placeholder="placeholder"></i-input>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import iInput from '../input/input.vue';
|
||||||
|
import Dropdown from '../select/dropdown.vue';
|
||||||
|
import clickoutside from '../../directives/clickoutside';
|
||||||
|
import { oneOf, MutationObserver } from '../../utils/assist';
|
||||||
|
|
||||||
|
const prefixCls = 'ivu-cascader';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: Array
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
clearable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请选择'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['small', 'large']);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: {
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['click', 'hover']);
|
||||||
|
},
|
||||||
|
default: 'click'
|
||||||
|
},
|
||||||
|
changeOnSelect: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
renderFormat: {
|
||||||
|
type: Function,
|
||||||
|
default: (label, selectedData) => {
|
||||||
|
label.join('/');
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
prefixCls: prefixCls,
|
||||||
|
selected: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
displayRender () {
|
||||||
|
let label = [];
|
||||||
|
for (let i = 0; i < this.selected.length; i++) {
|
||||||
|
label.push(this.selected[i].label);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.renderFormat(label);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,9 @@
|
||||||
props: {
|
props: {
|
||||||
model: {
|
model: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: []
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="wrapClasses">
|
<div :class="wrapClasses">
|
||||||
<template v-if="type !== 'textarea'">
|
<template v-if="type !== 'textarea'">
|
||||||
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-el:prepend><slot name="prepend"></slot></div>
|
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" v-el:prepend><slot name="prepend"></slot></div>
|
||||||
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
|
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
|
||||||
<input
|
<input
|
||||||
:type="type"
|
:type="type"
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
@keyup.enter="handleEnter"
|
@keyup.enter="handleEnter"
|
||||||
@focus="handleFocus"
|
@focus="handleFocus"
|
||||||
@blur="handleBlur">
|
@blur="handleBlur">
|
||||||
<div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div>
|
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" v-el:append><slot name="append"></slot></div>
|
||||||
</template>
|
</template>
|
||||||
<textarea
|
<textarea
|
||||||
v-else
|
v-else
|
||||||
|
@ -87,6 +87,7 @@
|
||||||
prefixCls: prefixCls,
|
prefixCls: prefixCls,
|
||||||
prepend: true,
|
prepend: true,
|
||||||
append: true,
|
append: true,
|
||||||
|
slotReady: false,
|
||||||
textareaStyles: {}
|
textareaStyles: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -161,6 +162,7 @@
|
||||||
this.prepend = false;
|
this.prepend = false;
|
||||||
this.append = false;
|
this.append = false;
|
||||||
}
|
}
|
||||||
|
this.slotReady = true;
|
||||||
this.resizeTextarea();
|
this.resizeTextarea();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div style="margin: 150px;width:300px">
|
||||||
|
<Cascader></Cascader>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import { Cascader } from 'iview';
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue