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

最新推荐文章于 2025-06-10 09:27:08 发布

岸芷汀兰§小慧

最新推荐文章于 2025-06-10 09:27:08 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_44712405/article/details/108879297

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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.content = code
      console.log(code)
      // this.$router.push({
      //   name: 'checked',
      //   query: {
      //     id: JSON.par