更新记录

1.0.0(2023-08-24)

初次发布


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.5.0 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

km-screenshot

表单系列,APP 截屏,截长屏

空明组件-APP系列-截屏

PS:

  1. 插件符合 easycom 规范,可以直接在页面中使用
  2. 有问题可以到 QQ 咨询哈(QQ:2796669349)

注意事项

  1. 仅支持页面级滚动长截屏
  2. 长截屏 暂不支持自定义标题栏--备:如果使用了自定义标题栏,则在截屏之前设为顶部静态
  3. 长截屏 暂不支持存在 TabBar 的页面进行截屏(原生 TabBar 和自定义都不支持)--备:如果是自定义的 TabBar 可以在截屏之前隐藏掉 TabBar,成功或者失败之后再显示
  4. 截全屏不会包含原生的 TabBar
  5. 仅测试了 Android 手机(没有苹果手机哈哈哈)

props

参数 类型 默认值 是否必须 说明
longScreenshot Boolean false 是否截长屏。默认 截全屏
screenshotClass String 截长屏时必须。页面级最外层的 CSS 类,没有 CSS 类前面的'.'
saveImageToPhotosAlbum Boolean false 是否截屏完成之后自动保存到相册
on-error Function 截屏错误回调
on-before Function 截屏之前函数。会在截屏之前调用

props 参数解释

  • on-error 上传错误回调
    • 参数
      event: {
      msg: '', // 错误描述
      }
      const onError = (event) => { }

event

事件名 说明
@success 截屏成功回调

event 返回解释

  • @success 上传成功回调
    • 参数
      event: {
      path: '', // 图片路径
      }
      const success = (event) => { }

slot

插槽名 说明
default 默认插槽。插槽内没有默认样式,需要自己传

使用

<km-screenshot 
    :longScreenshot="true"
    :saveImageToPhotosAlbum="true"
    screenshotClass="page-section"
    :onError="onError" 
    @success="success">
    <button>截屏</button> // 点击时直接触发截屏
</km-screenshot>

后期计划

  1. 截屏成功动画-仿手机自带截屏
  2. 修复 自定义 标题栏 问题
  3. 修复 自定义 TabBar 的截长屏问题
  4. 修复 截全屏包含原生的 TabBar 问题

欢迎各位大佬指正

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问