el-form-item表单label添加提示图标
在Element UI中,可以通过插入一个带有图标的span
元素到el-form-item
的label
中来实现这个需求。以下是一个简单的示例代码:
<template>
<el-form>
<el-form-item label="用户名">
<span>用户名</span>
<i class="el-icon-question"></i>
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: ''
}
};
}
};
</script>
<style>
.el-icon-question {
margin-left: 5px; /* 图标与文字间隔 */
cursor: pointer; /* 鼠标悬停时显示指针形状 */
}
</style>
在这个例子中,我们使用了Element UI提供的一个内置图标类el-icon-question
,并通过span
和i
标签将其插入到el-form-item
的label
中。图标会显示在用户名文本旁边,并且当鼠标悬停时显示指针形状。你可以根据需要替换el-icon-question
为其他Element UI提供的图标类。
评论已关闭