vue3-json-viewer 的复制功能无效
问题描述
使用 vue3-json-viewer
查看 JSON 格式的数据,但是点击右上角的复制按钮无法将数据复制到操作系统的剪贴板。
发现问题
假如自带有此功能,那么浏览器应该有 Error 级别的日志,但是查看控制台只发现了 Warning 的日志如下:
事实加上
@copied
后依然存在此警告。
解决
给 JsonViewer
组件增加 @copied
:
<JsonViewer
:value="jsonData"
copyable
sort
boxed
theme="dark"
:expand-depth="3"
expanded
@copied="copyData" // 这里新加的
>
<template v-slot:copy="{copied}">
<span v-if="copied">已复制</span>
<span v-else>复制</span>
</template>
</JsonViewer>
function copyData(cpd) {
navigator.clipboard.writeText(cpd.text)
}
就可以复制了,但是依然会有上面的警告,不知道原因。