vue 画二维码及长按保存

在Vue中，你可以使用vue-qrcode库来生成二维码，并使用long-press事件来实现长按保存功能。以下是一个简单的示例：

1. 安装vue-qrcode和long-press事件模块：

npm install vue-qrcode
npm install @chenfengyuan/vue-longpress

2. 在Vue组件中使用：

<template>
  <div>
    <vue-qrcode
      :value="qrContent"
      :size="200"
    ></vue-qrcode>
    <button v-longpress="longPress" longpress-duration="1000">长按保存二维码</button>
  </div>
</template>
 
<script>
import VueQrcode from 'vue-qrcode'
import LongPress from '@chenfengyuan/vue-longpress'
 
export default {
  components: {
    VueQrcode,
    'v-longpress': LongPress.directive
  },
  data() {
    return {
      qrContent: 'https://example.com'
    }
  },
  methods: {
    longPress() {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const img = new Image()
 
      canvas.width = 200
      canvas.height = 200
 
      img.onload = () => {
        ctx.drawImage(img, 0, 0)
        const link = document.createElement('a')
        link.download = 'qrcode.png'
        link.href = canvas.toDataURL('image/png')
        link.click()
      }
 
      const qrcodeElement = this.$el.querySelector('vue-qrcode')
      img.src = qrcodeElement.querySelector('canvas').toDataURL('image/png')
    }
  }
}
</script>

在这个示例中，我们首先导入了vue-qrcode和vue-longpress。然后，在模板中我们使用vue-qrcode组件来显示二维码，并添加了一个按钮来处理长按事件。在longPress方法中，我们创建了一个canvas，将二维码图片绘制到canvas上，然后创建一个<a>标签并触发下载。这样，用户长按按钮时就可以保存二维码图片到设备了。