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">
+      <img-check-box-group @change="onStyleChange">
-        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :selected="true"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" :value="{value: 1, name: 'Dark'}"/>
-        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :selected="false"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :value="{value: 2, name: 'Light'}"/>
-      </div>
+      </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">
+      <img-check-box-group @change="onNaviChange">
-        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :selected="true"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" :value="{value: 1, name: 'Side Navigation'}"/>
-        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" :selected="false"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" :value="{value: 2, name: 'Top Navigation'}"/>
-      </div>
+      </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 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'
 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 @@ export default {
     AButton,
     AListItem,
     AList,
-    ThemeColor,
     ADivider,
     StyleItem,
     SettingItem,
@@ -99,8 +102,26 @@ export default {
   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 @@ cli-width@^2.0.0:
   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"
@@ -2550,6 +2558,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"
   resolved "http://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3757,6 +3769,12 @@ globby@^7.1.1:
     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"
   resolved "http://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -7380,6 +7398,10 @@ select-hose@^2.0.0:
   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 @@ timers-browserify@^2.0.4:
   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"