elementui文本

ElementUI 文本组件与功能

ElementUI 提供了多种文本相关的组件和功能，适用于表单、展示、交互等场景。以下是常见的文本相关组件及用法：

输入框（ElInput）

用于单行文本输入，支持多种状态和校验：

<el-input v-model="inputText" placeholder="请输入内容"></el-input>

• 属性：
  • type：支持 text（默认）、password、textarea（多行）等。
  • clearable：可清空内容。
  • maxlength：限制输入长度。

多行文本（ElInput type="textarea"）

适用于长文本输入：

<el-input type="textarea" :rows="4" v-model="longText"></el-input>

文本展示（ElText）

用于静态文本展示，支持换行和格式化：

<el-text type="primary">这是一段提示文本</el-text>

• 类型：primary / success / warning / danger / info。

富文本编辑器（第三方集成）

ElementUI 未内置富文本组件，但可集成如 vue-quill-editor：

<quill-editor v-model="richText"></quill-editor>

文本校验（结合 ElForm）

通过表单规则校验文本输入：

<el-form :rules="rules">
  <el-form-item prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

rules: {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符' }
  ]
}

国际化文本

ElementUI 支持多语言，通过 i18n 配置切换：

import lang from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale: lang });

文本工具函数

• 截断长文本：使用 el-tooltip 悬浮显示完整内容。
• 高亮关键词：通过 v-html 或自定义过滤器实现。

如需更复杂功能（如 Markdown 渲染），可结合第三方库（如 marked）使用。