vue+element-ui搭建迷你电商平台系列篇（四）

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

接上一篇juejin.cn/post/703117…

今天继续讲这个电商迷你平台的搭建，这篇之后要告一段落了，今天的内容非常硬。

引入表单组件-页面样式调整

• element组件库找一下表单组件；我们直接用这个吧
• 展开代码，把我们需要的源码复制到我们的login.vue里

<template>
  <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
    <el-form-item label="名称">
      <el-input v-model="formLabelAlign.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-input v-model="formLabelAlign.region"></el-input>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input v-model="formLabelAlign.type"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "login"
}
</script>

<style scoped>

</style>

直接copy这一段就好了

修改属性值

<template>
  <el-form label-position="top" label-width="80px" :model="formData">
    <h2>账号登录</h2>
    <el-form-item label="用户名">
      <el-input v-model="formData.userName"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="formData.password"></el-input>
    </el-form-item>
    <el-button type="primary" plain>登录</el-button>
  </el-form>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      formData: {
        userName: '',
        password: ''
      }
    }
  }
}
</script>

<style scoped>

</style>

完成后代码如下，修改了label-position的值，我们的样式用户名和密码是在输入框顶部的，所以这里直接用top，在data()里提供表单数据formData;添加登录的button按钮现在我们的界面是这样的:

调整一下界面样式

首先创建重置层的样式在./src/assets静态文件夹下新建css文件夹，然后在css文件夹下新建base.css文件，文件内容如下：

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

设置初始的样式值，在main.js文件将base.css样式文件引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/css/base.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

设置登录页面的样式

<template>
  <div class="login-warp">
    <el-form label-position="top" label-width="80px" :model="formData" class="rule-form">
      <h2>账号登录</h2>
      <el-form-item label="用户名">
        <el-input v-model="formData.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>
      <el-button class="login-button" type="primary" plain>登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      formData: {
        userName: '',
        password: ''
      }
    }
  }
}
</script>

<style scoped>
.login-warp {
  height: 100%;
  background-color: #324152;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-warp .rule-form {
  width: 400px;
  background-color: #fff;
  border-radius: 5px;
  padding: 30px;
}
.login-warp .login-button {
  width: 100%;
}
</style>

这里调整之后样式还是不对，原因是之前删除了app.vue里的样式，没有设置高度100%导致在login.vue里设置的高度100%但实际页面展示其实是没有100%的。所以这里还要改一下app.vue里的高度样式

<style>
#app {
  height: 100%;
}
</style>

最后效果

明天继续讲一些element全家桶的常用组件，比如table、select、input、button等等，包括和后端接口的对接，字段回显等。