小栗子篇 - 主题色与开关侧边栏与多列表单

前言

好久没写啦，最近想的东西比较多，整个人都快要炸裂啦，也同时因为生活上的许多问题而感到很沮丧，算啦不说了，来分享一下今天的收获吧

（一）主题色

1.为什么突然要修改主题色？

原因

由于小栗子中顶部的颜色是seaconch自定义的一个黑色，整体配色也是根据顶部的黑色来的，但是可以发现无论是主按钮还是标签页头颜色都是蓝色的，看起来不怎么搭

那这个时候，就可以通过修改主题色来统一颜色风格

2.用法要点

第一个：样式文件

需要添加一个.scss样式文件，位置随意啦（seaconch放在了main.js同级，叫做theme.scss）

内容如下：

/* 改变主题色变量 */
$--color-primary: rgb(44, 40, 42);

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

$aside-menu-color: #ffffff;

$aside-menu-item-color: #f1f1f1;

$main-color: #ffffff;

@import "~element-ui/packages/theme-chalk/src/index";

第二个：全局引入

在main.js中引入（注：原来引入的elementui的样式文件就不再需要啦）

所有引入代码如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App'
import router from './router'
import axios from 'axios'
import qs from 'qs'
import promise from 'es6-promise'
import './theme.scss'

第三个：组件使用

如果在组件中需要使用theme.scss中定义的变量的话，需要这样做：

@import '../../theme.scss';
.header{
  background-color: $--color-primary;
}

$--color-primary就是在theme.scss中定义的主题色（路径可能不一样哦）

嗯，那么主题色就先到这里吧，seaconch当然也想过仿照官方的那种自己选择一个颜色就能计算出主色调和辅色调啦，不过那好像需要懂一些scss方面的知识才行

大致看了一下，涉及到一些scss方面的函数？大概叫做函数吧，好像并不太难，等以后有兴趣的时候再来具体做一下吧

（二）开关侧边栏

1.为什么要刻意写这个呢？

原因：

seaconch在最初实现这个功能时真的不能够屡清楚，并且本身也不会写，最后在网上找的栗子当中也有一定的缺陷，最后改吧改吧的凑活能看了，不过还是不太好

不过今天在修改一个标签的大小时，突然发现数值的改变是一瞬间发生的，然而肉眼却明显看到了过渡动画，之后就突发奇想的应用到了现在这个侧边栏的展开与折叠中

2.使用方式

标签要点

1. <el-aside width="asideWidth" class="aside">
2. <el-menu class="aside-menu el-menu-vertical-demo" :collapse="isCollapse">
3. <el-menu-item class="el-menu-item-collapse" @click="onCollapseChange">

HTML

<el-aside width="asideWidth" class="aside">
  <el-menu class="aside-menu el-menu-vertical-demo" :collapse="isCollapse">

    <el-menu-item class="el-menu-item-collapse" @click="onCollapseChange">
      <div class="el-icon-menu"></div>
    </el-menu-item>

    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>问题与解决方案</span>
      </template>
      <el-menu-item class="aside-menu-item" index="2-1">
        <router-link to="/FaqMain" tag="div">{{'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}资料库</router-link>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</el-aside>

CSS

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 201px;
}

JAVASCRIPT

onCollapseChange () {
  this.isCollapse = !this.isCollapse
  if (this.isCollapse) this.asideWidth = '60px'
  else this.asideWidth = '201px'
}

大家可以试试，效果还是比较不错的，而且做法很简单

（三）多列表单

1.同样是为什么写这个？

讲真的，seaconch在查询这方面的资料时，真的没有查到一个一目了然能看明白的（也可能是人比较笨），所以说即便是简单，但是也要写一个来总结一下

2.多列用法

首先说确实可以用el-row与el-col配合使用来做多列的

seaconch的做法是这样的：

<el-form label-width="80px">
  <br>
  <el-row>
    <el-col :span="col1">
      <el-form-item label="姓名">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="col2">
      <el-form-item label="姓名">
        <el-input></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="col2">
      <el-form-item label="性别">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="col3">
      <el-form-item label="姓名">
        <el-input></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="col3">
      <el-form-item label="性别">
        <el-input></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="col3">
      <el-form-item label="年龄">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="col4">
      <el-form-item label="姓名">
        <el-input></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="col4">
      <el-form-item label="性别">
        <el-input></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="col4">
      <el-form-item label="年龄">
        <el-input></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="col4">
      <el-form-item label="身高">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row type="flex" justify="end">
    <el-button type="primary" @click="trunToOne">去问题查询</el-button>
  </el-row>
</el-form>

还有一点额外的

data () {
  return {
    col1: 24,
    col2: 12,
    col3: 8,
    col4: 6
  }
}

截个图吧

顺带一提，可以看到顶部与主按钮的颜色保持一致

Git

项目文件都放在Git上，大家如果需要源码就点这里哦

嗯，那么大家晚安~