【Vue.JS】实现copy复制功能

1.编写需要复制的内容

<template>
    <div>
        <div v-for="(item, index) in list" :key="index">
            <div style="margin-top:100px">
                {{ item.shop_name }}
            
            </div>
          
        </div>


    </div>
</template>
<script>

export default {
    name: '',
    
    components: {},
    data() {
        return {
            list: [
                {

                    shop_name: '手机专卖店',

                }]
        };
    },
  
    methods: {
       
    },
   
}
</script>

2.编写copy的js，放在methods

<script>

export default {
    name: '',
    
    components: {},
    data() {
        return {
            list: [
                {

                    shop_name: '手机专卖店',

                }]
        };
    },

    methods: {
        // 复制
        copyUrl(val) {
            // 模拟 输入框
            var cInput = document.createElement("input");
            cInput.value = val;
            document.body.appendChild(cInput);
            cInput.select(); // 选取文本框内容

            // 执行浏览器复制命令
            // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
            // Input要在正常的编辑状态下原生复制方法才会生效

            document.execCommand("copy");

            this.$message({
                type: "success",
                message: "复制成功"
            });
            // 复制成功后再将构造的标签 移除
            document.body.removeChild(cInput);
        },
    },
  
}
</script>

3最后是使用它

<template>
    <div>
        <div v-for="(item, index) in list" :key="index">
            <div style="margin-top:100px">
                {{ item.shop_name }}
              <!-- 复制 -->
                <a @click="copyUrl(item.shop_name)">
                    <img src="../assets/image/copy.png" alt="">
                </a>

            </div>

        </div>


    </div>
</template>

4总结

copy能够实现，还未进行值是否为空判断，其次一个页面可以使用多个copy

<!-- 把copyUrl后的值更改成你想要复制的就可以了 -->
 <a @click="copyUrl(item.shop_name)">

</a>