vue列表加复制功能复制-input clipboard.js vue+clipboard.js vue列表单击复制功

复制-input

<head>
    <title>复制</title>
</head>
<script src="http://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<style>
</style>

<body>
    <div id="app">
        <input type="text" value="https://blog.csdn.net/Tomhs3000" id="copyObj">
        <span class="showtimeone" @click="CopyUrl()">复制</span>
    </div>
</body>

<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            CopyUrl() {
                let url = document.querySelector('#copyObj');
                url.select(); // 选择对象
                document.execCommand("Copy");
            }
        }
    });

</script>

clipboard.js

clipboardjs.com/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>target-div</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <!-- 1. Define some markup -->
    <div>hello</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">
        Copy
    </button>

    <!-- 2. Include library -->
    <script src="https://cdn.staticfile.org/clipboard.js/2.0.11/clipboard.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
        const clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function (e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
        });

        clipboard.on('error', function (e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
        });
    </script>
</body>

</html>

vue+clipboard.js

<head>
    <title>vue列表复制</title>
</head>
<script src="http://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<link rel="stylesheet" href="http://cdn.staticfile.org/element-ui/2.15.8/theme-chalk/index.min.css">
<script src="http://cdn.staticfile.org/element-ui/2.15.8/index.min.js"></script>
<script src="http://cdn.staticfile.org/clipboard.js/2.0.11/clipboard.min.js"></script>
<style>
    .pointer {
        cursor: pointer;
    }
</style>

<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="index" label="序号" width="80px" align="center"></el-table-column>
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
                <template v-slot="{row}">
                    {{row.name}}
                    <i class="el-icon-document-copy pointer" @click="onCopy(row.name)"></i>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</body>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [{
                index: '1',
                date: '2016-05-02',
                name: '王小虎1',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                index: '2',
                date: '2016-05-04',
                name: '王小虎2',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                index: '3',
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                index: '4',
                date: '2016-05-03',
                name: '王小虎4',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        },
        methods: {
            onCopy(text) {
                const clipboard = new ClipboardJS("body", {
                    text: () => {
                        return text;
                    },
                });
                clipboard.on("success", (e) => {
                    this.$message.success("复制成功!");
                    e.clearSelection();
                    clipboard.destroy();
                });

                clipboard.on("error", () => {
                    this.$message.error("复制失败!");
                    clipboard.destroy();
                });
            },
        }
    });

</script>