1.概括
本次博客的代码就不自己去写输入框了,直接去引用element官网中的就好。
具体如何实现可以去订阅Vue专栏中的最后两节课噢!!!!!!
2.操作方法
打开element官网
https://element.eleme.cn/#/zh-CN/component/installation
进入官网后,按需复制所需要的内容
引入element-ui
// src/plugin/elements
import Vue from "vue"
import { Button,Form,FormItem,Input } from "element-ui";Vue.use(Button)
Login.vue
<!-- src/components/Login.vue -->
<template><div class="login_container"><div class="login_box"><div class = "logo"><!-- 专门用于加载logo图标,创建一个单独的div --><img src="../assets/logo.png" alt=""></div><!-- 粘贴element中代码 --><!-- 由于在这里element-ui引入了新的对象(el-form等等)需要去element中引入,来自form表单模块 --><el-form label-width="0px" class="form_style"><el-form-item><!-- 加入图标sufix-icon(放后面,我这用放前面)去form表单复制,想要什么图标去图标模块找 --><el-input prefix-icon="el-icon-user-solid" placeholder="用户名"></el-input></el-form-item><el-form-item ><el-input prefix-icon="el-icon-unlock" placeholder="密码"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary">登录</el-button><el-button>重置</el-button></el-form-item></el-form></div></div>
</template><script>
import '../plugins/element.js'
// 默认导出
export default {name: 'Login'
}
</script><style lang="less" scoped>
/*
scpoed:只针对当前组件的样式
less:语法格式
*/
.login_container{color: #FF8C00;background-color: #FF8C00;// 百度搜索颜色值
}
// 设计登录的方框.login_box{width: 450px;height: 300px;// 圆角border-radius: 5px;background-color: #fff;position: absolute;left: 50%;top: 50%;// 定位方框位置transform:translate(-50%,-50%);}.logo{height: 80px;width: 200px;border: 1px solid #eee;padding: 10px;border-radius: 10%;position: absolute;left: 50%;transform: translate(-50%,-50%);// 阴影效果box-shadow: 0 0 10px #eee;img{// 充满整个边框width: 100%;height: 100%;}}.form_style{position: absolute;width: 100%;bottom: 0px;padding: 0 10%;// 方框的盒子模型是要设置的,不然使用默认大小box-sizing: border-box;}.btns{display: flex;// 让他活动,然后置于右边justify-content: flex-end;}
</style>
3.遇到的报错
app.js:265 Uncaught TypeError: Cannot read properties of undefined (reading ‘install’)
一定要注意看这:这几天遇到了都是这个错误所以我断更了。主要原因是我用vue2,去写的。但是不小心创建了vue3的插件。所以导致爆底层错误,翻阅很多资料,最好的方式,就是重建vue2