elementplus组件文本框设置前缀

elementplus的文本框组件不支持设置前缀

作为一个合格的切图仔，只能另辟蹊径了
用的 绝对定位 + 缩进 达到效果

效果：

代码：

<template><div class="textarea textarea-prefix"><span ref="prefixRef" class="prefix">前缀</span><el-input v-model="title" type="textarea" :rows="2" lengthType="characterPunc" useMaxlengthError /></div>
</template><script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';const prefixRef = ref(null);
const prefixWidth = ref('');const title = ref('内容');onMounted(() => {nextTick(() => {prefixWidth.value = `${prefixRef.value?.offsetWidth || 0}px`;});
});
</script><style lang="scss" scoped>
.textarea {&.textarea-prefix {position: relative;.prefix {position: absolute;z-index: 1;height: 20px;line-height: 20px;padding: 0 5px;margin: 5px;color: #555;min-width: 20px;border-radius: 2px;background: #eef1f6;}:deep() {.el-textarea__inner {text-indent: v-bind('prefixWidth');}}}
}
</style>