@xiangheng08/qrcode

Appearance

快速开始 ​

让我们快速开始使用 @xiangheng08/qrcode 创建你的第一个二维码。

基础使用 ​

最简单的使用方式是直接在 HTML 中使用 xh-qrcode 组件：

html
<xh-qrcode value="Hello World!"></xh-qrcode>

这将创建一个默认配置的二维码，内容为 "Hello World!"。

自定义属性 ​

你可以通过设置不同的属性来自定义二维码的外观和行为：

html
<xh-qrcode
  value="Hello World!"
  color="#00ff00"
  background="#000000"
  size="200"
  errorcorrectionlevel="H"
>
</xh-qrcode>

完整示例 ​

以下是一个完整的 HTML 示例：

html
<!DOCTYPE html>
<html>
  <head>
    <title>QRCode Example</title>
    <script type="module" src="https://unpkg.com/@xiangheng08/qrcode/dist/xh-qrcode.js"></script>
  </head>
  <body>
    <h1>我的二维码</h1>
    <xh-qrcode value="https://example.com" size="200" color="#000" background="#fff"> </xh-qrcode>
  </body>
</html>

在框架中使用 ​

Vue 示例 ​

vue
<template>
  <div>
    <h1>二维码示例</h1>
    <xh-qrcode :value="qrValue" :size="200"></xh-qrcode>
    <input v-model="qrValue" placeholder="输入二维码内容" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import '@xiangheng08/qrcode'

const qrValue = ref('Hello Vue!')
</script>

INFO

如果出现 "If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement." 警告，这是因为 Vue 默认将非标准 HTML 标签当作组件处理。可以通过配置 compilerOptions.isCustomElement 选项，告诉 Vue 将特定标签视为原生自定义元素，从而跳过组件解析。

更多详情请参考 Vue 与 Web Components 官方文档。

vite.config.js
js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 将以 xh- 开头的标签识别为自定义元素
          isCustomElement: (tag) => tag.startsWith('xh-'),
        }
      }
    })
  ]
}

React 示例 ​

jsx
import { useState } from 'react'
import '@xiangheng08/qrcode'

function App() {
  const [value, setValue] = useState('Hello React!')

  return (
    <div>
      <h1>二维码示例</h1>
      <xh-qrcode value={value} size={200}></xh-qrcode>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="输入二维码内容"
      />
    </div>
  )
}

export default App

下一步 ​