js复制内容到粘贴板(在哪复制都通用)

21 篇文章 0 订阅
 {
                        title:"渠道连接",
                        key:"channelUrl",
                        minWidth: 250,
                        align: "center",
                        render: (h, params) => {
                            return h("div",[
                                h(
                                    "span",
                                    params.row.channelUrl
                                ),
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small",
                                        },
                                        on: {
                                            click: () => {
                                               //这里就是封装好的js代码
                                               const copyToClipboard = str => {
                                                    const el = document.createElement('textarea'); // Create a <textarea> element
                                                    el.value = str; // Set its value to the string that you want copied
                                                    el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
                                                    el.style.position = 'absolute'; 
                                                    el.style.left = '-9999px'; // Move outside the screen to make it invisible
                                                    document.body.appendChild(el); // Append the <textarea> element to the HTML document
                                                    const selected = 
                                                    document.getSelection().rangeCount > 0 // Check if there is any content selected previously
                                                    ? document.getSelection().getRangeAt(0) // Store selection if found
                                                    : false; // Mark as false to know no selection existed before
                                                    el.select(); // Select the <textarea> content
                                                    document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
                                                    document.body.removeChild(el); // Remove the <textarea> element
                                                    if (selected) { // If a selection existed before copying
                                                    document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
                                                    document.getSelection().addRange(selected); // Restore the original selection
                                                    }
                                                };
                                                copyToClipboard(params.row.channelUrl)
                                            }
                                        }
                                    },
                                    "复制"
                                ),

                            ])
                        }
                    },

上面是定义好的一个方法  不管在哪里 都是通用的 此时是结合iview框架使用的  你可以单独提出来这个js

这里会存在一个兼容性 如果在h5页面的话 则需要加一个判断,其他不变

var a = document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
if (!a){
    el.select();
    el.setSelectionRange(0, el.value.length), document.execCommand('Copy');// 执行浏览器复制命令
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沫熙瑾年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值