ScanCode 组件

介绍

这是一个 扫码按钮 组件,通过调用 LamboJsBridge 中的 Flutter 方法实现扫码功能

引入

首先需要在项目中引入 LamboJsBridge 并初始化插件（如果未初始化）

/**1
 * Vue main.js 中加入如下代码
 */
console.log("------ 初始化 LamboJsBridge -------")
import LamboJsBridge from "@lambo-design-mobile/lambo-js-bridge";
let lamboJsBridge = new LamboJsBridge();
try {
    const platformInfo = await lamboJsBridge.getPlatform(); // 获取初始化信息
    console.log('LamboJsBridge Platform Info:', JSON.stringify(platformInfo, null, 2));

    //yuntu Flutter 平台需要初始化插件
    const pluginConfig = ["scanCodePlugin"]
    const pluginConfigInfo = await lamboJsBridge.initializePlugin(pluginConfig);
    console.log('LamboJsBridge PluginConfig Info:', pluginConfigInfo);
} catch (error) {
    console.error('Error getting init info:', error);
}
// 将 lamboJsBridge 挂载到 Vue 原型上
Vue.prototype.$lamboJsBridge = lamboJsBridge;

部分引入

import Vue from 'vue';
import ScanCode from '@lambo-design-mobile/scan-code';

Vue.use(ScanCode);

代码演示

基础用法

<template>
  <scan-code iconName="scan"
             iconSize="22px"
             :onScanSuccess="handleSuccess"
             :onScanFail="handleFail"/>
</template>

<script>
    export default {
      components: {ScanCode},
      methods: {
        handleSuccess(msg) {
          Toast.success(msg);
          // 其他处理逻辑
        },
        handleFail(msg) {
          Toast.fail(msg);
          // 其他处理逻辑
        }
      }
    }
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|---------|----| | iconName | 扫码图标 | string | primary | - | | iconSize | 图标大小 | string | 20 | - |

Events

| 事件名 | 说明 | 回调参数 | |------|-------|------| | handleSuccess | 成功时触发 | msg | | handleFail | 失败时触发 | msg |