feat: add clipboard

iczer

2018-08-23 a12b100a8e410f5558f694eb997e4b77c6de38f7

feat: add clipboard

 package.json

@@ -17,6 +17,7 @@
    "@antv/data-set": "^0.8.9",
    "ant-design-vue": "^1.0.3",
    "axios": "^0.18.0",
    "clipboard": "^2.0.1",
    "enquire.js": "^2.1.6",
    "mockjs": "^1.0.1-beta3",
    "moment": "^2.22.2",

 src/components/setting/Setting.vue

@@ -1,10 +1,10 @@
<template>
  <a-layout-sider class="sider" width="273">
    <setting-item title="整体风格设置">
      <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>
      <img-check-box-group @change="onStyleChange">
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" :value="{value: 1, name: 'Dark'}"/>
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :value="{value: 2, name: 'Light'}"/>
      </img-check-box-group>
    </setting-item>
    <setting-item title="主题色">
      <color-check-box-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
@@ -20,10 +20,10 @@
    </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>
      <img-check-box-group @change="onNaviChange">
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" :value="{value: 1, name: 'Side Navigation'}"/>
        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" :value="{value: 2, name: 'Top Navigation'}"/>
      </img-check-box-group>
    </setting-item>
    <setting-item>
      <a-list :split="false">
@@ -58,7 +58,7 @@
      </a-list>
    </setting-item>
    <a-divider />
    <a-button style="width: 100%" icon="copy">拷贝代码</a-button>
    <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>

@@ -68,20 +68,24 @@
import SettingItem from './SettingItem'
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'
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,
@@ -90,7 +94,6 @@
    AButton,
    AListItem,
    AList,
    ThemeColor,
    ADivider,
    StyleItem,
    SettingItem,
@@ -99,8 +102,26 @@
  methods: {
    onColorChange (values, colors) {
      if (colors.length > 0) {
        this.$message.info(`选择了主题色 ${colors}`)
        this.$message.info(`您选择了主题色 ${colors}`)
      }
    },
    onStyleChange (values) {
      if (values.length > 0) {
        this.$message.info(`您选择了 ${values[0].name} 风格`)
      }
    },
    onNaviChange (values) {
      if (values.length > 0) {
        this.$message.info(`您选择了 ${values[0].name} `)
      }
    },
    copyCode () {
      let clipboard = new Clipboard('#copyBtn')
      const _this = this
      clipboard.on('success', function () {
        _this.$message.success(`复制成功`)
        clipboard.destroy()
      })
    }
  }
}

 yarn.lock

@@ -1779,6 +1779,14 @@
  version "2.2.0"
  resolved "http://registry.npm.taobao.org/cli-width/download/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"

clipboard@^2.0.1:
  version "2.0.1"
  resolved "http://registry.npm.taobao.org/clipboard/download/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
  dependencies:
    good-listener "^1.2.2"
    select "^1.1.2"
    tiny-emitter "^2.0.0"

cliui@^2.1.0:
  version "2.1.0"
  resolved "http://registry.npm.taobao.org/cliui/download/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -2549,6 +2557,10 @@
delayed-stream@~1.0.0:
  version "1.0.0"
  resolved "http://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"

delegate@^3.1.2:
  version "3.2.0"
  resolved "http://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"

delegates@^1.0.0:
  version "1.0.0"
@@ -3756,6 +3768,12 @@
    ignore "^3.3.5"
    pify "^3.0.0"
    slash "^1.0.0"

good-listener@^1.2.2:
  version "1.2.2"
  resolved "http://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
  dependencies:
    delegate "^3.1.2"

graceful-fs@^4.1.11, graceful-fs@^4.1.2:
  version "4.1.11"
@@ -7380,6 +7398,10 @@
  version "2.0.0"
  resolved "http://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"

select@^1.1.2:
  version "1.1.2"
  resolved "http://registry.npm.taobao.org/select/download/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"

selenium-server@^3.0.1:
  version "3.13.0"
  resolved "http://registry.npm.taobao.org/selenium-server/download/selenium-server-3.13.0.tgz#daecaa9a684d1d98e799fddd2d670fbe79818d45"
@@ -8061,6 +8083,10 @@
  dependencies:
    setimmediate "^1.0.4"

tiny-emitter@^2.0.0:
  version "2.0.2"
  resolved "http://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"

tmp@^0.0.33:
  version "0.0.33"
  resolved "http://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"