[Bug report] copy code 无法在微信H5中使用

[EastWoodYang]

copy code 无法在微信H5中使用，点击无响应

但通过 extendsMarkdown的方式 注入 markdown-it-copy 可以成功复制，但UI 需要自定义调整，有点麻烦

[Mister-Hope]

给一个reproduction谢谢。

[github-actions[bot]]

Hello @EastWoodYang. Please provide a minimal reproduction using a GitHub repository or v2.vuepress.vuejs.org/new. Issues marked with need reproduction will be closed if they have no activity within 7 days.

[EastWoodYang]

比如 把链接 https://v2.vuepress.vuejs.org/guide/getting-started.html#try-it-online 发到微信上，在微信 H5 中打开，代码部分就复制不了

比如 点击不会出现复制，

Google 浏览器里就没问题

然后我把 https://github.com/vuepress/ecosystem/blob/0b8fff7e4a29e1a383fe44a936e45f7670031d95/plugins/plugin-copy-code/src/client/composables/useCopyCode.ts#L78 处的 copy 换成如下就可以在微信 H5 中正常复制了

const copy = (t = '') => new Promise((c, o) => {
        const n = document.createElement('textarea');
        n.value = `${t}`, document.body.appendChild(n), n.select();
        try {
            const t = document.execCommand('copy');
            document.body.removeChild(n), t ? c() : o()
        } catch (t) {
            document.body.removeChild(n), o()
        }
    })

[Mister-Hope]

Please read the docs carefully, copy button is disabled on mobile devices by default.

[EastWoodYang]

在自己的项目中已经打开showInMobile ，在微信H5中还是无法复制，强制显示复制按钮点击是无响应的，最后通过修改 copy 才能复制。

[EastWoodYang]

上面两张截图想表达的意思是，点击黑色代码区域时，微信H5中只会显示黄框不显示复制按钮，，Google chrome中能正常展示复制按钮。通过修改样式使复制按钮一直显示，微信H5中点击还是不法复制，点击无响应（应该是微信H5一些兼容性问题），最后修改copy（这个copy 是拷贝至 markdown-it-copy 就能正常复制了

[EastWoodYang]

Please read the docs carefully, copy button is disabled on mobile devices by default.

另外，https://v2.vuepress.vuejs.org/guide/getting-started.html#try-it-online 应该是开启了showInMobile

[Mister-Hope]

感谢详细的信息，最近比较忙，这种兼容性问题在我这边优先级很低，我会在很晚之后去排查一下。不是特别清楚我要怎么对微信内置的浏览器进行调试。微信开发者工具还是什么？

代码复制本身也没有用什么太新的功能。 有没有可能是微信禁掉了 document.excuceCommand('copy')？ 也许是微信不支持选区之类的操作？控制台能调出来么？有报错么？

另外我没有印象我在官方文档中开启了 showInMobile 功能，麻烦确认一下，然后给一个可以访问的地址，以便 debug。

[Mister-Hope]

更新，重新回顾了一下我用的是 vueuse 的 useClipBoard，你可以搞一个小 demo 看看这个函数能不能在微信浏览器工作（似乎可以直接测试 https://vueuse.org/core/useClipboard/#useclipboard ），如果不能到 vueuse仓库去找找相关issue看看有没有解决办法，或者去开一个 issue？

[Mister-Hope]

似乎微信不允许访问剪切板 api

[Mister-Hope]

我确认国内很多 App 的内置浏览器都从安全性考虑默认禁用了很多权限。

详见 https://github.com/vueuse/vueuse/issues/3008 。

需要等待 antfu 的回复已确认是否可以添加一个选项叫 fallback，不然的话也许我们需要把源码拷贝过来自己实现一下。

[Mister-Hope]

This is considered as upstream bug, I open a pr https://github.com/vueuse/vueuse/pull/3812 that could possibly fix this, and also a feature request https://github.com/vueuse/vueuse/issues/3813