Vue package textarea code
<template>
<div class="paper-textarea-warpper">
<textarea
class="paper-textarea"
:placeholder="placeholder"
:rows="4"
:value="textAreaValue"
:maxlength="maxlength"
@input="getTextAreaValue"
/>
<div class="paper-length-maxlength">
<span>{
{
length }}</span> / <span>{
{
maxlength }}</span>
</div>
</div>
</template>
<script>
export default {
props: {
placeholder: {
type: String,
default: '请输入内容',
},
value: {
type: [String, undefined],
default: undefined,
},
maxlength: {
type: [Number],
default: 300,
},
},
data() {
return {
textAreaValue: this.value,
length: this.value?.length || 0,
};
},
methods: {
getTextAreaValue(e) {
const event = e || window.event;
const target = event.srcElement || event.taget;
this.length = target.value.length;
if (length <= this.maxlength) {
this.textAreaValue = target.value;
}
this.$emit('change', this.textAreaValue);
},
},
};
</script>
<style lang="less">
.paper-textarea-warpper {
position: relative;
padding: 10px 10px 24px 10px;
background-color: #fafafa;
border-radius: 4px;
.paper-length-maxlength {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 13px;
color: #bababa;
}
}
.paper-textarea {
border: none;
width: 100%;
background-color: #fafafa;
/** 禁止textarea拉伸 */
resize: none;
/* WebKit, Blink, Edge */
&::-webkit-input-placeholder {
color: #bababa;
}
/* Mozilla Firefox 4 to 18 */
&:-moz-placeholder {
color: #bababa;
}
/* Mozilla Firefox 19+ */
&::-moz-placeholder {
color: #bababa;
}
/* Internet Explorer 10-11 */
&:-ms-input-placeholder {
color: #bababa;
}
}
</style>
How to use
<template>
<scf-input-textarea :value="inputValue" @change="onInputValueChange" />
</template>
<script>
import PaperTextArea from '@/components/paper-textarea/paper-textarea';
export default {
name: 'PaperUi',
components: {
'scf-input-textarea': PaperTextArea,
},
data() {
return {
inputValue: '测试用值',
};
},
methods: {
onInputValueChange(value) {
this.inputValue = value;
},
},
};
</script>
