QRCode 二维码 ​

vue

<template>
  <el-qr-code :text="text" />
  <br />
  <el-input v-model="text" style="width: 240px" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const text = ref<string>('Summer')
</script>

vue

<template>
  <el-space :size="32">
    <el-qr-code
      :text="text"
      icon-src="https://avatars.githubusercontent.com/u/20411966?v=4&size=64"
    />

    <el-qr-code
      :text="text"
      icon-src="https://avatars.githubusercontent.com/u/20411966?v=4&size=64"
      :icon-config="{
        radius: 4,
        padding: 0,
        size: 30,
        backgroundColor: '#fff',
      }"
    />
  </el-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const text = ref<string>('Summer')
</script>

vue

<template>
  <el-button-group>
    <el-button @click="add">尺寸+10</el-button>
    <el-button @click="subtract">尺寸-10</el-button>
  </el-button-group>
  <br />
  <el-qr-code :text="text" :size="size" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const text = ref<string>('Summer')

const size = ref<number>(150)

const add = () => (size.value += 10)

const subtract = () => (size.value -= 10)
</script>

vue

<template>
  <div style="margin-bottom: 16px">
    <el-space>
      <span>color</span>
      <el-color-picker v-model="color" />
      <span>backgroundColor</span>
      <el-color-picker v-model="backgroundColor" />
    </el-space>
  </div>
  <el-qr-code
    :text="text"
    :color="color"
    :background-color="backgroundColor"
    :margin="1"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const text = ref<string>('Summer')
const color = ref<string>()
const backgroundColor = ref<string>()
</script>

vue

<template>
  <div style="margin-bottom: 16px">
    <el-radio-group v-model="radio">
      <el-radio-button label="low" value="L" />
      <el-radio-button label="medium" value="M" />
      <el-radio-button label="quartile" value="Q" />
      <el-radio-button label="high" value="H" />
    </el-radio-group>
  </div>
  <el-qr-code :text="text" :options="options" />
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
const text = ref<string>('https://cn.vuejs.org/')
const radio = ref('L')

const options = computed(() => {
  return {
    errorCorrectionLevel: radio.value,
  }
})
</script>

vue

<template>
  <el-space :size="32">
    <el-flex vertical>
      <el-qr-code
        ref="qrCodeRef"
        :text="text"
        :margin="1"
        icon-src="https://avatars.githubusercontent.com/u/20411966?v=4&size=64"
      />
      <el-button @click="handleClick">下载</el-button>
    </el-flex>

    <el-flex vertical>
      <el-qr-code ref="qrCodeRef1" :margin="1" :text="text" />
      <el-button @click="handleClick1">下载</el-button>
    </el-flex>
  </el-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const text = ref<string>('Summer')

const qrCodeRef = ref()
const qrCodeRef1 = ref()

const handleClick = () => {
  qrCodeRef.value.downloadQRCode()
}
const handleClick1 = () => {
  qrCodeRef1.value.downloadQRCode('code.png')
}
</script>