PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通

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

使用 Clipboard 实现复制功能

管理员 2024-12-14
Fastadmin
6

当由业务需求是实现复制时,可以使用 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, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部