关于element ui或plus中input框的基本使用

已于 2024-04-29 17:36:25 修改
阅读量352 收藏 1
点赞数 6
分类专栏： vue项目的开发 element UI 组件库 文章标签： 前端 vscode
于 2024-04-29 17:34:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78499522/article/details/138319916
版权
本文介绍了在开发项目中如何利用input[type=password]实现密码输入框的明文与密文切换，方法包括使用element的show-password属性和通过插槽配合SVG图标实现点击事件控制。
摘要由CSDN通过智能技术生成

在开发项目的过程中，经常会使用 input 框，这次讲解 input type="password"中的使用方法。

type="password" 时，内容显示密文

我们可以给他加一个小眼睛，来切换 type 类型。我们可以使用一下方法：

1、element 提供了 show-password 这个属性（直接放到 input 标签上），通过使用这个属性来解决明文和密文的来回切换。

2、可以使用 插槽来实现 element 也提供了

在插槽中 放入一个 svg 图片，来一个点击事件即可 

_lucky_boy
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element的input 实现带图标密码框的明密文（点击眼睛显示密码,再次点击图标隐藏密码）
ddx2019的博客
07-02 9812
<template> <div id="login"> <el-form ref="numberValidateForm" :model="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名" prop="username" > <el-input
vue项目实战之点击小眼睛实现input密码框内容显示与隐藏
yinzisang的博客
11-02 7809
实现思路：我用的是element ui，实现方法和html一样。 1、给右侧小眼睛设置一个点击事件，通过点击事件修改密码输入框<el-input>的：type属性，：type的值在data里设置一个passworedtype属性，进行双向绑定，值为password时密码是密文形式，值为空显示。 2当data中passwordtype值变化时，眼睛小图标根据值变换样式，根据三目运算符。 3在点击事件方法使用this.$nextTick重新渲染dom元素 具体代码: <e
input的type类型password 密码，jquery点击如何显示密码，查看是否正确
最新发布
qq_39951524的博客
05-13 334
input的type类型password 密码,jquery点击如何显示密码,查看是否正确 要实现点击时显示密码，可以使用jQuery来监听输入框的点击事件，并根据需要切换输入框的类型从而实现密码的显示和隐藏。以下是一个简单的实现示例：
使用svg实现input输入框边缘动画（令人舒服）
幻日のヨハネ
08-23 2492
效果 实现 基本框架 先做一个 div 用来放边缘动画的 svg 和 label + input ： HTML <div class="text"> <div class="border"> <svg> ... </svg> </div> <label>请输入内容</label> <input value=""> </div> CSS /* 零边距
解决使用elementUI密码输入框自带属性show-password出现的问题
handsome_man__的博客
06-09 2857
前提：浏览器有缓存密码 场景：一个el-form里面有一个时间框el-date-picker和一个密码框el-input，密码框使用show-password 问题：当选择缓存密码时，同时有用户名和密码，会自动打开el-date-picker选择器，这只是举个例子，当然，如果密码框上个结构都有可能影响到 解决办法：用多个el-form包裹这些组件就行，el-form互不影响...
input[type=”password”] 输入框阻止chrome浏览器弹出用户名密码下拉框提示
wdm891026的博客
05-11 6987
一、现象： 框架： angular 环境：chrome最新版 谷歌浏览器记住密码后，输入框为 password 类型时，就会自动展示已经保存的用户名密码列表； 如下图所示： 代码如下： <!-- 登录密码输入框代码 --> <input nz-input [placeholder]="'Please input the password' | translate" formControlName="password" type="password" /> ...
vue3+Element-Plus密码框小眼睛显示
m0_66879773的博客
01-22 1292
思路：给输入框右侧一个插槽，内容为icon图标，通过点击图标控制输入框的类型来达到密码显示与否的效果。
element设置密码显隐
chengchenghcc的博客
04-05 344
element ui 设置密码显隐 input框中输入： show-password
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split...
element-ui.rar
05-07
在实际使用中，Element UI 可以通过 npm 安装： ```bash npm install element-ui -S ``` 然后在 Vue 项目中导入并使用： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import '...
vue+element 模态框表格形式的可编辑表单实现
10-16
在Vue.js框架中，Element UI库提供了一套丰富的UI组件，其中包括模态框（Modal）和表格（Table），这些组件可以方便地构建出各种交互式的用户界面。在本例中，我们将探讨如何利用Vue和Element UI来实现一个模态框内...
显示密码「Show Password」-crx插件
03-20
显示密码 通过此扩展，您可以选择查看密码字段中输入的内容，而不是查看点。每个可以单击的密码字段旁边都会显示一个链接，以显示输入的密码。 支持语言:English
element-ui tree结构实现增删改自定义功能代码
10-14
在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的...
element input-number 默认值设置为空
02-26
element input-number 当值传入的为''时，默认显示为0，有些情况我们不希望显示0，而是显示为空，针对这种情况我们对element input-number的源码做了兼容处理
ElementUI基础使用
代码包工头的博客
04-18 971
vue-cli + ElementUI 安装使用 { 1.安装: npm i elmentui -S: 是--save的简写，表示 这个包是**生产依赖**。 就是项目上线 也要使用的。-S: 是可以省略不写的。 如果要安装开发依赖，则要加 -D。 2.在main.js中使用 => 快捷键:Ctrl + p (快速定位文件 3.在官网上 Ctrl + c , Ctrl + v 操作) } ElementUI常用组件 一:table{ 1.表格 2.整体数据是数组,每个元素是对象
element-plus 使用密码输入框的自定义图标
weixin_45288172的博客
11-29 960
element-plus 使用密码输入框的自定义图标
前端基础+UI自动化测试元素定位方式
MRJJ_9的博客
07-24 369
UI自动化测试基础
vue Element-Ui 简单实现输入框密码的显示与隐藏
热门推荐
qq_48701993的博客
04-13 1万+
一、效果如下： element-ui 简单实现密码输入框的显示与隐藏 二、实现代码： 只需要在输入框代码中添加 show-password ，然后在你输入密码时会自动出现眼睛图标，点击图标就可以显示和隐藏密码。 <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.passWord" show
input输入框支持明文暗文切换
nunumaymax的博客
03-14 297
我们通常实现密码框的时候会直接使用 input ,设置它的 type 为 password，如果要实现明文和暗文的切换，实际上就是 type=“text” 和 type="password"的切换。
element ui plus select
08-30
Element UI Plus的Select组件是基于Element UI的Select组件进行增强和扩展的。它提供了更多的功能和定制选项。 在Element UI Plus的Select组件中，可以通过设置`teleported`属性为`false`，将下拉框插入到父级元素中而不是body元素下。示例代码如下： ```html <el-select class="search-select" v-model="queryParams.exceptionType" placeholder="选择工作状态" :suffix-icon="IconDropDown" clearable :fit-input-width="true" popper-class="search-select-option" :teleported="false"> <el-option label="正常" value="0"></el-option> <el-option label="异常" value="1"></el-option> </el-select> ``` 同时，可以通过自定义样式来修改Select组件的外观和弹层位置。示例样式代码如下： ```css /* el-select 自定义样式（用于选择框） */ .search-select { .el-input__wrapper { border-radius: 8px; height: 44px; padding: 0 10px 0 10px; } .el-input__suffix-inner > :first-child { margin: 0; width: 32px; height: 44px; } .el-popper { top: 46px !important; } } .search-select-option { box-shadow: none !important; border-radius: 8px; .el-select-dropdown { border: 1px solid #147AFC !important; box-shadow: none !important; border-radius: 8px; } .el-select-dropdown__item { padding: 0; margin: 0 16px; height: 39px; line-height: 39px; border-bottom: 1px solid #E8EBF0; color: #84878D; font-size: 16px; font-family: 'AlibabaPuHuiTi-2-55-Regular'; font-weight: normal; } .el-select-dropdown__item:last-child { border-bottom: none; } .el-select-dropdown__list { margin: 9px 0 !important; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background-color: transparent; } .el-select-dropdown__item.selected { color: #147AFC; } } ``` 通过这样的设置和样式修改，可以实现对Element UI Plus的Select组件的定制化需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [element-plus修改el-select下拉框的位置](https://blog.csdn.net/qq_43651168/article/details/130712253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解为element-ui的Select和Cascader添加弹层底部操作按钮](https://download.csdn.net/download/weixin_38544781/12928496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值