「Element-UI 表单添加tooltip提示信息」
在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
属性定义了提示信息的视觉效果(这里是浅色背景)。当用户将鼠标悬停在输入框上时,会显示出一个带有文本提示的小提示框。
评论已关闭