2016-08-01 05:45:40 +00:00
|
|
|
<template>
|
|
|
|
|
<textarea
|
|
|
|
|
class="md-input"
|
2016-11-14 05:33:04 +00:00
|
|
|
:value="value"
|
2016-08-01 05:45:40 +00:00
|
|
|
:disabled="disabled"
|
2016-11-14 05:33:04 +00:00
|
|
|
:required="required"
|
|
|
|
|
:placeholder="placeholder"
|
|
|
|
|
:maxlength="maxlength"
|
2016-08-01 05:45:40 +00:00
|
|
|
@focus="onFocus"
|
|
|
|
|
@blur="onBlur"
|
|
|
|
|
@input="onInput"></textarea>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import autosize from 'autosize';
|
2016-11-14 05:33:04 +00:00
|
|
|
import common from './common';
|
|
|
|
|
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
2016-08-02 05:05:32 +00:00
|
|
|
|
2016-08-01 05:45:40 +00:00
|
|
|
export default {
|
2016-11-14 05:33:04 +00:00
|
|
|
mixins: [common],
|
2016-12-08 11:57:24 +00:00
|
|
|
watch: {
|
|
|
|
|
value() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
autosize.update(this.$el);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
2016-08-31 22:20:23 +00:00
|
|
|
mounted() {
|
2016-11-14 05:33:04 +00:00
|
|
|
this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
|
|
|
|
|
|
|
|
|
|
if (!this.parentContainer) {
|
2016-08-02 04:20:35 +00:00
|
|
|
this.$destroy();
|
|
|
|
|
|
|
|
|
|
throw new Error('You should wrap the md-textarea in a md-input-container');
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-14 05:33:04 +00:00
|
|
|
this.setParentDisabled();
|
|
|
|
|
this.setParentRequired();
|
|
|
|
|
this.setParentPlaceholder();
|
|
|
|
|
this.setParentValue();
|
|
|
|
|
this.handleMaxLength();
|
2016-08-01 05:45:40 +00:00
|
|
|
|
|
|
|
|
if (!this.$el.getAttribute('rows')) {
|
|
|
|
|
this.$el.setAttribute('rows', '1');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
autosize(this.$el);
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
autosize.destroy(this.$el);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|