Skip to content
On this page

组件库文档 tmui.design

二维码 Qrcode

生成二维码。


🌶️ 二维码 Qrcode 示例

查看模拟效果
示例代码
vue
<template>
	<tm-app>
		<tm-sheet _class="flex-col">
			<tm-text :font-size="30" _class="text-weight-b" label="基础示例,更多玩法见文档"></tm-text>
			<tm-divider></tm-divider>
			<tm-input :border="1" v-model="str" @search="changeStr" searchLabel="生成"></tm-input>
			<tm-divider></tm-divider>
			<tm-radio-group v-model="vsd" defaultValue="0" @change="change">
				<tm-radio value="0" label="基础"></tm-radio>
				<tm-radio value="1" label="红码"></tm-radio>
				<tm-radio value="2" label="渐变"></tm-radio>
				<tm-radio value="3" label="彩色背景"></tm-radio>
				<tm-radio value="4" label="加logo"></tm-radio>
				<tm-radio value="5" label="改变边距"></tm-radio>
				<tm-radio value="6" label="背景图"></tm-radio>
			</tm-radio-group>
			<tm-divider></tm-divider>
			<tm-qrcode ref="qrcode" :option="cfig"></tm-qrcode>

			<tm-button block @click="saveImg" label="获取图片数据"></tm-button>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
import tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
import tmQrcode from '@/tmui/components/tm-qrcode/tm-qrcode.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmInput from '@/tmui/components/tm-input/tm-input.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
const qrcode = ref<InstanceType<typeof tmQrcode> | null>(null)
const str = ref('我爱你tmui.design')
const cfig = ref({ str: str.value })
const vsd = ref('0')

function change(e) {
	let type = Number(e)
	if (type === 0) {
		cfig.value = { baseColor: '#FFFFFF', forgroundColor: '#000000', str: str.value }
	} else if (type === 1) {
		cfig.value = { baseColor: '#FFFFFF', forgroundColor: '#FF0000', str: str.value }
	} else if (type === 2) {
		cfig.value = { baseColor: '#FFFFFF', forgroundColor: ['#FF0000', '#FFFF00'], str: str.value }
	} else if (type === 3) {
		cfig.value = { baseColor: ['#FF0000', '#FFFF00'], forgroundColor: '#000000', str: str.value }
	} else if (type === 4) {
		cfig.value = { logoImage: 'https://cdn.tmui.design/public/design/logoCir.png', str: str.value, logoWidth: 30, logoHeight: 30 }
	} else if (type === 5) {
		cfig.value = { border: 0.1, str: str }
	} else if (type === 6) {
		cfig.value = { forgroundColor: '#FFFFFF', str: str, backgroundImage: 'https://cdn.tmui.design/public/echart/qrbg.jpg' }
	}
}
function changeStr() {
	cfig.value = { baseColor: '#FFFFFF', forgroundColor: '#000000', str: str.value }
	vsd.value = '0'
}
function saveImg() {
	qrcode.value?.save().then((img) => {
		uni.$tm.u.toast('获取成功')
		console.log(img)
	})
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
optionObjectasPropType<qrOpts>看下面的参数

“option” 中的参数

参数名类型默认值描述
baseColorArray,String#fff二维码背景色,可以是数组颜色,将产生渐变
backgroundImageStringnull使用图片作为二维码背景
backgroundColorArray,Stringnull背景色,可以是数组颜色,将产生渐变。
sizeNumber300图片大小
borderNumber0.05边 width = size * border,比如二维码是200,那么想要让边为10那么 border = 200*0.05
strString内容
forgroundColorString#000二维码前景色,也可以是["#FF0000","#FFFF00"]如果提供数组,将会绘制渐变色
logoImageStringnulllogo图片
logoWidthNumber20
logoHeightNumber20
eccStringM容错等级[ 'L', 'M', 'Q', 'H' ]
linearDirStringtlbr如果forgroundColor是数组渐变色,则此可以更改渐变方向,left,right,bottom,top,tlbr:左顶点至底右下点,trbl,右顶点底右左点,bltr右底左点至顶右点。brtl底右点至顶左点。

🌹 事件

🌽 slot插槽

默认default

🥗 ref方法

如果在安卓端nvue原生的情况下保存二维码有未知问题,请使用vue页面使用本组件。

方法名参数返回值描述
savev3.0.63+-图片路径string,h5端返回的是base64保存当前生成的二维码图片

💏 文档贡献

此页文档由﹎wj潕钶取玳贡献,如果对该框架感兴趣的可以参与我们一同进步!