drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Input

Browse source 
support Input
This commit is contained in:
梁灏 2017-03-01 15:23:12 +08:00
parent d47ea998d6
commit fc7ef07216
6 changed files with 62 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/input/input.vue
View file

@ -1,9 +1,11 @@
<template>
<div :class="wrapClasses">
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" v-el:prepend><slot name="prepend"></slot></div>
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" ref="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 ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-else transition="fade"></i>
<transition name="fade">
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
</transition>
<input
:type="type"
:class="inputClasses"
@ -12,17 +14,17 @@
:maxlength="maxlength"
:readonly="readonly"
:name="name"
v-model="value"
:value="currentValue"
:number="number"
@keyup.enter="handleEnter"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange">
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" v-el:append><slot name="append"></slot></div>
@input="handleInput">
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" ref="append"><slot name="append"></slot></div>
</template>
<textarea
v-else
v-el:textarea
ref="textarea"
:class="textareaClasses"
:style="textareaStyles"
:placeholder="placeholder"
@ -31,11 +33,11 @@
:maxlength="maxlength"
:readonly="readonly"
:name="name"
v-model="value"
:value="value"
@keyup.enter="handleEnter"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange">
@input="handleInput">
</textarea>
</div>
</template>
@ -55,8 +57,7 @@
},
value: {
type: [String, Number],
default: '',
// twoWay: true
default: ''
},
size: {
validator (value) {
@ -97,6 +98,7 @@
},
data () {
return {
currentValue: this.value,
prefixCls: prefixCls,
prepend: true,
append: true,
@ -146,11 +148,24 @@
},
handleBlur () {
this.$emit('on-blur');
this.$dispatch('on-form-blur', this.value);
// todo 事件
// this.$dispatch('on-form-blur', this.currentValue);
},
handleChange (event) {
handleInput (event) {
const value = event.target.value;
this.$emit('input', value);
this.setCurrentValue(value);
this.$emit('on-change', event);
},
setCurrentValue (value) {
if (value === this.currentValue) return;
this.$nextTick(() => {
this.resizeTextarea();
});
this.currentValue = value;
// todo 事件
// this.$dispatch('on-form-change', value);
},
resizeTextarea () {
const autosize = this.autosize;
if (!autosize || this.type !== 'textarea') {
@ -160,30 +175,24 @@
const minRows = autosize.minRows;
const maxRows = autosize.maxRows;
this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
},
init () {
if (this.type !== 'textarea') {
this.prepend = this.$els.prepend.innerHTML !== '';
this.append = this.$els.append.innerHTML !== '';
} else {
this.prepend = false;
this.append = false;
}
this.slotReady = true;
this.resizeTextarea();
this.textareaStyles = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
}
},
watch: {
value () {
this.$nextTick(() => {
this.resizeTextarea();
});
this.$dispatch('on-form-change', this.value);
value (val) {
this.setCurrentValue(val);
}
},
compiled () {
this.$nextTick(() => this.init());
mounted () {
if (this.type !== 'textarea') {
this.prepend = this.$slots.prepend !== undefined;
this.append = this.$slots.append !== undefined;
} else {
this.prepend = false;
this.append = false;
}
this.slotReady = true;
this.resizeTextarea();
}
};
</script>

3
src/index.js
View file

@ -17,7 +17,7 @@ import Button from './components/button';
// import Dropdown from './components/dropdown';
// import Form from './components/form';
import Icon from './components/icon';
// import Input from './components/input';
import Input from './components/input';
// import InputNumber from './components/input-number';
// import LoadingBar from './components/loading-bar';
// import Menu from './components/menu';
@ -73,6 +73,7 @@ const iview = {
// Collapse,
Icon,
// iInput: Input,
Input,
// InputNumber,
// LoadingBar,
// Menu,