Vue组件设计-复制粘贴

越陌度阡

发布于 2023-05-26 16:07:11

3230

发布于 2023-05-26 16:07:11

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除

clipboard