vue实现登录界面 |
您所在的位置：网站首页 › word制作网页登录界面制作 › vue实现登录界面 |
vue实现登录界面
|
使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示：
HTML部分： 登录 登录 忘记密码? | 注册新账号JS部分 import { mapMutations } from "vuex"; export default { name: "Login", data: function () { return { loginForm: { account: "", passWord: "", }, loginRules: { account: [{ required: true, message: "请输入账号", trigger: "blur" }], passWord: [{ required: true, message: "请输入密码", trigger: "blur" }], }, }; }, methods: { ...mapMutations(["changeLogin"]), submitForm() { const userAccount = this.loginForm.account; const userPassword = this.loginForm.passWord; if (!userAccount) { return this.$message({ type: "error", message: "账号不能为空！", }); } if (!userPassword) { return this.$message({ type: "error", message: "密码不能为空！", }); } console.log("用户输入的账号为：", userAccount); console.log("用户输入的密码为：", userPassword); }, }, };CSS部分 .login { width: 100vw; padding: 0; margin: 0; height: 100vh; font-size: 16px; background-position: left top; background-color: #242645; color: #fff; font-family: "Source Sans Pro"; position: relative; } .mylogin { width: 240px; height: 280px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 50px 40px 40px 40px; box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7); opacity: 1; background: linear-gradient( 230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100% ); } .inps input { border: none; color: #fff; background-color: transparent; font-size: 12px; } .submitBtn { background-color: transparent; color: #39f; width: 200px; }有反应不显示输入框问题的同学，需要在mian.js文件里面引入element UI组件库奥～，引入方式可见elementUI官网，即需要先在项目中安装ElementUI，然后在main.js文件中添加以下内容引入 Element： //安装Element UI npm i element-ui -S // main.js中引入ElementUI import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);同志们，完整的登陆页面文件看这里vue-demo/SimpleLogin.vue at main · Hi-Sun/vue-demo · GitHub |
【本文地址】
今日新闻 |
推荐新闻 |