feat: setting components

chenghx

2018-08-22 5794bad6113106e70bac865eb05960cbc43fb8da

feat: setting components

 src/components/setting/Setting.vue

@@ -1,7 +1,7 @@
<template>
  <a-layout-sider class="sider" width="273">
    <setting-item title="整体风格设置">
      <div class="theme">
      <div class="flex">
        <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>
@@ -16,8 +16,50 @@
        <theme-color color="rgb(24, 144, 255)" />
        <theme-color color="rgb(47, 84, 235)" />
        <theme-color color="rgb(114, 46, 209)" :selected="true" />
        <div style="clear: both" />
      </div>
    </setting-item>
    <a-divider/>
    <setting-item title="导航设置">
      <div class="flex">
        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :selected="true"/>
        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" :selected="false"/>
      </div>
    </setting-item>
    <setting-item>
      <a-list :split="false">
        <a-list-item>
          栅格模式
          <a-select size="small" defaultValue="1" slot="actions" style="width: 80px">
            <a-select-option value="1">流式</a-select-option>
            <a-select-option value="2">定宽</a-select-option>
          </a-select>
        </a-list-item>
        <a-list-item>
          固定Header
          <a-switch slot="actions" size="small" />
        </a-list-item>
        <a-list-item>
          固定Siderbar
          <a-switch slot="actions" size="small" />
        </a-list-item>
      </a-list>
    </setting-item>
    <a-divider />
    <setting-item title="其他设置">
      <a-list :split="false">
        <a-list-item>
          色弱模式
          <a-switch slot="actions" size="small" />
        </a-list-item>
        <a-list-item>
          显示抽屉按钮
          <a-switch slot="actions" size="small" />
        </a-list-item>
      </a-list>
    </setting-item>
    <a-divider />
    <a-button style="width: 100%" icon="copy">拷贝代码</a-button>
  </a-layout-sider>
</template>

@@ -28,9 +70,29 @@
import StyleItem from './StyleItem'
import ADivider from 'ant-design-vue/es/divider/index'
import ThemeColor from './ThemeColor'
import AList from 'ant-design-vue/es/list/index'
import AListItem from 'ant-design-vue/es/list/Item'
import AButton from 'ant-design-vue/es/button/button'
import ASwitch from 'ant-design-vue/es/switch/index'
import ASelect from 'ant-design-vue/es/select/index'

const ASelectOption = ASelect.Option

export default {
  name: 'Setting',
  components: {ThemeColor, ADivider, StyleItem, SettingItem, AIcon, ALayoutSider}
  components: {
    ASelectOption,
    ASelect,
    ASwitch,
    AButton,
    AListItem,
    AList,
    ThemeColor,
    ADivider,
    StyleItem,
    SettingItem,
    AIcon,
    ALayoutSider}
}
</script>

@@ -43,7 +105,7 @@
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    .theme{
    .flex{
      display: flex;
    }
  }

 src/components/setting/SettingItem.vue

@@ -1,9 +1,7 @@
<template>
  <div class="setting-item">
    <h3 class="title">{{title}}</h3>
    <div>
      <slot></slot>
    </div>
    <slot></slot>
  </div>
</template>


 src/components/setting/ThemeColor.vue

@@ -15,10 +15,10 @@

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