mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 07:27:06 +08:00
feat: add clipboard
This commit is contained in:
iczer
chenghx
parent
aca7ab2a28
commit
a12b100a8e
@ -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",
|
||||
|
||||
@ -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 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()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
26
yarn.lock
26
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user