feat: add setting components

chenghx

2018-08-21 6b2688a8405dab08fedf7a97c084af8928c9cf7a

feat: add setting components

 src/components/layout/GlobalLayout.vue

@@ -4,6 +4,12 @@
      <sider-menu :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
    </drawer>
    <sider-menu v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
    <drawer :open-drawer="showSetting" placement="right"  @change="onSettingDrawerChange">
      <div class="setting" slot="handler">
        <a-icon :type="showSetting ? 'close' : 'setting'" />
      </div>
      <setting />
    </drawer>
    <a-layout>
      <global-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
      <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
@@ -24,6 +30,7 @@
import GlobalFooter from './GlobalFooter'
import Drawer from '../tool/Drawer'
import SiderMenu from '../menu/SiderMenu'
import Setting from '../setting/Setting'

const ALayoutSider = ALayout.Sider
const ALayoutHeader = ALayout.Header
@@ -36,6 +43,7 @@
export default {
  name: 'GlobalLayout',
  components: {
    Setting,
    SiderMenu,
    Drawer,
    GlobalFooter,
@@ -52,7 +60,7 @@
      minHeight: minHeight + 'px',
      collapsed: false,
      menuData: menuData,
      showSetting: true
      showSetting: false
    }
  },
  computed: {
@@ -81,4 +89,14 @@
</script>

<style lang="less" scoped>
  .setting{
    background-color: #1890ff;
    color: #fff;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  }
</style>

 src/components/setting/Setting.vue

New file
@@ -0,0 +1,50 @@
<template>
  <a-layout-sider class="sider" width="273">
    <setting-item title="整体风格设置">
      <div class="theme">
        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :selected="true"/>
        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :selected="false"/>
      </div>
    </setting-item>
    <setting-item title="主题色">
      <div>
        <theme-color color="rgb(245, 34, 45)" />
        <theme-color color="rgb(250, 84, 28)" />
        <theme-color color="rgb(250, 173, 20)" />
        <theme-color color="rgb(19, 194, 194)" />
        <theme-color color="rgb(82, 196, 26)" />
        <theme-color color="rgb(24, 144, 255)" />
        <theme-color color="rgb(47, 84, 235)" />
        <theme-color color="rgb(114, 46, 209)" :selected="true" />
      </div>
    </setting-item>
  </a-layout-sider>
</template>

<script>
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
import AIcon from 'ant-design-vue/es/icon/icon'
import SettingItem from './SettingItem'
import StyleItem from './StyleItem'
import ADivider from 'ant-design-vue/es/divider/index'
import ThemeColor from './ThemeColor'
export default {
  name: 'Setting',
  components: {ThemeColor, ADivider, StyleItem, SettingItem, AIcon, ALayoutSider}
}
</script>

<style lang="less" scoped>
  .sider{
    background-color: #fff;
    height: 100%;
    padding: 24px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    .theme{
      display: flex;
    }
  }
</style>

 src/components/setting/SettingItem.vue

New file
@@ -0,0 +1,27 @@
<template>
  <div class="setting-item">
    <h3 class="title">{{title}}</h3>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SettingItem',
  props: ['title']
}
</script>

<style lang="less" scoped>
  .setting-item{
    margin-bottom: 24px;
    .title{
      font-size: 14px;
      color: rgba(0,0,0,.85);
      line-height: 22px;
      margin-bottom: 12px;
    }
  }
</style>

 src/components/setting/StyleItem.vue

New file
@@ -0,0 +1,38 @@
<template>
  <div class="style">
    <img :src="img" />
    <div v-if="selected" class="select-item">
      <a-icon type="check" />
    </div>
  </div>
</template>

<script>
import AIcon from 'ant-design-vue/es/icon/icon'
export default {
  name: 'StyleItem',
  props: ['selected', 'img'],
  components: {AIcon}
}
</script>

<style lang="less" scoped>
  .style{
    margin-right: 16px;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    .select-item{
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      padding-top: 15px;
      padding-left: 24px;
      height: 100%;
      color: #1890ff;
      font-size: 14px;
      font-weight: bold;
    }
  }
</style>

 src/components/setting/ThemeColor.vue

New file
@@ -0,0 +1,28 @@
<template>
  <div class="theme-color" :style="{backgroundColor: color}">
    <a-icon v-if="selected" type="check" />
  </div>
</template>

<script>
import AIcon from 'ant-design-vue/es/icon/icon'
export default {
  name: 'ThemeColor',
  components: {AIcon},
  props: ['color', 'selected']
}
</script>

<style lang="less" scoped>
  .theme-color{
    width: 20px;
    height: 20px;
    border-radius: 2px;
    float: left;
    cursor: pointer;
    margin-right: 8px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
</style>