Vue+element实现点击复制功能

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

netho0

6530人浏览 · 2021-02-02 13:48:08

netho0 · 2021-02-02 13:48:08 发布

功能

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

核心方法是

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^