wordpress怎么建设网站,如何建设购物网站,网页生成微信小程序,做网站一定要买目录
拷贝需求
一、clipboard插件方案
1.clipboard安装
2.初始化Clipboard
3.模板使用
二、Clipboard.writeText方法
三、总结 我的博客原文#xff1a;https://code-nav.top/article/1067
拷贝需求
哈哈#xff0c;今天实现个小功能#xff0c;复制功能#xff0…
目录
拷贝需求
一、clipboard插件方案
1.clipboard安装
2.初始化Clipboard
3.模板使用
二、Clipboard.writeText方法
三、总结 我的博客原文https://code-nav.top/article/1067
拷贝需求
哈哈今天实现个小功能复制功能需求是点击分享按钮能把这个链接设置粘贴板 效果如下 下面我推荐给大家两种方法大家根据自己需求使用。 一、clipboard插件方案 1.clipboard安装
npm地址https://www.npmjs.com/package/clipboard
npm install clipboard --save
2.初始化Clipboard
引入Clipboard script代码如下
// 功能为阉割样式版仅供参考
script langts
import { defineComponent } from vue;
import Clipboard from clipboard; // 引入Clipboard
import { message } from ant-design-vue;
export default defineComponent({name: DownLoadItem,setup() {const copyId dom; // 可以父组件传动态domconst id 11; // 可动态传入// 分享const copy () {const clipboard new Clipboard(.${copyId});clipboard.on(success, () {message.success(链接已复制赶快去分享吧);clipboard.destroy();});clipboard.on(error, e {console.log(该浏览器不支持自动复制!, warning, e);clipboard.destroy();});};const copyText // 内容可动态赋值我在前端小阳仔的博客中发现了好文章快来围观啦链接 https://code-nav.top/download/${id})};return {copy,copyText};}
});
/script
3.模板使用
templatespan :data-clipboard-textcopyText :classcopyId clickcopy分享/span
/template 参数解读
参数描述data-clipboard-text需要被复制的文本class动态类 如果你到了这一步那代表你的复制粘贴功能完美实现啦恭喜恭喜 二、Clipboard.writeText方法 Clipboard 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise 一旦剪贴板的内容被更新它就会被解析。如果调用者没有写入剪贴板的权限则拒绝写入剪切板reject
copy() {navigator.clipboard.writeText(需要复制的内容。。。可动态传值).then(() {console.log(复制成功)})
}三、总结 两种方案都很不错第二种相对比较简单当然萝卜青菜各有所爱大家根据自己的爱好选择即可。用户体验度又上升啦YYDS欢迎在评论区交流。
如果文章对你有所帮助❤️关注点赞❤️鼓励一下博主会持续更新。。。。 功能在线体验链接https://code-nav.top/download?id9 往期回顾 vue3中使用prismjs或者highlight.js实现代码高亮 vue中粘贴板clipboard的使用方法 vue3使用i18n 实现国际化
图片懒加载vue3-lazy
Vite4.2 Vue3.2Less实现主题切换功能
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
