用vue2实现的一个登录页demo,
背景图可直接替换,成品案例直接可运行
设计技术:
vue2、element-ui、vue-router、滑块校验
安装包
npm install
开发运行
npm run serve
编译运行
npm run build
代码解读:
需要注意的是,由于该方法只会在login.vue组件中生效,因此如果其他组件也需要相同的背景图效果,需要分别在这些组件中添加相应的样式。
一个名为background的CSS类,并设置了背景图、大小、位置、重复方式和高度等属性,你可以完全自定义。
在Vue.js应用程序中实现让login.vue页面有一个全局的背景图了。需要注意的是,由于全局样式会作用于整个应用程序,因此在设计样式时要注意不要影响到其他页面。
一定要注意body标签,这个标签默认是有 margin:8px 导致后续页面可能有白边,所以要注意处理一下,后续会有对应的文章进行详细的介绍,欢迎看我主页进行查找。
1