广州东莞高坎疫情最新消息seo团队管理系统
去github上看 element-ui的 issues,发现2020年就有这个 pr,但是我的这个版本(2.15.14)好像是没有,秉承着不行就自己加的原则,自己写了一个,代码如下:
<template><span class="text-input"><el-inputv-bind="$attrs"v-model="modelValue"type="textarea"@blur="onBlur()"@focus="onFocus()"v-on="$listeners"/><span v-if="clearable && showClearIcon && modelValue" class="clear-area"><iclass="el-icon-circle-close clear-button"@click="handleClear"@mousedown.prevent></i></span></span>
</template>
<script>
export default {name: "TextArea",model: {value: "value",event: "change",},props: {value: {type: [String, Number],default: "",},clearable: {type: Boolean,default: true,},},data() {return {modelValue: "",showClearIcon: false,};},created() {this.modelValue = this.value;},watch: {modelValue(val) {this.$emit("change", val);},},methods: {onBlur() {this.showClearIcon = false;},onFocus() {this.showClearIcon = true;},handleClear() {this.modelValue = "";this.$emit("change", "");},},
};
</script><style lang="scss" scoped>
.text-input {display: inline-block;position: relative;box-sizing: border-box;.clear-area {position: absolute;border-radius: 5px;top: 0;bottom: 0;right: 0;z-index: 2;width: 25px;display: flex;align-items: center;}.clear-button {border: none;cursor: pointer;color: #ccc;}.clear-button:hover {color: #878d99;}
}::v-deep .el-textarea__inner {padding-right: 30px;
}
</style>