Vue+element实现点击复制功能

最新推荐文章于 2024-05-16 21:34:48 发布

netho0

最新推荐文章于 2024-05-16 21:34:48 发布

阅读量6.1k

点赞数 5

分类专栏：分享自学文章标签： vue js

本文链接：https://blog.csdn.net/netho0/article/details/113552862

版权

分享同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

自学

8 篇文章 0 订阅

订阅专栏

功能

点击按钮或指定位置后将数据复制到剪贴版,避免手动复制

核心方法是

document.execCommand("Copy");

但是这个是需要文字被选中时才可以复制成功

所以第二个方法就是创建一个input后再自动选择内容,实现复制功能

效果图

上代码(heam标签里面的依赖别忘记改路径)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    element-ui导入-->
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <!--    index样式导入-->
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-ui/lib/index.js"></script>
</head>
<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<body>

<div id="div">
    <span>
        可用试试用鼠标选中我后复制(win+e查看剪贴版)
    </span>
    <el-button type="primary" plain @click="selectCopy()">选中文字后复制</el-button>
    <!--             复制密码按钮-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="复制商品">
                            <span @click="copy(props.row.name)">{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="复制店铺">
                            <el-button type="text" @click="copy(props.row.shop)" >复制店铺</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品 ID"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="商品名称"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="描述"
                    prop="desc">
            </el-table-column>
        </el-table>
    </template>




</div>
</body>

<script>
    new Vue({
        el: "#div",
        data: {
            tableData: [{
                id: '12987122',
                name: '好滋好味鸡蛋仔',
                category: '江浙小吃、小吃零食',
                desc: '荷兰优质淡奶，奶香浓而不腻',
                address: '上海市普陀区真北路',
                shop: '王小虎夫妻店',
                shopId: '10333'
            }, {
                id: '12987123',
                name: '好滋好味鸡蛋仔',
                category: '江浙小吃、小吃零食',
                desc: '荷兰优质淡奶，奶香浓而不腻',
                address: '上海市普陀区真北路',
                shop: '王小虎夫妻店',
                shopId: '10333'
            }],
            copyData: null

        },
        methods: {
            // 选中文字后复制
            selectCopy() {
                document.execCommand("Copy"); // 执行浏览器复制命令
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            // 点击复制
            copy(data) {

                let url = data;
                let oInput = document.createElement('input');
                oInput.value = url;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象;
                console.log(oInput.value)
                document.execCommand("Copy"); // 执行浏览器复制命令
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
                oInput.remove()
            }

        }
    })
</script>
</html>

netho0

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue+element实现点击复制功能

功能点击按钮或指定位置后将数据复制到剪贴版,避免手动复制核心方法是document.execCommand("Copy");但是这个是需要文字被选中时才可以复制成功所以第二个方法就是创建一个input后再自动选择内容,实现复制功能效果图上代码(heam标签里面的依赖别忘记改路径)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
复制链接

扫一扫

专栏目录