fix
This commit is contained in:
iqudoo
12
README.md
12
README.md
@@ -84,6 +84,8 @@ interface ScanConfigOptions {
|
||||
webScanCanvasEnabled?: boolean;
|
||||
webScanCanvasStyle?: string;
|
||||
webScanCloseButtonStyle?: string;
|
||||
webScanCanvasClass?: string;
|
||||
webScanCloseButtonClass?: string;
|
||||
webScanType?: ("qrCode" | "barCode")[];
|
||||
webScanVideoMirror?: boolean;
|
||||
webScanVideoMirrorVertical?: boolean;
|
||||
@@ -111,8 +113,10 @@ interface ScanConfigOptions {
|
||||
| `bridgeName` | 挂载在 `window` 上的桥接对象名称 | `__bridge_client__` |
|
||||
| `webScanEnabled` | 是否支持 WebScan 扫码 | `true` |
|
||||
| `webScanCanvasEnabled` | 是否显示 WebScan 扫码 canvas；关闭后仍会用隐藏 canvas 识别 | `true` |
|
||||
| `webScanCanvasStyle` | WebScan 扫码 canvas 样式 | `position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;` |
|
||||
| `webScanCloseButtonStyle` | WebScan 扫码 canvas 关闭按钮样式 | 显示在 canvas 右上角 |
|
||||
| `webScanCanvasStyle` | WebScan 扫码 canvas 内联样式 | `position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;` |
|
||||
| `webScanCloseButtonStyle` | WebScan 关闭按钮内联样式（在默认位置上追加）；按钮内容为 SVG，`path` 使用 `currentColor`，可通过按钮的 `color` 改图标颜色 | 圆形半透明底、白图标，定位在 canvas 右上角 |
|
||||
| `webScanCanvasClass` | WebScan canvas 根元素 `class`，便于用外部样式表配合 `webScanCanvasStyle` 定制 | 无 |
|
||||
| `webScanCloseButtonClass` | WebScan 关闭按钮 `class`，便于用外部样式表配合 `webScanCloseButtonStyle` 定制 | 无 |
|
||||
| `webScanType` | WebScan 扫码类型 | `["qrCode", "barCode"]` |
|
||||
| `webScanVideoMirror` | WebScan 视频是否水平镜像；不配置时自动判断：前置/PC 镜像，后置不镜像 | 自动 |
|
||||
| `webScanVideoMirrorVertical` | WebScan 视频是否垂直镜像 | `false` |
|
||||
@@ -214,7 +218,9 @@ IScan.config({
|
||||
|
||||
```js
|
||||
IScan.config({
|
||||
webScanCanvasEnabled: true
|
||||
webScanCanvasEnabled: true,
|
||||
webScanCanvasClass: "my-webscan-canvas",
|
||||
webScanCloseButtonClass: "my-webscan-close"
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
8
dist/index.d.ts
vendored
8
dist/index.d.ts
vendored
@@ -61,6 +61,14 @@ interface ScanConfigOptions {
|
||||
* 网页扫码canvas关闭按钮样式，默认显示在canvas右上角
|
||||
*/
|
||||
webScanCloseButtonStyle?: string,
|
||||
/**
|
||||
* 网页扫码 canvas 根元素的 class，便于配合外部样式表定制布局与外观
|
||||
*/
|
||||
webScanCanvasClass?: string,
|
||||
/**
|
||||
* 网页扫码关闭按钮的 class
|
||||
*/
|
||||
webScanCloseButtonClass?: string,
|
||||
/**
|
||||
* 网页扫码类型，默认支持二维码和条码
|
||||
*/
|
||||
|
||||
2
dist/index.js
vendored
2
dist/index.js
vendored
File diff suppressed because one or more lines are too long
12
dist/index.md
vendored
12
dist/index.md
vendored
@@ -84,6 +84,8 @@ interface ScanConfigOptions {
|
||||
webScanCanvasEnabled?: boolean;
|
||||
webScanCanvasStyle?: string;
|
||||
webScanCloseButtonStyle?: string;
|
||||
webScanCanvasClass?: string;
|
||||
webScanCloseButtonClass?: string;
|
||||
webScanType?: ("qrCode" | "barCode")[];
|
||||
webScanVideoMirror?: boolean;
|
||||
webScanVideoMirrorVertical?: boolean;
|
||||
@@ -111,8 +113,10 @@ interface ScanConfigOptions {
|
||||
| `bridgeName` | 挂载在 `window` 上的桥接对象名称 | `__bridge_client__` |
|
||||
| `webScanEnabled` | 是否支持 WebScan 扫码 | `true` |
|
||||
| `webScanCanvasEnabled` | 是否显示 WebScan 扫码 canvas；关闭后仍会用隐藏 canvas 识别 | `true` |
|
||||
| `webScanCanvasStyle` | WebScan 扫码 canvas 样式 | `position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;` |
|
||||
| `webScanCloseButtonStyle` | WebScan 扫码 canvas 关闭按钮样式 | 显示在 canvas 右上角 |
|
||||
| `webScanCanvasStyle` | WebScan 扫码 canvas 内联样式 | `position: fixed; width: 300px; height: 300px; top: 0; left: 0; z-index: 9999;` |
|
||||
| `webScanCloseButtonStyle` | WebScan 关闭按钮内联样式（在默认位置上追加）；按钮内容为 SVG，`path` 使用 `currentColor`，可通过按钮的 `color` 改图标颜色 | 圆形半透明底、白图标，定位在 canvas 右上角 |
|
||||
| `webScanCanvasClass` | WebScan canvas 根元素 `class`，便于用外部样式表配合 `webScanCanvasStyle` 定制 | 无 |
|
||||
| `webScanCloseButtonClass` | WebScan 关闭按钮 `class`，便于用外部样式表配合 `webScanCloseButtonStyle` 定制 | 无 |
|
||||
| `webScanType` | WebScan 扫码类型 | `["qrCode", "barCode"]` |
|
||||
| `webScanVideoMirror` | WebScan 视频是否水平镜像；不配置时自动判断：前置/PC 镜像，后置不镜像 | 自动 |
|
||||
| `webScanVideoMirrorVertical` | WebScan 视频是否垂直镜像 | `false` |
|
||||
@@ -214,7 +218,9 @@ IScan.config({
|
||||
|
||||
```js
|
||||
IScan.config({
|
||||
webScanCanvasEnabled: true
|
||||
webScanCanvasEnabled: true,
|
||||
webScanCanvasClass: "my-webscan-canvas",
|
||||
webScanCloseButtonClass: "my-webscan-close"
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ const scanWeb = {
|
||||
const DEFAULT_SCAN_BEEP_AUDIO = scanBeepAudio;
|
||||
const ZXING_READER_WASM_PATH = "lib/reader.wasm";
|
||||
const WEBSCAN_CLOSE_BUTTON_ID = "__webscan_close_button__";
|
||||
const DEFAULT_WEBSCAN_CLOSE_BUTTON_STYLE = "width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; line-height: 28px; text-align: center; cursor: pointer; z-index: 10000;";
|
||||
const WEBSCAN_CLOSE_ICON_SVG = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M139.445 1002.491L512.23 629.716l372.775 372.775c28.672 28.672 78.843 28.672 107.52 0 28.703-28.672 28.703-78.842 0-107.52L619.75 522.187l372.775-372.795c28.703-28.672 28.703-78.853 0-107.52-28.677-28.672-78.848-28.672-107.52 0L512.23 414.636 139.445 41.876c-28.677-28.672-78.848-28.672-107.54 0C17.963 55.813 10.95 74.828 10.55 93.972v3.318c0.4 19.148 7.413 38.164 21.355 52.106L404.69 522.19 31.905 894.971c-13.942 13.917-20.956 32.973-21.355 52.096v3.292c0.4 19.16 7.413 38.175 21.355 52.137 28.692 28.662 78.868 28.662 107.54-0.005z\" fill=\"currentColor\"/></svg>";
|
||||
const DEFAULT_WEBSCAN_CLOSE_BUTTON_STYLE = "width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10000;";
|
||||
const currentScriptSrc = typeof document !== "undefined"
|
||||
&& document.currentScript
|
||||
&& document.currentScript.src;
|
||||
@@ -441,6 +442,7 @@ export function startScanForWeb(canvasStyle, onResult) {
|
||||
canvasBaseStyle + " display: none;", true);
|
||||
canvasDisplay = canvasEl.style.display;
|
||||
canvasEl.style.cssText = canvasBaseStyle;
|
||||
canvasEl.className = getConfig("webScanCanvasClass") || "";
|
||||
canvasDisplay = canvasEl.style.display;
|
||||
let canvasDisplaySize = getCanvasDisplaySize(canvasEl, 300, 240);
|
||||
canvasEl.style.display = "none";
|
||||
@@ -448,7 +450,8 @@ export function startScanForWeb(canvasStyle, onResult) {
|
||||
if (canvasEnabled) {
|
||||
closeButtonEl = createEl("button", WEBSCAN_CLOSE_BUTTON_ID, "display: none;", true);
|
||||
closeButtonEl.type = "button";
|
||||
closeButtonEl.innerHTML = "x";
|
||||
closeButtonEl.className = getConfig("webScanCloseButtonClass") || "";
|
||||
closeButtonEl.innerHTML = WEBSCAN_CLOSE_ICON_SVG;
|
||||
closeButtonEl.setAttribute("aria-label", "close");
|
||||
closeButtonEl.onclick = event => {
|
||||
event.preventDefault && event.preventDefault();
|
||||
@@ -532,7 +535,7 @@ export function startScanForWeb(canvasStyle, onResult) {
|
||||
displayed = true;
|
||||
canvasEl.style.display = canvasDisplay || "";
|
||||
updateWebScanCloseButtonStyle(closeButtonEl, canvasEl);
|
||||
closeButtonEl && (closeButtonEl.style.display = "block");
|
||||
closeButtonEl && (closeButtonEl.style.display = "flex");
|
||||
}
|
||||
detecting = true;
|
||||
detector.detect(videoEl).then(barcodes => {
|
||||
|
||||
8
types/index.d.ts
vendored
8
types/index.d.ts
vendored
@@ -61,6 +61,14 @@ interface ScanConfigOptions {
|
||||
* 网页扫码canvas关闭按钮样式，默认显示在canvas右上角
|
||||
*/
|
||||
webScanCloseButtonStyle?: string,
|
||||
/**
|
||||
* 网页扫码 canvas 根元素的 class，便于配合外部样式表定制布局与外观
|
||||
*/
|
||||
webScanCanvasClass?: string,
|
||||
/**
|
||||
* 网页扫码关闭按钮的 class
|
||||
*/
|
||||
webScanCloseButtonClass?: string,
|
||||
/**
|
||||
* 网页扫码类型，默认支持二维码和条码
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user