elementui 文本

### ElementUI 文本组件使用方法

ElementUI 提供了多种用于文本处理和展示的组件，其中最常用的当属 `el-input` 和 `el-tooltip` 组件。这些组件不仅能够满足基本的文字输入需求，还支持更多高级功能。

#### 输入框 (el-input)

`el-input` 是一个非常灵活的文本输入控件，适用于各种场景下的文字录入操作[^1]。

<template>
  <div class="demo-input-suffix">
    基础用法：
    <el-input v-model="input" placeholder="请输入内容"></el-input>

    密码框：
    <el-input type="password" v-model="pwd" autocomplete="off" placeholder="密码"></el-input>

    可清除：
    <el-input clearable v-model="clearInput" placeholder="可清空的内容"></el-input>
    
    禁用状态：
    <el-input disabled v-model="disabledValue" placeholder="禁用状态"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      pwd: '',
      clearInput: '',
      disabledValue: '默认值'
    };
  }
};
</script>

此代码展示了如何创建不同类型的输入框，包括基础输入框、密码框、带有清除按钮的输入框以及处于禁用状态的输入框[^4]。

#### 工具提示 (el-tooltip)

对于需要提供额外信息的情况，可以考虑使用 `el-tooltip` 来增强用户体验。该组件允许用户通过悬停来查看更详细的描述或帮助信息。

<div style="margin-bottom: 20px;">
  将鼠标放置于图标上以显示工具提示：
  <span>鼠标放在右边 -></span>
  <el-tooltip content="右侧弹出内容" placement="right">
    <i class="el-icon-question"></i>
  </el-tooltip>
</div>

这段HTML片段定义了一个简单的工具提示实例，当用户的光标移到问号图标上方时会显示出指定的消息[^3]。