vue实现点击复制

发布时间:2024年01月20日

3. 使用vue-clipboard2库

安装 npm install --save vue-clipboard2
main.js 中引入

<template>
? <div>
? ? <el-button
? ? ? type="primary"
? ? ? v-clipboard:copy="message2"
? ? ? v-clipboard:success="onCopy"
? ? ? v-clipboard:error="onError"
? ? ? >复制方法三</el-button
? ? >
? ? <div style="margin-top: 50px">{{ message2 }}</div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? message2: "举头望明月",
? ? };
? },
? methods: {
? ? // 方法三
? ? // 使用vue-clipboard2库
? ? // 安装 npm install --save vue-clipboard2
? ? // 在main.js中引入
? ? // import VueClipboard from 'vue-clipboard2';
? ? // Vue.use(VueClipboard);
? ? onError() {
? ? ? console.error("复制失败");
? ? },
? ? // 复制
? ? onCopy() {
? ? ? this.$message.success("复制成功");
? ? },
? },
};
</script>
————————————————
版权声明:本文为CSDN博主「你的眼睛會笑」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45563734/article/details/134920579

文章来源:https://blog.csdn.net/weixin_58689699/article/details/135719385
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。