vue2实现复制,粘贴功能,使用vue-clipboard2插件

一、需求说明

在项目中 点击按钮 复制 某行文本是很常见的 应用场景,

在 Vue 项目中实现 复制功能 需要借助 vue-clipboard2 插件。

二、代码实现

1、安装 vue-clipboard2 依赖

( 出现错误的话,可以试试切换成淘宝镜像源

npm config set registry https://registry.npm.taobao.org

npm install --save vue-clipboard2

2、在 main.js 文件中全局引入插件

示例代码如下:

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

new Vue({

render: h => h(App)

}).$mount('#app')

3、案例

在组件中有两种方法可以实现复制功能。

方法一 :

使用 vue-clipboard2 提供的 指令

直接将变量内容复制至剪切板,暂时没有找到处理数据后再复制的方式

<template>

<div class="yeluosen">

<input type="text" v-model="message">

<el-button

icon="el-icon-share"

size="mini"

style="font-size: 16px;padding: 4px 8px;"

title="共享"

v-clipboard:copy="scope.row.url"

v-clipboard:success="onCopy"

v-clipboard:error="onError"

@click="share(scope.row.url)"></el-button>

</div>

</template>

复制时,通过 v-clipboard: copy 复制输入的内容 :

// 复制成功 or 失败(提示信息!!!)

onCopy: function (e) {

console.log('复制成功!', e)

},

onError: function (e) {

console.log('复制失败!', e)

}

方法二:

使用 vue-clipboard2 全局绑定的 $copyText 事件方法

复制动作使用的是 Vue 响应函数方式,这就为复制前控制数据提供了可能!

// 点击事件

share(val) {

this.handleData(val)

this.$copyText(this.message).then(function (e) {

alert('Copied')

}, function (e) {

alert('Can not copy')

})

},

// 数据处理

handleData(val){

this.message = this.message + ' ' + val

}

<template>

<div>

<el-button

type="success"

size="small"

style="margin-left: 10px"

@click="onCopy"

>复制</el-button

>

</div>

</template>

<script>

export default {

data() {

return {

text: "这是一段复制的文本",

};

},

methods: {

onCopy() {

this.$copyText(this.pathText).then(

e=>{

console.log('复制成功:', e);

},

e=>{

console.log('复制失败:', e);

}

)

}

}

};

</script>

三、项目所用

实现选中并且复制成功后带有提示信息的效果 :

<template>

<div>

<el-input ref="addressInput" v-model="address" :readonly="true">

<template slot="prepend"> 反馈地址 </template>

</el-input>

<el-button @click="copyLink(address)">复制链接</el-button>

</div>

</template>

<script>

export default {

data() {

return {

address: "https://www.baidu.com/", // 地址信息

};

},

methods: {

// 判断是否是 IE 浏览器

isIE() {

if (window.ActiveXObject || "ActiveXObject" in window) {

return true;

} else {

return false;

}

},

// 拷贝地址

copyLink(url) {

if (this.isIE()) {

this.$copyText(url);

this.$refs.addressInput.select(); // 实现选中效果

this.$message.success("复制成功!");

} else {

this.$copyText(url)

.then((res) => {

this.$refs.addressInput.select(); // 实现选中效果

this.$message.success("复制成功!");

})

.catch((err) => {

this.$message.error("该浏览器不支持自动复制, 请手动复制");

});

}

},

},

};

</script>

<style lang="scss" scoped></style>

优化一下,我想要复制一个对象,需要做转义,像这样

javascript 复制代码
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
  
      <span slot="footer" class="dialog-footer">
        <span>{{ form.address }}</span>
        <span>{{ form.name }}</span>
        <span>{{ form.password }}</span>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button type="primary" @click="share(form)">复制</el-button>
      </span>
    </el-dialog>
javascript 复制代码
data(){
return{
 form: {
        address: "https://www.baidu.com/", // 地址信息
        name: "张三",
        password: "123",
      },
}
}
javascript 复制代码
 share(url) {
      if (this.isIE()) {

        this.$copyText(this.form.password);
        // this.$refs.addressInput.select(); // 实现选中效果
        this.$message.success("复制成功!");
      } else {
            //此处做转义,并且使用JSON.stringify转一下

        let obj = {
          '地址': this.form.address,
          '用户名': this.form.name,
          '密码': this.form.password
        }
        const objectString = JSON.stringify(obj);
        this.$copyText(objectString)
          .then((res) => {
            // this.$refs.addressInput.select(); // 实现选中效果
            this.$message.success("复制成功!");
          })
          .catch((err) => {
            this.$message.error("该浏览器不支持自动复制, 请手动复制");
          })
      }
    },

最终结果为{"地址":"https://www.baidu.com/","用户名":"张三","密码":"123"},,win+v剪贴板上也会存在

相关推荐
xjt_09012 分钟前
浅析Web存储系统
前端
foxhuli22940 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu1 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js