PHP建站技术分享-从入门到精通_各类知识收集PHP建站技术分享-从入门到精通_各类知识收集PHP建站技术分享-从入门到精通_各类知识收集

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > CMS教程 > Fastadmin

使用 Clipboard 实现复制功能

管理员 2024-12-14
Fastadmin
61

当由业务需求是实现复制时,可以使用 Clipboard 帮助实现复制、剪切内容到剪切板,功能实现如下:

ClipboardJs 中文网文档:clipboardjs.cn
1. 引入 Clipboard

在项目根目录执行命令(需要在命令行模式执行,Windows 资源管理器中打开CMD即可)
bower install clipboard
回车执行。由于 Fastadminbower 进行了配置,所以会将 clipboard 自动安装到 publicassetslibsclipboard

如果你不打算进行包管理,可以直接下载 ZIP文件
将下载文件放在 publicassetslibsclipboard 目录即可

2. RequireJs 配置文件中引入 Clipboard
修改 RequireJs 配置,如果只有后端用,可以不修改前端的
public/assets/js/require-frontend.js (前端用)
public/assets/js/require-backend.js (后端用)

paths 属性的值对象最后一行追加 后缀是.js时,可以省略.js
'clipboard': '../libs/clipboard/dist/clipboard.min'
image.png

3. 在需要复制功能的 JS 文件中使用 Clipboard

使用 RequireJs 引入,在 defind 函数的第一个数组实参后面追加 , "clipboard"。第二个函数实参的形参后面追加 , Clipboard。效果如下:
image.png

bootstrapTable 配置中对需要复制的列,使用 formatter 格式化文本。
例如:

(代码中重要部分是 class="btn btn-copy" 其中 btn 用于将当前元素转换成按钮,btn-copy 是为了绑定到 ClipboardJs 后面监听时会用到,其他的都可以自定义。n 可以用于换行)

image.png
或在底部 api 对象中新增 formatter 对象:
image.png
image.png

4. 最后一步,绑定事件

在底部 api 对象中新增 events 对象:
image.png

然后在当前 JS 中找到以下代码:

// 为表格绑定事件Table.api.bindevent(table);

在其后面调用 copy 函数,这样就完成了复制功能
image.png

后期若有其他的列需要实现复制功能,重复 formatter 格式化部分,不需要再次写监听

本文关键词:

希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, LeCMS, ClassCMS, Fastadmin, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部