fix

dist/index.d.ts

@@ -61,6 +61,14 @@ interface ScanConfigOptions {
    * 网页扫码canvas关闭按钮样式，默认显示在canvas右上角
    */
   webScanCloseButtonStyle?: string,
+  /**
+   * 网页扫码 canvas 根元素的 class，便于配合外部样式表定制布局与外观
+   */
+  webScanCanvasClass?: string,
+  /**
+   * 网页扫码关闭按钮的 class
+   */
+  webScanCloseButtonClass?: string,
   /**
    * 网页扫码类型，默认支持二维码和条码
    */

dist/index.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"
 });
 ```