[JavaScript知识库]【vue-big-event】用户信息

?

?基于路由渲染用户信息组件

1.在 src/views/Layout 目录下，新建 /User/UserInfo.vue 组件：

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <!-- 表单 -->
  </el-card>
</template>

<script>
export default {
  name: 'UserInfo'
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
}
</style>

2.在 src/assets/styles/global.less 中全局重置 element-ui 组件库的基础样式：?

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

// 全局重置 element-ui 组件库的基础样式
.el-input__inner,
.el-button,
.el-link,
.el-menu-item,
.el-submenu__title,
.el-form-item__label {
  font-size: 12px;
}

// 重置菜单的基础样式
.el-menu.el-menu--horizontal {
  height: 60px;
  border-bottom: none;
}

// 重置卡片的基础样式
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 13px;
}

?3.在 src/router/index.js 模块中，导入 UserInfo.vue 组件，并声明对于应的路由规则

import UserInfo from '@/views/Layout/User/UserInfo.vue'

const routes = [
  { path: '/reg', component: Reg },
  { path: '/login', component: Login },
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      { path: 'home', component: Home },
      // 用户信息的子路由规则
      { path: 'user-info', component: UserInfo }
    ]
  }
]

绘制用户信息的表单

1.渲染用户信息表单的基本结构：

<!-- 表单 -->
<el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="100px">
  <el-form-item label="登录名称" prop="username">
    <el-input v-model="userForm.username" disabled></el-input>
  </el-form-item>
  <el-form-item label="用户昵称" prop="nickname">
    <el-input v-model="userForm.nickname" minlength="1" maxlength="10"></el-input>
  </el-form-item>
  <el-form-item label="用户邮箱" prop="email">
    <el-input v-model="userForm.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary">提交修改</el-button>
    <el-button>重置</el-button>
  </el-form-item>
</el-form>

?2.把 Vuex 中的 userInfo 数据映射到当前组件中，作为表单的初始值

export default {
  name: 'UserInfo',
  data() {
    return {
      // 基于浅拷贝，把 Vuex 中的用户信息对象复制一份，交给 userForm
      userForm: Object.assign({}, this.$store.state.userInfo),
      userFormRules: {}
    }
  }
}

3.定义表单的验证规则对象： ?

export default {
  name: 'UserInfo',
  data() {
    return {
      // 基于浅拷贝，把 Vuex 中的用户信息对象复制一份，交给 userForm
      userForm: { ...this.$store.state.user.userInfo },
      // 表单的验证规则对象
      userFormRules: {
        nickname: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '昵称必须是1-10位的非空字符串', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  }
}