复制功能实现

我们在开发中,可能会遇到点击按钮或者直接点击被复制的文本,实现复制功能也就是代替了Ctrl + C 的功能,可能是偶尔遇到,一般很少遇到这种情况,但是我们也会用到,所以总结了以下两种方式

1. 按钮复制指定内容

 handelCopy ( row ) {
            const url = `https://music.51vv.com/wx/m/active/2022_shining_musician/dist/html/index.html?full=1&activityId=${row.activityId}`; //复制的内容
            const oInput = document.createElement( 'input' );
            oInput.value = url;
            document.body.appendChild( oInput );
            oInput.select(); // 选择对象
            document.execCommand( 'Copy' ); // 执行浏览器复制命令
            this.$message( {
                showClose: true,
                message: '复制成功',
                type: 'success',
            } );
            oInput.remove();
        },

2. 点击复制文本

//一键copy   
copyText ( str ) {
            const input = document.createElement( 'input' );
            document.body.appendChild( input );
            input.setAttribute( 'value', str );
            input.select();
            if ( document.execCommand( 'copy' ) ) {
                document.execCommand( 'copy' );
            }
            setTimeout( () => {
                this.$message.success( '已复制到剪切板！' );
            }, 200 );
            document.body.removeChild( input );
        },