基础组件开发是项目业务开发的基石，因此掌握基础组件的封装流程是熟练掌握vue的基本功，本文介绍了微信二维码支付基础组件的封装流程。

• 初始化vue项目

执行如下命令创建vue2项目(基于vue-cli 4.5.12)
vue create wechat-pay
按照提示选择即可

• 安装依赖

npm install vue-qr -S

• 定义微信支付组件

在components目录下新建WechatPay.vue文件
代码如下:

<template>
  <div class="wechar-pay" @click="download">
    <vue-qr
      class="qrcode"
      :text="text"
      :correctLevel="correctLevel"
      :size="size"
      :margin="margin"
      :colorDark="colorDark"
      :colorLight="colorLight"
      :backgroundColor="backgroundColor"
      :backgroundDimming="backgroundDimming"
      :logoSrc="logoSrc"
      :logoScale="logoScale"
      :logoMargin="logoMargin"
      :logoBackgroundColor="logoBackgroundColor"
    ></vue-qr>
    <h2>请用微信扫码支付</h2>
    <h2>￥<b>{{ amount }}</b>元
    </h2>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: 'WechatPay',
  components: {
    VueQr
  },
  props: {
    text: {
      type: String,
      default: 'https://www.shenmazong.com'
    },
    correctLevel: {
      type: Number,
      default: 3
    },
    size: {
      type: Number,
      default: 250
    },
    margin: {
      type: Number,
      default: 10
    },
    colorDark: {
      type: String,
      default: '#000'
    },
    colorLight: {
      type: String,
      default: '#fff'
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    },
    backgroundDimming: {
      type: String,
      default: '#fff'
    },
    logoSrc: {
      type: String,
      default: require('@/assets/logo.png')
    },
    logoScale: {
      type: Number,
      default: 0.2
    },
    logoMargin: {
      type: Number,
      default: 5
    },
    logoBackgroundColor: {
      type: String,
      default: '#fff'
    },
    amount: {
      type: Number,
      default: 0.0
    },
  },
  methods: {
    download () {
      const el = document.querySelector('.wechar-pay img')
      const a = document.createElement('a')
      a.download = '微信支付'
      a.href = el.src

      a.dispatchEvent(new MouseEvent('click'))
    }
  }
}
</script>
<style scoped>
.wechar-pay {
  display: inline-block;
  padding: 30px 50px;
  background-color: #2ba245;
  color: #fff;
  cursor: pointer;
}
h2 {
  font-weight: normal;
}
</style>

• 使用组件

<template>
    <div style="margin: 20px;">
        <div style="left;margin-bottom: 20px;">
            <el-button @click="creatQrCode">生成二维码</el-button>
        </div>
        <WechatPay :text="qrcode" :amount="amount" :logoSrc="imageUrl" />
    </div>
</template>

<script>
    import WechatPay from '@/components/WechatPay.vue'
    export default {
        name: 'QrCodePage3',
        components: {
            WechatPay
        },
        data() {
            return {
                qrcode: 'https://www.shenmazong.com/blog/1579025021812068352',
                amount: 99,
                imageUrl: require("../assets/logo.png"),
            }
        },
        mounted() {
        },
        methods: {
            creatQrCode() {
            },
        }
    }
</script>

<style>
</style>

• 运行效果

• 代码结构

参考文章

• VUE2–封装微信支付二维码组件