elementplus组件文本框设置前缀

最新推荐文章于 2025-08-24 20:04:40 发布

原创最新推荐文章于 2025-08-24 20:04:40 发布 · 306 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

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>