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="font-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 :option="cfig"></tm-qrcode>
		</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"
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"
}
</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潕钶取玳贡献,如果对该框架感兴趣的可以参与我们一同进步!