1.0.6 • Published 9 months ago
vue-shot-image v1.0.6
vue-shot-image
vue-shot-image 是一个基于 html2canvas 封装的仿微信截图的 vue2 截图插件，根据当前浏览器页面（如果页面过高，只对可见视口区域）进行截图，生成 base64 字符串图片
属性
| 属性名 | 默认值描述 |
|---|---|
| options | shotDom: 截图 dom 元素 ，默认 document.body enableWebRtc: 是否开启 WebRtc 截图，默认 false，即为 canvas 截图 cancelCallback: WebRtc 截图未授权回调，默认空 wrcReplyTime: WebRtc 截图延迟时间，默认500ms |
| size | 尺寸，可选值：medium, small, mini，默认small |
| showFileList | 是否显示截图列表，默认 true |
| multiple | 是否多选，默认 true |
| limit | 多选最多限制，默认 3 |
| disable | 是否置灰，默认 false |
ps: 可以使用 v-model 关联截图产生的数据进行同步，如果你希望排除某些元素进行截图，可以给元素添加 data-html2canvas-ignore 属性，渲染时会将它们从中自动排除。
插槽
支持自定义插槽
| 插槽名 | 作用 |
|---|---|
| shot-button | 用于按钮的显示 |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| shot-start | () => { }; | |
| shot-complete | (url) => { }; | 完成截图的当前URL |
| shot-change | (arr | url) => { }; | 多选时为URL数组，单选时为URL |
| shot-end | () => { }; | |
| download-fail | (err) => { }; | 错误信息 |
| download-success | (name) => { }; | 下载的文件名 |
不支持的 CSS 属性
- background-blend-mode
- border-image
- box-decoration-break
- box-shadow
- filter
- font-variant-ligatures
- mix-blend-mode
- object-fit
- repeating-linear-gradient()
- writing-mode
- zoom