说明

为了提升用户复制体验，添加点击按钮复制功能。

实现

页面

  [html]
1
2
<el-button type="primary" @click="addShortUrl" icon="el-icon-plus">添加</el-button>
<el-button type="success" @click="copyShortUrl" v-if="shortUrl !== ''" icon="el-icon-copy-document">复制</el-button>

js

  [js]
1
2
3
4
copyShortUrl() {
    copy(this.shortUrl);
    ELEMENT.Message.success('复制成功');
},

其中 copy 是一个固定的方法：

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 复制
 *
 * @param data 数据
 */
function copy(data)
{
    const url = data;
    const oInput = document.createElement('input');
    oInput.value = url;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象;
    document.execCommand('Copy'); // 执行浏览器复制命令
    oInput.remove()
};

参考资料

https://blog.csdn.net/weixin_43742274/article/details/119116055