组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
option | ObjectasPropType<qrOpts> | 看下面的参数 |
“option” 中的参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
baseColor | Array,String | #fff | 二维码背景色,可以是数组颜色,将产生渐变 |
backgroundImage | String | null | 使用图片作为二维码背景 |
backgroundColor | Array,String | null | 背景色,可以是数组颜色,将产生渐变。 |
size | Number | 300 | 图片大小 |
border | Number | 0.05 | 边 width = size * border,比如二维码是200,那么想要让边为10那么 border = 200*0.05 |
str | String | 内容 | |
forgroundColor | String | #000 | 二维码前景色,也可以是["#FF0000","#FFFF00"]如果提供数组,将会绘制渐变色 |
logoImage | String | null | logo图片 |
logoWidth | Number | 20 | 宽 |
logoHeight | Number | 20 | 高 |
ecc | String | M | 容错等级[ 'L', 'M', 'Q', 'H' ] |
linearDir | String | tlbr | 如果forgroundColor是数组渐变色,则此可以更改渐变方向,left,right,bottom,top,tlbr:左顶点至底右下点,trbl,右顶点底右左点,bltr右底左点至顶右点。brtl底右点至顶左点。 |
🌹 事件
无
🌽 slot插槽
默认default
🥗 ref方法
如果在安卓端nvue原生的情况下保存二维码有未知问题,请使用vue页面使用本组件。
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
savev3.0.63+ | - | 图片路径string,h5端返回的是base64 | 保存当前生成的二维码图片 |
💏 文档贡献
此页文档由﹎wj潕钶取玳贡献,如果对该框架感兴趣的可以参与我们一同进步!