Help us understand the problem. What is going on with this article?

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>

シリーズ

narutaro
今日もいいヤクの毛が刈れました
https://gist.github.com/narutaro/e8375fb26967b619748974122103ae79
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away