「Element-UI 表单添加tooltip提示信息」

作者：System 时间：2024年08月27日分类：所有,elementui 字数：759

这篇文章距离上次修改已过246天，其中的内容可能已经有所变动。

在Element-UI中，可以通过在表单项中嵌套el-tooltip组件来实现表单项的提示信息（tooltip）。以下是一个简单的例子，展示了如何在一个Element-UI表单中为输入框添加tooltip提示信息：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-tooltip content="请输入用户名" placement="top" effect="light">
        <el-input v-model="form.username"></el-input>
      </el-tooltip>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        // 其他表单数据
      },
    };
  },
};
</script>

在这个例子中，我们创建了一个带有el-tooltip的el-input元素。el-tooltip的content属性设置了提示信息的文本，placement属性定义了提示信息的位置（这里是顶部），effect属性定义了提示信息的视觉效果（这里是浅色背景）。当用户将鼠标悬停在输入框上时，会显示出一个带有文本提示的小提示框。

「Element-UI 表单添加tooltip提示信息」

评论已关闭

推荐阅读