2020-08-26

最新推荐文章于 2024-11-04 09:16:49 发布

原创最新推荐文章于 2024-11-04 09:16:49 发布 · 831 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #vue.js

本文介绍在ElementUI表单中，通过简单的CSS技巧，在必填项前快速添加红色星号，以增强表单的视觉提示效果。

@TOCelement UI表单中如何快速实现在必填项label前添加红色星号

element UI表单不添加rules时，快速在必填项label前添加 $\color{red}{*}$

element UI表单在必填项label前添加红色星号有很多方法，本文是针对只想在必填项前添加红色星号起到提示作用时的一种快速且便捷的方式。

以用户信息为例

以用户信息为例，如下图所示：

从图中可以发现，除了邮箱，其他项皆为必填信息。

第一步：表单实现

 <el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="姓名：">
          <el-input style="width: 300px" placeholder="请输入姓名" v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input style="width: 300px" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" >
          <el-input style="width: 300px" placeholder="请输入邮箱" v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input style="width: 300px" placeholder="请输入手机号" v-model="form.phone"></el-input>
      </el-form>

此时未进行CSS样式修改，结果如下图所示：
[user_demo]

第二步：为表单条目前添加 $\color{red}{ *}$

只需在css样式中添加：

/deep/ .el-form-item__label:before {
  content: "* ";
  color: red;
}

添加必填项红色星号
从上图可以发现，当添加完这个样式后，所有条目中都添加了红色星号。

第三步：去除非必填项前的 $\color{red}{ *}$

在css文件中添加emailClass：

.emailClass {
  /deep/ .el-form-item__label:before {
    content: " ";
    // color: red;
  }
}

将 $\color{red}{非必填项的条目样式设置为该类即可}$ ，对于本实例中邮箱为非必填项，即：

 <el-form-item label="邮箱：" class="emailClass">
          <el-input style="width: 300px" placeholder="请输入邮箱" v-model="form.email"></el-input>
 </el-form-item>