Edited at

Vue.jsでSPA - [11] Element UIでログイン画面

Element UIで超シンプルなログイン画面をつくったというだけの回。Element UIのコンポーネントの Card と Form を組み合わせただけです。やっぱりこういうの使うと楽して普通のものが簡単にできるのでどんどん使っていきたい


スクリーンショット

極々普通のログイン画面

image.png


HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">
<script src="url.js"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import Vue router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- import JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.1/locale/en.js"></script>
<link rel="stylesheet" href="app.css">

<style>
.box-card {
width: 480px;
}

.login {
position: relative;
top: 100px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
}
</style>

</head>

<body>

<div id="app">

<el-card class="box-card login">

<div slot="header" class="clearfix">
<span>Login</span>
<el-button style="float: right; padding: 3px 0" type="text">Forget password</el-button>
</div>

<el-form ref="form" :model="form" label-width="80px">
</el-form-item>
<el-form-item label="Name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form-item>
<el-form-item label="Password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button style="float: right" type="primary" @click="onSubmit">Login</el-button>
</el-form-item>
</el-form>

</el-card>

</div>

</body>

<script>

ELEMENT.locale(ELEMENT.lang.en)
var vm = new Vue({
el: '#app',
data: function() {
return{
form: {
name: '',
password: ''
}
}
},
methods: {
onSubmit() {
console.log(this.form);
// Server Auth API access here
}
}
});

</script>

</html>


シリーズ