Vue.js

2023-12-04 07:18| 来源: 网络整理| 查看: 265

登录界面实现插入背景效果图插入背景图片样式引用登录实现引入Element UI通过npm安装通过引入样式库实现双向绑定账号密码设置点击事件尾言

效果图

在这里插入图片描述

插入背景图片样式

制作样式因为我顶部设置了导航栏，所有高度只设置了85%

.background_style{ width:100%; height:85%; position:fixed; background-size:100% 100%; background-repeat: no-repeat; background-image: url("../../assets/background_1.jpg"); } 引用

因为是背景图片，所有要在最外层div引用

登录实现引入Element UI

Element UI

通过npm安装

执行此命令

npm i element-ui -S

然后再main.js中导入Element UI库

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 通过引入样式库

直接在需要使用Element UI组件的页面声明即可

实现账号登录提交双向绑定账号密码 v-model="username" v-model="password"

定义字段

data(){ return{ password: "", username: "", } 设置点击事件

Es6缩写

@click="LoginNleCloud"

普通写法

v-on:click="LoginNleCloud"

需要在methods才能定义方法然后对账户密码进行判断如果成功则跳转路由，失败则提醒用户

methods:{ LoginNleCloud(){ if (this.username === "hntdiot" && this.password === "hntdiot") { window.nleApi = new NLECloudAPI() const res = window.nleApi.userLogin(this.username,this.password,true) res.completed(function (res) { window.Flag = true //alert("Success！") console.log(res) }) if ( window.Flag === true){ this.$router.push('/console') console.log(window.Flag) } }else { alert("账户或者密码错误！") } } 尾言

初学Vue.js,书写此文，以备此后温故而习之

【本文地址】

公司简介

联系我们