安装插件:npm install clipboard --save
引入:import Clipboard from 'clipboard'
我是封装到一个公共的js里面,代码如下:
import Clipboard from 'clipboard' // 复制粘贴插件
// 复制粘贴 content:要复制的内容,clickEvent:点击事件,successMsg:成功的提示,errorMsg失败的提示
export function copyToClipboard (content, clickEvent, successMsg, errorMsg) {
// clickEvent.target=填写上面点击事件绑定的class名
const clipboard = new Clipboard(clickEvent.target, {
text: () => content
})
// 成功的函数
clipboard.on('success', () => {
ElMessage.success(successMsg)
clipboard.destroy() // 释放内存
})
// 失败的函数
clipboard.on("error", (e) => {
ElMessage.error(errorMsg)
clipboard.destroy() // 释放内存
})
}
请务必记得在button按钮里加上data-clipboard-text这个代码
<el-button
type="primary"
class="copysfc-btn"
:data-clipboard-text="sfcCodeV3"
@click="copySFC"
>复制</el-button
>
const sfcCodeV3 = ref('')
const copySFC = (e: PointerEvent) => {
copyToClipboard(
sfcCodeV3.value,
e,
i18n.t('designer.hint.copySFCSuccess'),
i18n.t('designer.hint.copySFCFail')
)
}