当前位置: 首页 > news >正文

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)
}

就可以复制了,但是依然会有上面的警告,不知道原因。

相关文章:

  • AI大模型 推理 思维链 原理
  • Hive: 中文注释乱码问题
  • Effective Objective-C 2.0 读书笔记——大中枢派发
  • ubuntu 安装管理多版本python3 相关问题解决
  • AI Agent 技术在网络中有什么应用
  • 正顺基碱基
  • 【深度学习】环境和分布偏移
  • TCP/UDP协议与OSI七层模型的关系解析| HTTPS与HTTP安全性深度思考》
  • 【Mysql索引在什么情况下会失效?】
  • Kubernetes: Kustomize 进阶, 使用 Patch 精准操控 ConfigMap 多行文本,实现配置参数化
  • 笔记9——循环语句:for语句、while语句
  • PageHelper分页异常深度解析与解决方案
  • Maven 中的 Artifact 与 GroupId:定义与使用
  • 【愚公系列】《Python网络爬虫从入门到精通》019-使用 BeautifulSoup 的CSS选择器
  • deepseek本地调用
  • vscode的一些实用操作
  • CMake 编译工具
  • python基础语法
  • Spring Boot 与 Java 决策树:构建智能分类系统
  • 把程序加入开机自启动
  • 外交部官方公众号发布视频:不跪!
  • 西班牙葡萄牙遭遇史上最严重停电:交通瘫了,通信崩了,民众疯抢物资
  • 习近平:在庆祝中华全国总工会成立100周年暨全国劳动模范和先进工作者表彰大会上的讲话
  • 中公教育薪酬透视:董监高合计涨薪122万,员工精简近三成
  • 俄罗斯称已收复库尔斯克州,普京发表讲话
  • 伊朗阿巴斯港港口爆炸已致47人受伤