vue-antd-admin-skeleton/src/components/setting/Setting.vue

<template>
  <a-layout-sider class="sider" width="273">
    <setting-item title="整体风格设置">
      <img-check-box-group @change="setTheme">
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
      </img-check-box-group>
    </setting-item>
    <setting-item title="主题色">
      <color-check-box-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
        <color-check-box ref="colorNode" color="rgb(245, 34, 45)" value="1" />
        <color-check-box color="rgb(250, 84, 28)" value="2" />
        <color-check-box color="rgb(250, 173, 20)" value="3" />
        <color-check-box color="rgb(19, 194, 194)" value="4" />
        <color-check-box color="rgb(82, 196, 26)" value="5" />
        <color-check-box color="rgb(24, 144, 255)" value="6" />
        <color-check-box color="rgb(47, 84, 235)" value="7" />
        <color-check-box color="rgb(114, 46, 209)" value="8" />
      </color-check-box-group>
    </setting-item>
    <a-divider/>
    <setting-item title="导航设置">
      <img-check-box-group @change="setLayout">
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" value="side"/>
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
      </img-check-box-group>
    </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 id="copyBtn" data-clipboard-text="Sorry, you copy nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >拷贝代码</a-button>
  </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 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'
import ColorCheckBox from '../check/ColorCheckBox'
import ImgCheckBox from '../check/ImgCheckBox'
import Clipboard from 'clipboard'

const ASelectOption = ASelect.Option
const ColorCheckBoxGroup = ColorCheckBox.Group
const ImgCheckBoxGroup = ImgCheckBox.Group

export default {
  name: 'Setting',
  components: {
    ImgCheckBoxGroup,
    ImgCheckBox,
    ColorCheckBoxGroup,
    ColorCheckBox,
    ASelectOption,
    ASelect,
    ASwitch,
    AButton,
    AListItem,
    AList,
    ADivider,
    StyleItem,
    SettingItem,
    AIcon,
    ALayoutSider},
  methods: {
    onColorChange (values, colors) {
      if (colors.length > 0) {
        this.$message.info(`您选择了主题色 ${colors}`)
      }
    },
    setTheme (values) {
      this.$store.commit('setting/setTheme', values[0])
    },
    setLayout (values) {
      this.$store.commit('setting/setLayout', values[0])
    },
    copyCode () {
      let clipboard = new Clipboard('#copyBtn')
      const _this = this
      clipboard.on('success', function () {
        _this.$message.success(`复制成功`)
        clipboard.destroy()
      })
    }
  }
}
</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;
    .flex{
      display: flex;
    }
  }
</style>