vue3 中使用 vue-clipboard3 复制整个div的html内容

295 阅读1分钟

1. yarn/npm install --save vue-clipboard3

2. 在当前页面引入:import useClipboard from 'vue-clipboard3'

3. 在当前页面的使用:

try { toClipboard(msg) ElMessage({ type: 'success', message: '已将内容复制完成!' }) } catch (e) { ElMessage({ type: 'error', message: e }) }

4. 例子: 我想通过点击按钮复制当前的html内容(包括把a标签要跳转的链接携带)复制到剪切板后可直接粘贴到另外的编辑页面,如下:

image.png

代码实现:在需要复制的div上定义ref="drawerMain",setup内初始化为const drawerMain = ref(null)

image.png

点击事件: ``const gotoWiki = async ()=>{ try { await toClipboard(drawerMain.value) ElMessage({ type: 'success', message: '已将内容复制完成!' }) } catch (e) { ElMessage({ type: 'error', message: e }) } }