麻雀的确可爱，它的脑袋很小，只有栗子那么大，眼晴虽小却非常有神，它的身体小巧成蛋状流线型，放在手上只占手掌的一半。它浑身长着灰褐色羽毛，和树皮色相似，是一种保护色，它颈部和腹部的毛发白，显得很匀称，它的尾巴像半张开的小扇子。它飞得很快，也很有趣，那么一窜窜的。
简介
页面中用 clipboard 可以进行复制粘贴，clipboard能将内容直接写入剪切板
安装
npm install --save clipboard
使用方法一
<template>
<span>{{ code }}</span>
<i
class="el-icon-document"
title="点击复制"
@click="copyActiveCode($event,code )"/>
</template>
// methods
copyActiveCode(e, text) {
const clipboard = new Clipboard(e.target, { text: () => text })
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' })
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(e)
}
使用方法二
<template>
<span>{{ code }}</span>
<i
id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
:data-clipboard-text="code" <-- 这里放要复制的内容 -->
class="el-icon-document"
title="点击复制"
@click="copyActiveCode($event,code)"/>
</template>
// methods
copyActiveCode() {
const clipboard = new Clipboard("#tag-copy")
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' })
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
// 释放内存
clipboard.destroy()
})
}
本文clipboard在vue中的如何使用的方法示例到此结束。期望是性命的阳光，行动是期望的翅膀。小编再次感谢大家对我们的支持！
