广告区

广告区


本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-07(5)

2021-08(73)

2021-09(65)

2021-10(105)

2021-11(87)

使用Element ui 编写登录页面

发布于2022-05-31 21:38     阅读(719)     评论(0)     点赞(23)     收藏(2)




1 完整引入element ui 

执行命令安装npm i element-ui -S

mian.js中 完整引入

  1. import Vue from 'vue';
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. import App from './App.vue';
  5. Vue.use(ElementUI);

2 登录页 login.vue

  1. <template>
  2. <div v-loading="loading" element-loading-text="登录中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)" class="login-container">
  3. <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
  4. <!-- 头像区域 -->
  5. <div v-if="TxStatus" class="avatar-box">
  6. <img src="../../assets/touxiang.jpg" alt="">
  7. </div>
  8. <div class="title-container">
  9. <h3 class="title">后台管理系统</h3>
  10. </div>
  11. <el-form-item prop="username">
  12. <span class="svg-container">
  13. <svg-icon icon-class="user" />
  14. </span>
  15. <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />
  16. </el-form-item>
  17. <el-form-item prop="password">
  18. <span class="svg-container">
  19. <svg-icon icon-class="password" />
  20. </span>
  21. <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
  22. <span class="show-pwd" @click="showPwd">
  23. <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
  24. </span>
  25. </el-form-item>
  26. <div>
  27. <el-button type="primary" style="width:100%;margin-bottom:20px;" @click.native.prevent="handleLogin">登录</el-button>
  28. </div>
  29. <div class="tips">
  30. <span style="margin-right:20px;">如果您还没有账号请先 <span style="color:#409EFF;cursor:pointer" @click="register">注册</span></span>
  31. </div>
  32. </el-form>
  33. </div>
  34. </template>
  35. <script>
  36. // 引入去除空格工具
  37. import { validUsername } from '@/utils/validate'
  38. export default {
  39. name: 'Login',
  40. data() {
  41. const validateUsername = (rule, value, callback) => {
  42. if (!validUsername(value)) {
  43. callback(new Error('用户名不能为空!'))
  44. } else {
  45. callback()
  46. }
  47. }
  48. const validatePassword = (rule, value, callback) => {
  49. if (value.length < 6) {
  50. callback(new Error('密码最少为6位字符!'))
  51. } else {
  52. callback()
  53. }
  54. }
  55. return {
  56. // 头像状态
  57. TxStatus: true,
  58. loginForm: {
  59. username: '',
  60. password: ''
  61. },
  62. // 登录规则
  63. loginRules: {
  64. username: [{ required: true, trigger: 'blur', validator: validateUsername }],
  65. password: [{ required: true, trigger: 'blur', validator: validatePassword }]
  66. },
  67. loading: false,
  68. passwordType: 'password',
  69. redirect: undefined
  70. }
  71. },
  72. watch: {
  73. $route: {
  74. handler: function(route) {
  75. this.redirect = route.query && route.query.redirect
  76. },
  77. immediate: true
  78. }
  79. },
  80. methods: {
  81. showPwd() {
  82. if (this.passwordType === 'password') {
  83. this.passwordType = ''
  84. } else {
  85. this.passwordType = 'password'
  86. }
  87. this.$nextTick(() => {
  88. this.$refs.password.focus()
  89. })
  90. },
  91. // 登录业务
  92. handleLogin() {
  93. this.$refs.loginForm.validate((valid) => {
  94. // 如果符合验证规则
  95. if (valid) {
  96. this.loading = true
  97. setTimeout(() => {
  98. this.$store.dispatch('user/login', this.loginForm).then(() => {
  99. this.$router.push({ path: this.redirect || '/' })
  100. this.loading = false
  101. }).catch(() => {
  102. this.loading = false
  103. })
  104. }, 1500)
  105. } else {
  106. console.log('error submit!!')
  107. return false
  108. }
  109. })
  110. },
  111. // 注册业务
  112. register() {
  113. console.log('123')
  114. this.$router.push({ name: 'register' })
  115. }
  116. }
  117. }
  118. </script>
  119. <style lang="scss">
  120. $bg: #283443;
  121. $light_gray: #fff;
  122. $cursor: #fff;
  123. @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  124. .login-container .el-input input {
  125. color: $cursor;
  126. }
  127. }
  128. .login-container {
  129. .el-input {
  130. display: inline-block;
  131. height: 47px;
  132. width: 85%;
  133. input {
  134. background: transparent;
  135. border: 0px;
  136. -webkit-appearance: none;
  137. border-radius: 0px;
  138. padding: 12px 5px 12px 15px;
  139. color: $light_gray;
  140. height: 47px;
  141. caret-color: $cursor;
  142. &:-webkit-autofill {
  143. box-shadow: 0 0 0px 1000px $bg inset !important;
  144. -webkit-text-fill-color: $cursor !important;
  145. }
  146. }
  147. }
  148. .el-form-item {
  149. border: 1px solid rgba(255, 255, 255, 0.1);
  150. background: rgba(0, 0, 0, 0.1);
  151. border-radius: 5px;
  152. color: #454545;
  153. }
  154. }
  155. </style>
  156. <style lang="scss" scoped>
  157. $bg: #2d3a4b;
  158. $dark_gray: #889aa4;
  159. $light_gray: #eee;
  160. .login-container {
  161. min-height: 100%;
  162. width: 100%;
  163. overflow: hidden;
  164. background: url(~@/assets/bg0.jpg);
  165. background-size: 100% 100%;
  166. // 头像
  167. .avatar-box {
  168. margin: 0 auto;
  169. width: 120px;
  170. height: 120px;
  171. border-radius: 50%;
  172. border: 1px solid #409eff;
  173. box-shadow: 0 0 10px #409eff;
  174. position: relative;
  175. bottom: 20px;
  176. img {
  177. width: 100%;
  178. height: 100%;
  179. border-radius: 50%;
  180. }
  181. }
  182. .login-form {
  183. position: relative;
  184. width: 520px;
  185. max-width: 100%;
  186. padding: 160px 35px 0;
  187. margin: 0 auto;
  188. overflow: hidden;
  189. }
  190. .tips {
  191. font-size: 18px;
  192. text-align: center;
  193. color: #000;
  194. margin-bottom: 10px;
  195. }
  196. .svg-container {
  197. padding: 6px 5px 6px 15px;
  198. color: $dark_gray;
  199. vertical-align: middle;
  200. width: 30px;
  201. display: inline-block;
  202. }
  203. .title-container {
  204. position: relative;
  205. .title {
  206. font-size: 30px;
  207. color: $light_gray;
  208. margin: 0px auto 40px auto;
  209. text-align: center;
  210. font-weight: 500;
  211. }
  212. }
  213. .show-pwd {
  214. position: absolute;
  215. right: 10px;
  216. top: 7px;
  217. font-size: 16px;
  218. color: $dark_gray;
  219. cursor: pointer;
  220. user-select: none;
  221. }
  222. }
  223. </style>

 element ui 中 使用v-loading 的加载效果

  

背景图如下 自取:

产生报错的原因可能如下

1  css预处理使用的是sass,可能没有安装

2  svg图标在vue中的使用,可能没有安装

3  去除空格的工具函数

src\utils\validate.js

  1. export function validUsername(str) {
  2. const valid_map = ['admin', 'editor']
  3. return valid_map.indexOf(str.trim()) >= 0
  4. }

原文链接:https://blog.csdn.net/weixin_44948981/article/details/123474222


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分






所属网站分类: 技术文章 > 博客

作者:前端霸主

链接:http://www.qianduanheidong.com/blog/article/361056/768376dbe3e3bcb15244/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

23 0
收藏该文
已收藏

评论内容:(最多支持255个字符)