vue 如何实现粘贴复制功能

·  阅读 4555
vue 如何实现粘贴复制功能

项目中如果实现粘贴复制功能,目前市面上共有四种方法,均有利有弊,大家可以根据自己项目实际情况依次选择。本节将都会对这四种方法做详细阐述,重点推荐第四种方法。

1. 项目需求图展示:

微信图片_20220329112002.png

1. 安装第三方插件方法(不推荐)

这种方法兼容性很好,如果项目只使用了一次,不建议使用。

安装插件

npm install clipboard --save
复制代码

引入插件

import Clipboard from 'clipboard';
复制代码

项目中使用

<template>
    <span class="copy" @click="onCopy">
        <i class="iconfont iconcopy"></i>
        <span>点击复制</span>
    </span>
</template>

<script>
    methods: {
        onCopy(){
             let clipboard = new Clipboard('.copy')
             clipboard.on('success', e => {
               console.log('复制成功')
               // 释放内存
               clipboard.destroy()
             })
             clipboard.on('error', e => {
               // 不支持复制
               console.log('该浏览器不支持自动复制')
               // 释放内存
               clipboard.destroy()
             })
           }
    }
</script>
复制代码

2. 浏览器自带Document.execCommand()复制方法(不推荐)

虽然这个方法不需要安装插件,但是官网申明如下:

微信图片_20220329133434.png

项目中使用

<script>
    methods: {
        onCopy(){
            //创建一个input框
            const input = document.createElement("input")
            //将指定的DOM节点添加到body的末尾
            document.body.appendChild(input)
            //设置input框的value值为直播地址
            input.setAttribute("value", e)
            //选取文本域中的内容
            input.select()
            //copy的意思是拷贝当前选中内容到剪贴板
            //document.execCommand()方法操纵可编辑内容区域的元素
            //返回值为一个Boolean,如果是 false 则表示操作不被支持或未被启用
            if (document.execCommand("copy")) {
            document.execCommand("copy")
            }
            //删除这个节点
            document.body.removeChild(input)
    }
</script>
复制代码

3. Vue 内置 el-tooltip的v-clipboard剪切板方法(据需求选用)

顾名思义,这方法只使用于vue el-tooltip组件,基本不存在任何兼容性,更不需要安装任何插件,简单快捷易上手,但是它受项目需求限制,如果你的项目满足以下要求,那么恭喜你,选择此方法,再合适不过了。

项目需求示意图:

微信图片_20220331094701.png

这种需求共有两种方法实现:

  1. 通过点击后面复制按钮图标进行复制
<template>
    <div class="inputInfo copy_icon">
        <el-tooltip placement="top" effect="dark" :content="copyText">
            <span class="ellipsis" style="max-width:100px;display:inline-block;">{{copyText}}</span>
        </el-tooltip>
        <i style="margin-left:10px;cursor: pointer" class="el-icon-document-copy" v-clipboard:copy="copyText" v-clipboard:success="onCopy"></i>
    </div>
</template>

<script>
    data() { 
        copyText: '我是你将复制的文本内容呢'
    },
    methods:{
        onCopy() {
            this.$message.success('复制成功')
        }
    }
</script>

<style lang="scss" scoped>
    .ellipsis {
        max-width:100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
</style>
复制代码

此方法会通过v-clipboard:copy方法,将你要复制的内容进行绑定,然后传给v-clipboard:success方法进行获取,会返回成功的结果+失败的结果,当出现当前复制成功的提示后,就可以将复制的内容,进行粘贴啦(基本不会出现复制失败的情况,失败方法v-clipboard:error)

2. 通过直接点击el-tooltip进行复制

此方法和第一种方法,大同小异,唯一的区别,就是在于你的v-clipboard:success复制成功方法给在了那个DOM上。

这两种方法,你就可以根据自己的项目需求来选择,如果你的项目需求是为了醒目复制,那就选择方法一,如果是快捷复制,不需要醒目复制按钮,那就选择方法二。

4. Clipboard.writeText方法(强烈推荐)

说明

Clipboard 接口的 writeText()  方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise ,一旦剪贴板的内容被更新,它就会被解析。如果调用者没有写入剪贴板的权限,则拒绝写入剪切板(reject)

项目中使用

onCopy() {
    navigator.clipboard.writeText(this.detailData.clientSecret).then(() => {
        this.$message.success('复制成功')
    })
}
复制代码

END...

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改