【登录界面】vue、element-ui登录界面模板-阿里云开发者社区

【登录界面】vue、element-ui登录界面模板

2023-02-22 1799

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这里总结一个用vue、element-ui写的登录界面，为以后复制粘贴备用

vue、element-ui登录界面模板

这里总结一个用vue、element-ui写的登录界面，为以后复制粘贴备用。

截图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
<!--引入js-->
  <script src="../../js/vue.js"></script>
  <script src="../../js/jquery-3.6.0.js"></script>
    <!--引入element-ui-->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../css/Eleindex.css">
  <!-- 引入组件库 -->
  <script src="../../js/Eleindex.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>XXXX</el-header>
        <!--主体内容-->
        <el-main>
            <el-row>
                <el-col :span="8" :offset="8">
                    <div id="loginBox">
                        用户登录<br>
                        账号：<el-input v-model="adminUser.username" placeholder="账号"></el-input><br>
                        密码：<el-input type="password" v-model="adminUser.password" placeholder="密码"></el-input><br>
                        <el-button type="primary" @click="y_reset">重置</el-button>
                        <el-button type="primary" @click="y_login">登录</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>Copyright © 2022xxxx all rights reserved</el-footer>
    </el-container>
</div>
</body>
</html>
<style>
    /*整体样式*/
    *{
        margin: 0;
        padding: 0;
    }
    body,html,.el-container,#app{
        height: 100%;
    }
    /*放账号密码input的div*/
    #loginBox{
        background-color: #eee;
        border-radius: 15px;
        margin-top: 15%;
    }
    /*布局容器样式 main header fotter*/
    .el-header {
        background-color:deepskyblue;
        color: #fff;
        text-align: center;
        line-height: 60px;
        font-size: xx-large;
        font-weight: bolder;
    }
    .el-footer{
        background-color: #bbb;
        color: #000;
        text-align: center;
        line-height: 60px;
    }
    .el-main {
        background-color: #fff;
        color: #333;
        text-align: center;
        line-height: 80px;
    }
/*    输入框样式*/
    .el-input{
        width: 50%;
    }
</style>
<script>
  var app=new Vue({
    el:"#app",
    data:{
        adminUser:{},
    },
    methods:{
        y_reset(){//重置
            this.adminUser={};
        },
        y_login(){//点击登录按钮后发送ajax请求给后端进行账号密码比对
            this.post01();
        }
    }
    });
</script>