vue移动端项目H5+扫码功能组件封装，可直接用

最新推荐文章于 2024-08-06 15:25:28 发布

岸芷汀兰§小慧

最新推荐文章于 2024-08-06 15:25:28 发布

阅读量1.6k

点赞数 1

分类专栏：移动端文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/qq_44712405/article/details/108879297

版权

本文介绍如何在Vue移动端项目中封装一个H5扫码功能组件，该组件适用于HBuilder环境，需真机运行生效。通过这个组件，开发者可以轻松实现JavaScript、Vue.js和HTML5的集成，为应用添加便捷的扫码功能。

摘要由CSDN通过智能技术生成

<template>
  <div class="scanQrcodeComponents">
    <div id="bcid" v-show="show===0"></div>
    <div class="scanCode" @click="startRecognize">
      <van-icon name="enlarge" class="scanImg"/>
      <div class="scanText">点击扫描设备二维码</div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  name: 'scanQrcode',
  data () {
    return {
      show: 0,
      content: undefined,
      scan: null,
    }
  },
  mounted () {
    if (window.plus && window.plus.android) {
      this.plusReady()
    } else {
      document.addEventListener('plusready', this.plusReady, false)
    }
  },
  methods: {
    plusReady() {
      // this.startRecognize()
    },
    qrMarked (type, code, file) {
      // 扫码结果为code
      this.c