vue用户登录界面,vue的登录实现
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单登录界面的具体代码，供大家参考，具体内容如下
实现：
界面实现表单规则校验结合后台美国石油学会(美国石油协会)校验提示消息App.vue
模板
div id=应用程序
！-路由占位符-
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称："应用程序"
}
/脚本
风格
/风格
登录页面login.vue
模板
div class=登录容器
div class=login_box
div class=ava_box
img src=./assets/logo.png /
/div
！-账号-
El-form:model= loginForm ref= loginFormRef :rules= loginFormRules label-width= 0px class= log in _ form
el-form-item prop=用户名
El-input v-model= loginform。用户名前缀-图标= El-图标-用户-实体/El-输入
/El-表单-项目
！-密码-
el-form-item prop=password
El-input v-model= loginform。password show-password= true prefix-icon= El-icon-lock /El-input
/El-表单-项目
！-按钮-
el-form-item class=btns
埃尔按钮type= primary @ click= log in round登录/el-button
！- el-button type="成功"回合成功按钮/El-按钮-
El-button type= info @ click= resetLoginForm round重置/el-button
/El-表单-项目
/el格式
/div
/div
/模板
脚本
导出默认值{
data(){
返回{
//表单数据绑定
loginForm: {
用户名："管理员",
密码："123456"
},
//检验规则
loginFormRules: {
用户名：[
{必需：真，消息： 请输入用户名，触发：模糊 },
{最少：3,最多：8,消息： 长度在3到8个字符，触发器：模糊 }
],
密码：[
{必需：真，消息： 密码不能为空，触发：模糊 },
{最少6个，最多12个，消息： 长度在6 到12 个字符，触发器：模糊 }
]
}
}
},
方法：{
resetLoginForm(){
这个参考文献。loginfomref。resetfields()；
},
登录(){
这个参考文献。loginformref。验证(异步有效={
console.log(有效);
如果(!有效)返回；
const {data: res}=等待此消息. http.post(登录，这个。loginform)；
console.log(res)
if(res.meta.status！=200)还这个message.error(登录失败)
这个message.success(登录成功)
});
}
}
}
/脚本
style lang=less 范围。登录_容器{
背景色：# 2 b4b 6b
身高：100%;
}。登录框{
高度：300像素
宽度：450像素
背景色：# fff
边框半径：3px
位置：绝对；
左：50%;
top:50%；
//横轴，纵轴
transform: translate(-50%，-50%)；ava_box {
高度：130像素
宽度：130像素
边框：1px纯色# eee
边界半径：50%;
填充：10px
box-shadow:0 0 10px # DDD；
位置：绝对；
左：50%;
transform: translate(-50%，-50%)；
背景色：# fff
img {
宽度：100%;
身高：100%;
边界半径：50%;
背景色：# eee
}
}。btns{
显示器：flex
justify-content:flex-end；
}。login_form{
位置：绝对；
底部：0px
宽度：100%;
填充：0 20像素
框大小：边框-框；
}
}
/风格
element.js
从“vue”导入某视频剪辑软件
从"元素-ui "导入{按钮，表单，表单项目，输入，消息}
Vue.prototype.$message=Message
Vue.use(按钮)
Vue.use(表单)
Vue.use(FormItem)
Vue.use(输入)
Vue.use(消息)
主页。射流研究…
从“vue”导入某视频剪辑软件
从导入应用程序 App.vue
从导入路由器。/路由器
"导入"。/plugins/element.js
"导入"。/assets/css/global.css
从" axios "导入爱可信
Vue.config.productionTip=false
axios.defaults.baseURL=
Vue.prototype.$http=axios
新Vue({
路由器，
render: h=h(App)
}).$ mount("# app ")
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。