elementui文本
ElementUI 文本组件
ElementUI 提供了多种文本相关的组件,用于展示和处理文本内容。以下是一些常用的文本组件及其用法:
文本展示组件
el-text 用于展示普通文本,支持自定义样式和格式化。
<el-text type="primary">主要文本</el-text>
<el-text type="success">成功文本</el-text>
<el-text type="warning">警告文本</el-text>
<el-text type="danger">危险文本</el-text>
<el-text type="info">信息文本</el-text>
el-link 用于展示链接文本,支持点击事件和路由跳转。
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>
文本输入组件
el-input 用于单行文本输入,支持多种类型和验证。
<el-input v-model="input" placeholder="请输入内容"></el-input>
el-input-number 用于数字输入,支持步进和范围限制。
<el-input-number v-model="num" :min="1" :max="10"></el-input-number>
el-autocomplete 提供输入建议的文本输入框。
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
富文本编辑器
el-editor 基于 Quill 的富文本编辑器,支持多种格式和自定义工具栏。
<el-editor v-model="content" :config="editorConfig"></el-editor>
代码高亮
el-highlight 用于展示代码块,支持语法高亮。
<el-highlight :code="codeString" lang="javascript"></el-highlight>
文本格式化
ElementUI 还提供了一些过滤器(filters)用于文本格式化,例如日期格式化、货币格式化等。
<span>{{ date | formatDate }}</span>
以上是 ElementUI 中常用的文本相关组件和功能,可以根据具体需求选择合适的组件进行文本展示和处理。







