提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- Vue2(点击复制粘贴功能的实现)
- 1. 安装vue-clipboard插件
- 2. 引入vue-clipboard插件
- 3. 在组件中使用复制粘贴功能
- Vue3(点击复制粘贴功能的实现)
- 1. 安装vue-clipboard插件
- 2. 引入vue-clipboard插件
- 3. 在组件中使用复制粘贴功能
使用vue-clipboard插件在Vue2和Vue3中实现点击复制粘贴的功能,需要经过以下几个步骤:
Vue2(点击复制粘贴功能的实现)
1. 安装vue-clipboard插件
在项目根目录下,使用npm或者yarn命令安装vue-clipboard插件:
npm install vue-clipboard2
或
yarn add vue-clipboard2
2. 引入vue-clipboard插件
在Vue项目的入口文件(通常是main.js或者main.ts)中,引入并使用vue-clipboard插件:
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
3. 在组件中使用复制粘贴功能
第一种方法:在需要使用复制粘贴功能的组件中,通过v-clipboard指令来实现
<template><div class="container">{{qq}}<button type="button" v-clipboard:copy="qq" //复制的内容v-clipboard:success="Copy" //复制成功调用的方法v-clipboard:error="Error" //复制失败调用的方法>复制QQ</button></div>
</template>
<script>
export default {data() {return {qq:'123456 '}},methods: {Copy: function (e) {alert('复制成功: ' + e.text)},Error: function (e) {alert('复制失败')}}}
</script>
第二种方法:在需要使用复制粘贴功能的组件中,通过 this.$copyText来实现
<template><button @click="copyText()">点击复制</button>
</template><script>
export default {data() {return {textToCopy: '要复制的文本',};},methods: {copyText(row) {this.$copyText(this.textToCopy.replace(/( |null)/g, '')).then((e) => {Message('复制成功!', 'success')console.log(e);},(err) => {Message('复制失败,请重试!')console.log(err);});},
};
</script>
Vue3(点击复制粘贴功能的实现)
1. 安装vue-clipboard插件
在项目根目录下,使用npm或者yarn命令安装vue-clipboard插件:
npm i vue-clipboard3 --save
或
yarn add i vue-clipboard3 --save
2. 引入vue-clipboard插件
在需要文件中导入: import clipboard3 from “vue-clipboard3”;
3. 在组件中使用复制粘贴功能
<template><div class="hello"><input type="text" v-model="text"><button @click="copy">点击复制</button></div>
</template>
<script setup>
// 引入vue-clipboard3
import clipboard3 from "vue-clipboard3";
const copy = async () => {const { toClipboard } = clipboard3();try {await toClipboard(data.text);showToast('复制成功!')} catch (error) {showToast("复制失败!")}
};
</script>