vue-json-viewer组件 copyable失效,页面并不现实copy按钮

javascript 复制代码
<json-viewer :value="props.row.param_detail.query" :expand-depth="10" copyable>
</json-viewer>

官方文档中,说明,只要在json-viewer中加入 copyable属性,即可实现copy功能,如下图:
注意:这里我的页面右上角并没有出现copy按钮

最后通过官网的issue得出,这是个bug,我的版本是vue-json-viewer": "^2.2.22

解决方案:

javascript 复制代码
  <json-viewer :value="props.row.param_detail.query" :expand-depth="10" copyable>
         <template v-slot:copy>
           copy
         </template>
   </json-viewer>

在json-viewer中通过v-slot后,页面正常可以复制了,如下图

最后突出issue的解决方案:

地址:copyable 不生效是为什么 ·问题 #82 ·chenfengjw163/vue-json-viewer ·GitHub上

相关推荐
好学且牛逼的马6 分钟前
ES6 核心语法精讲
前端·ecmascript·es6
GISer_Jing8 分钟前
一次编码,七端运行:Taro多端统一架构深度解析与电商实战
前端·aigc·taro
michael_ouyang23 分钟前
IM 消息收发流程方案选型
前端·websocket·网络协议·typescript·electron
Y淑滢潇潇26 分钟前
WEB 作业 三个练习题
前端·javascript·css3
静小谢29 分钟前
前端mock假数据工具JSON Server使用笔记
前端·笔记·json
敲上瘾36 分钟前
用Coze打造你的专属AI应用:从智能体到Web部署指南
前端·人工智能·python·阿里云·aigc
EndingCoder1 小时前
性能优化:类型系统的最佳实践
linux·前端·javascript·ubuntu·性能优化·typescript
毕设源码-朱学姐1 小时前
【开题答辩全过程】以 基于web的生鲜农产品信息管理系统为例,包含答辩的问题和答案
前端
Hello.Reader1 小时前
Flink 2.0 从 flink-conf.yaml 到 config.yaml 的正确打开方式(含迁移与最佳实践)
java·前端·flink
晚霞的不甘1 小时前
Flutter for OpenHarmony:注入灵魂:购物车的数据驱动与状态管理实战
android·前端·javascript·flutter·前端框架