el-form-item密码隐藏

要在 `el-form-item` 中隐藏密码，你可以使用 `el-input` 组件并将其 `type` 属性设置为密码类型。例如：

<el-form-item label="密码">
  <el-input type="password" v-model="password"></el-input>
</el-form-item>

这将在表单中创建一个带有密码输入框的表单项，并将用户输入的密码隐藏为星号。

相关问题

el-form-item点眼睛显示密码

如果你想在 `el-form-item` 中添加一个“显示/隐藏密码”按钮，让用户可以轻松地切换密码输入框的可见性，可以使用 `el-input` 组件的 `show-password` 属性和 `append` 插槽。

具体的实现步骤如下：

1. 在 `el-form-item` 中使用 `el-input` 组件，并将其 `type` 属性设置为密码类型，同时将其 `v-model` 绑定到你的数据模型中。

<el-form-item label="密码">
  <el-input type="password" v-model="password"></el-input>
</el-form-item>

2. 在 `el-input` 组件中添加 `show-password` 属性，以启用“显示/隐藏密码”按钮。

<el-form-item label="密码">
  <el-input type="password" v-model="password" show-password></el-input>
</el-form-item>

3. 在 `el-input` 组件中使用 `append` 插槽创建一个按钮，当点击该按钮时，可以切换密码输入框的可见性。

<el-form-item label="密码">
  <el-input type="password" v-model="password" show-password>
    <template v-slot:append>
      <i class="el-icon-view" v-show="!showPassword" @click="showPassword = true"></i>
      <i class="el-icon-view-off" v-show="showPassword" @click="showPassword = false"></i>
    </template>
  </el-input>
</el-form-item>

4. 在你的组件中定义一个 `showPassword` 变量，并在点击按钮时切换它的值。

data() {
  return {
    password: '',
    showPassword: false
  }
}

这样，当用户点击“显示密码”按钮时，密码输入框将变为文本输入框，用户可以轻松地查看密码。而当用户再次点击该按钮时，密码输入框将再次变为密码输入框。

/* 全局css变量 */ $--color-primary: #409EFF; .primary-color { color: #409EFF; } .background-opacity { background: rgba(64, 158, 255, 0.6); } .form-widget-list { .ghost{ content: ''; font-size: 0; height: 3px; box-sizing: border-box; background: #409EFF; border: 2px solid #409EFF; outline-width: 0; padding: 0; overflow: hidden; } } .el-form-item--medium { .el-radio { line-height: 36px !important; } .el-rate{ margin-top: 8px; } } .el-form-item--small { .el-radio { line-height: 32px !important; } .el-rate{ margin-top: 6px; } } .el-form-item--mini { .el-radio { line-height: 28px !important; } .el-rate{ margin-top: 4px; } } .el-card { margin-top: 3px; margin-bottom: 3px; } input[type="password"]::-ms-reveal { /* 隐藏IE/Edge原生的密码查看按钮 */ display: none; } /* 滚动条样式 begin */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { width: 8px; background: rgba(#101F1C, 0.1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { background-color: rgba(#101F1C, 0.35); background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(#101F1C, 0.85); } * {//Firefox浏览器滚动条样式 scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色 scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失 } /* body {//IE浏览器滚动条样式 scrollbar-shadow-color: #e5e5e5; scrollbar-face-color: #e5e5e5; scrollbar-base-color: #ffffff; scrollbar-arrow-color: #444040; } */ /* 滚动条样式 end */

这段代码定义了一些全局的 CSS 变量和样式，包括：

- 定义了一个名为 `$--color-primary` 的全局 CSS 变量，其值为 `#409EFF`。
- 定义了一个名为 `.primary-color` 的样式类，将其文本颜色设置为 `$--color-primary` 定义的颜色。
- 定义了一个名为 `.background-opacity` 的样式类，将其背景色设置为带有 60% 不透明度的蓝色。
- 定义了一个名为 `.form-widget-list` 的样式类，其中包含了一个名为 `.ghost` 的子样式类，将其高度设置为 3 像素，颜色设置为 `$--color-primary` 定义的颜色，边框为 2 像素宽的 `$--color-primary` 定义的颜色。
- 定义了 `.el-form-item--medium`、`.el-form-item--small` 和 `.el-form-item--mini` 三个样式类，分别对应中、小、迷你三种表单元素大小，对其内部的单选框和评分控件进行了样式调整。
- 定义了 `.el-card` 样式类，将其上下 margin 值设置为 3 像素。
- 定义了一些滚动条的样式，包括滚动条宽度、颜色等等。其中包括针对不同浏览器的样式设置。