mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-13 23:20:12 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
56 lines
1.1 KiB
Markdown
56 lines
1.1 KiB
Markdown
# Clipboard
|
|
|
|
这里的复制粘贴使用了 [clipboard](https://github.com/zenorocha/clipboard.js)
|
|
|
|
本项目提供了两种使用方式
|
|
|
|
## 直接使用
|
|
|
|
```html
|
|
<el-button @click='handleCopy(inputData,$event)'>copy</el-button>
|
|
```
|
|
|
|
```js
|
|
import clip from '@/utils/clipboard' // use clipboard directly
|
|
|
|
methods: {
|
|
handleCopy(text, event) {
|
|
clip(text, event)
|
|
}
|
|
}
|
|
```
|
|
|
|
首先引入封装好的 `clipboard` ,设置 `click` function。
|
|
|
|
`clip()` 函数第一个参数为复制的内容，第二个参数为 `event` 事件。两个参数均为必填项。
|
|
|
|
<br/>
|
|
<br/>
|
|
|
|
## 指令形式使用
|
|
|
|
本项目同时也封装了一个通过 `directives` 的方式来使用 `clipboard`。
|
|
|
|
```html
|
|
<el-button v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
|
|
```
|
|
|
|
```js
|
|
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
|
|
|
|
directives: {
|
|
clipboard
|
|
},
|
|
methods: {
|
|
clipboardSuccess() {
|
|
this.$message({
|
|
message: '复制成功',
|
|
type: 'success',
|
|
duration: 1500
|
|
})
|
|
}
|
|
}
|
|
```
|
|
|
|
`v-clipboard:copy` 为复制的内容，`v-clipboard:success` 为成功之后的回调。
|