Vue中封装复制粘贴插件Clipboard

Posted 2022-12-30 aiguangyuan

Clipboard是最常用的复制粘贴插件，以下代码展示如何在Vue中封装和调用该插件。

1. 安装插件

npm install clipboard --save

2. 插件封装

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() 
    Vue.prototype.$message(
        message: '复制成功',
        type: 'success',
        duration: 1500
    )


function clipboardError() 
    Vue.prototype.$message(
        message: '复制失败',
        type: 'error'
    )


export default function handleClipboard(event,text) 
    const clipboard = new Clipboard(event.target, 
        text: () => text
    )
    clipboard.on('success', () => 
        clipboardSuccess()
        clipboard.destroy()
    )
    clipboard.on('error', () => 
        clipboardError()
        clipboard.destroy()
    )
    clipboard.onClick(event)

3. 调用插件

<template>
    <div>
        <el-table
            border
            :data="tableData"
            style="width:100%;"
            :height="800">
            <el-table-column prop="url" label="推广链接">
                <template slot-scope="obj">
                    <!-- 复制接口返回的推广链接 -->
                    <el-button type="default" @click="copyLink($event,obj.row.url)">
                        复制链接
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import handleClipboard  from "@/utils/clipboard";
export default 
    data() 
        return 
            tableData:[
                id:1,url:"https://www.baidu.com/"
            ],
        ;
    ,
    methods: 
        // 复制链接
        copyLink(event,text)
            handleClipboard(event,text);
        ,
    
;
</script>