效果图

插入背景图片

样式

制作样式
因为我顶部设置了导航栏，所有高度只设置了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引用

 <div  class="background_style">

登录实现

引入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组件的页面声明即可

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

实现

<el-form  status-icon   label-width="50px" label-position="left" class="login-page" ><h2 class="login_Title">账号登录</h2><el-form-item label="账号" prop="username" ><el-input type="text"  v-model="username" autocomplete="off"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="password" autocomplete="off" show-password></el-input></el-form-item><el-form-item class="button_center"><el-button type="primary" @click="LoginNleCloud" style="width:50%;" >提交</el-button></el-form-item></el-form>

双向绑定账号密码

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,书写此文，以备此后温故而习之

Vue.js——登录界面实现插入背景相关推荐

成品直播源码推荐，登录界面实现插入背景
成品直播源码推荐,登录界面实现插入背景引用因为是背景图片,所有要在最外层div引用 <div class="background_style"> 登录实现引入El ...
nodejs+vue实现登录界面功能（一）
项目描述:一开始进入登录界面,只有登录成功才可以跳转到主页面,已注册但是忘记密码的进入忘记密码页面,找回密码后进入登录界面. 技术选型:nodejs+vue+stylus 界面效果: 切换登录方式手 ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
快速上手vue的登录界面(最新版)
文章目录一.创建vue项目二.引入依赖三.改造下项目四.写入Login视图总结这是一个非常非常适合新手的vue登录界面,总体来说美观大气,axios那部分没有发,有需要的大家可以自己进行二 ...
.net vue漂亮登录界面_基于 electron-vue 开发的音乐播放器「实践」
作者:XiaoTuGou 转发链接:https://github.com/SmallRuralDog 前言基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐. 技术栈electron ...
vue 数据库登录界面_Vue学习之路之登录注册
杭州数澜科技招聘Node.js工程师[可实习].UE/UI设计师[实习].前端React工程师[实习],联系方式可见评论区 Vue.js + Element UI + MongoDB P1 安装Vue ...
登录界面实现动态背景
如图,发现类似别人的登录界面,这个动态背景非常炫酷,今天发现这个插件可以直接实现. vanta.js官网地址根据官网实例,需要安装three.js 和 vanta.js npm install va ...
HTML+CSS+JS登录界面
1.界面样式 1.1登录界面 1.2注册界面代码实现 html <!DOCTYPE html> <html lang="en"><head>& ...
.net vue漂亮登录界面_6个宝藏级Vue管理后台框架必须收藏
10月5号00:45尤小右在微博公布尚处于pre-alpha状态的Vue 3源码,主要的架构改进.优化和新功能均已完成,剩下的便是Vue 2现有功能的移植了-- 一经发布网友纷纷表示"扶我起 ...
php用户登录界面代码有背景,大男孩教你怎么自定义WordPress用户登录界面背景图片？ – 男孩资源网...
WordPress的后台登录界面,带有WordPress的logo及其他多余信息,看起来不个性,虽然很少人访问,但也有很多人想要设计出自己独特的登录界面.对于不是很懂代码的人,要弄这么个东西还是很难的 ...

Vue.js——登录界面实现插入背景

登录界面实现插入背景

效果图

插入背景图片

样式

引用

登录实现

引入Element UI

通过npm安装

通过引入样式库

实现

双向绑定账号密码

设置点击事件

尾言

Vue.js——登录界面实现插入背景相关推荐

最新文章

热门文章