Element UI: 用户登录之页面设计

代码

<template>
	<div>

		<el-row style="display: flex;justify-content: center;">
			<el-col :span="12">
				<h2 style="text-align:center;">用户登录</h2>
				<el-divider></el-divider>
				<el-form ref="form" :model="form" label-width="80px">
				  <el-form-item label="用户名">
				    <el-input v-model="form.name"  placeholder="请输入用户名"></el-input>
				  </el-form-item>
				  <el-form-item label="密码">
				    <el-input v-model="form.pwd" show-password  placeholder="请输入密码"></el-input>
				  </el-form-item>
				 
				 
				  <el-form-item style="text-align:center;">
				    <el-button type="primary" @click="onSubmit">登录</el-button>
				    <el-button>重置</el-button>
				  </el-form-item>
				</el-form>
				
			</el-col>
		</el-row>
</div>
</template>
<script>
  export default {
	 
	name: 'Login2',	
    data() {
      return {
        form: {
          name: '',
          pwd:""
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
		console.log("用户名",this.form.name)
		console.log("密码",this.form.pwd)
      }
    }
  }
</script>

截图