element-ui 制作登录界面，记住密码功能，账号密码自动填冲解决办法

最新推荐文章于 2021-11-17 10:24:45 发布

一只小泰迪

最新推荐文章于 2021-11-17 10:24:45 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_38644630/article/details/112133457

版权

element-ui 制作登录界面，记住密码功能，账号密码自动填冲解决办法

 <el-input
   v-model.trim="loginForm.password"
   prefix-icon="el-icon-unlock"
   :placeholder="$t('lang.password')"
    @input="change($event)"
   type="password"
   auto-complete

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只小泰迪

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Element-UI-的登录页面_用户名栏与其他栏---Element-UI工作笔记005

添柴程序猿的专栏

02-24

900

然后我们再去看这个登录页面的制作,我们在elementui中找到一个密码框下面有代码. 注意因为这个ui学习起来特别的简单,所以,有很多地方可能会一笔带过了.. 然后我们先把上面的用户名,这个el-form-item copy一份过来然后把用户名之类的都改成密码,然后我们把之前我们看到到elementui官网上找到的那个好看的密码框,拿过来,然后替换以前的注意这里的这个v-model一定要修改,改成ValidateForm.password 然后把原来的那个nameVali..

前端vue+elementUI如何实现记住密码功能

01-18

我们这回使用纯前端保存密码既然是记住密码，前端也就是使用cookie保存，访问时用cookie读取先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在[removed]中存放着，是一个字符串，里面的cookie以分号和空格分隔。就像这样： key1=value1; key2=value2; key3=value3 // 使用[removed] 来获取所有cookie docuemnt.cookie = id=+value 操作cookie /** * 设置cookie值 * * @param {String} na

参与评论您还未登录，请先登录后发表或查看评论

前端vue+elementUI记住密码功能

mingze6576的博客

01-03

4133

既然是记住密码，前端也就是使用cookie保存，访问时用cookie读取先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在document.cookie中存放着，是一个字符串，里面的cookie以分号和空格分隔。就像这样： "key1=value1; key2=value2; key3=value3" // 使用document.cookie 来获取所有cookie...

element ui登录界面_第一个 ElementUI 页面 (登录页)

weixin_39801475的博客

12-21

2608

本节视频目录结构在源码目录中创建如下结构：assets：用于存放资源文件components：用于存放 Vue 功能组件views：用于存放 Vue 视图组件router：用于存放 vue-router 配置创建视图创建首页视图在 views 目录下创建一个名为 Main.vue 的视图组件；该组件在当前章节无任何作用，主要用于登录后展示登录成功的跳转效果；首页export default {na...

ElementUI 登录页

06-17

最基础的ElementUI -登录页,适合新手查看，下载后运行npm install npm run dev然后访问http://localhost:8080/#/login就可以看到登录页面

elmentui的短信验证界面_vue+element-ui集成随机验证码+用户名+密码的form表单验证功能...

weixin_39829236的博客

12-19

1030

在登入页面，我们往往需要通过输入验证码才能进行登入，那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能第一步：自定义一个生产随机验证码的组件，其本质是使用canvas绘制，详细代码如下：export default {name: 'SIdentify',props: {identifyCode: {type: String,default: '1234'},fontSize...

vue 2.0项目中如何引入element-ui详解

08-29

在Vue 2.0项目中引入Element-UI是提高应用界面美观度和用户体验的一个常见步骤。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件，如表格、按钮、通知等，用于快速构建现代化的企业级前端界面。本文...

【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面

热门推荐

YK菌的博客

03-11

1万+

文章目录0. 项目介绍电商管理系统（Element-UI）前端技术栈后端技术栈1. 配置前端项目① 安装 Vue 脚手架② 通过 Vue 脚手架创建项目③ 配置 Vue 路由④ 配置 Element-UI 组件库⑤ 配置 axios 库⑥ 初始化 git 远程仓库⑦ 将本地项目托管到 Github 或码云中2. 配置后端接口① 安装 MySQL 数据库② 安装 Node.js 环境③ 配置项目相关信息④ 启动项目⑤ 使用 Postman 测试后台项目接口是否正常3. 登录/退出功能3.1 登录业务流程3

elementui登录界面的详细介绍

qq_45902401的博客

11-17

3127

vue登录界面-elementplus 1.效果 2.代码 <template> <!-- 一获取页面dom元素 <p ref="content">ref可以作为唯一标识</p> <button @click="hint">提示</button> methods:{ hint(){ console.log(this.$refs.content); console.log(this.$refs

element框架实现的登录界面

04-20

有两个输入框和一个提交按钮，一个输入用户名，另一个输入密码，点击提交按钮后发起一个 post 请求到 http://www.baidu.com

Vue + Element-UI 记住用户名和密码到Cookie

a12hhhe的博客

05-11

1900

参考链接https://www.cnblogs.com/nxmin/p/8386031.html 实现功能： 1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内 2.不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号.

vue+element-ui 记住密码

qq_1307495的博客

04-19

1750

实现，勾选多选框记住密码实现思路是判断是否点击记住密码，点击就将账户和密码写到cookie中，设置存储时间，下次登录就会自动记住密码点击登录按钮就可以登录，若未选择记住密码，则不会记住密码记住一点：密码和账户需要加密保存，保证安全。 <el-checkbox v-model="checked" class="font-16 text-green hk-cursor">记住密码&lt...

element-ui+vue2.0 实现登录并实现一周內记住密码

qq_37473645的博客

10-19

8019

1.文件目录 2.主页index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&

vue+elementUl实现登录记住密码功能

吴小花的博客

11-27

3882

效果思路：采用cookie保存账户和密码。如果勾选了记住密码，将用户名和密码保存在cookie中，设置cookie中数据保存的时间，过期清除cookie保存的值，每次新登录的时候，获取本地保存的cookie值。代码解析： <el-input>标签加show-password可以控制密码的显示和隐藏 <el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox> 通过.

解决 element-ui input=password 在浏览器会自动填充密码的问题

lianwenxiu的博客

11-10

1055

看了几种方案都号称完美但不能完美解决问题后发现其根本原因是input type=password时浏览器会自动填充解决方法是通过使用input type=text 修改css属性达到预期效果 ``` <el-input type="text" class="no-autofill-pwd" .........> .no-autofill-pwd { /deep/ .el-input__inner { -webkit-text-security:disc!im...

elementui实现登录页面效果及验证

LLL_liuhui的博客

03-20

7195

1.当前页面 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input type="text" ...

element-ui中使用el-step步骤条实现忘记密码功能

小柠檬爱编程

07-13

2324

效果图步骤条的使用比较简单,下面这是element官网的用法,我直接用代码展示如下: html: <template> <div class="page-container"> <div> <div class="title-img-wr"> <img src="../../assets/images/login/title.png" alt=""> </div>

一个简约的element-ui的登陆页面

最新发布

09-10

### 回答1：好的，这是一个简单的 element-ui 登录页面的示例： ``` <template> <div class="login-container"> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleLogin">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } } }, methods: { handleLogin() { this.$refs.form.validate((valid) => { if (valid) { // 发送登录请求 // ... } else { console.log('表单验证失败') } }) } } } </script> <style> .login-container { width: 400px; margin: 100px auto; } </style> ``` 这个示例使用了 element-ui 的表单组件 `el-form`，表单项组件 `el-form-item`，输入框组件 `el-input` 和按钮组件 `el-button`。它还使用了表单校验功能，在用户点击登录按钮时会对表单进行验证，如果验证通过则发送登录请求，否则会在控制台输出一条 ### 回答2：一个简约的element-ui的登陆页面是一个具有简洁设计，功能齐全的用户登陆界面。该页面使用element-ui的组件和样式，提供了用户输入用户名和密码进行登陆的功能。下面是页面的主要特点： 1. 页面布局简洁：登陆页面采用简约的设计风格，通过精心选择的颜色和排版，让用户界面看起来清爽且专业。 2. 响应式设计：该页面会根据用户设备的不同自动调整布局，确保在各种屏幕尺寸下都能提供良好的用户体验。 3. 友好的表单验证：输入框会实时检查用户的输入，并提供相应的错误信息，帮助用户避免常见的输入错误。 4. 忘记密码功能：在登陆表单下方提供了忘记密码的链接，点击后会跳转到密码重置页面，让用户便捷地找回密码。 5. 社交媒体登陆：登陆页面提供了使用社交媒体账号（如微信、QQ等）快速登陆的选项，让用户无需记住繁琐的用户名密码即可登陆。 6. 登陆按钮状态反馈：在用户输入了有效的用户名和密码后，登陆按钮会变成可点击状态，点击后会校验用户信息并进行相应的登陆操作。 7. 用户注册链接：在登陆框下方提供了用户注册的链接，点击后用户可以跳转到注册页面进行新用户的注册。总之，一个简约的element-ui的登陆页面通过清晰的布局、良好的用户体验和功能齐全的特点，为用户提供了方便快捷的登陆界面。