Element UIで超シンプルなログイン画面をつくったというだけの回。Element UIのコンポーネントの Card と Form を組み合わせただけです。やっぱりこういうの使うと楽して普通のものが簡単にできるのでどんどん使っていきたい
##スクリーンショット
極々普通のログイン画面
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>
シリーズ
- Vue.jsでSPA - [1] Element UIでベースの画面をつくる
- Vue.jsでSPA - [2] Element UIで各ペインの画面をつくる
- Vue.jsでSPA - [3] vue-routerでルーティング
- Vue.jsでSPA - [4] コンポーネントにしてみる
- Vue.jsでSPA - [5] リアクティブになってる？
- Vue.jsでSPA - [6] サーバからのデータ取得
- Vue.jsでSPA - [7] Vueからサーバデータ取得
- Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと
- Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法
- Vue.jsでSPA - [10] Safari..お前か...3rd party cookie
- Vue.jsでSPA - [11] Element UIでログイン画面
- Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移
- Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす
- Vue.jsでSPA - [14] Vue.jsとOnsenUIを使ったオレオレなショッピングカートチュートリアル
- Vue.jsでSPA - [15] 世界中の人とミーティング時間を決める時に便利なやつ
- Vue.jsでSPA - [16] へー、FirebaseでWebアプリのログインってこうやるのか