You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.1 KiB
124 lines
3.1 KiB
<template xlang="wxml"> |
|
<view class="container"> |
|
<view class="qrimg"> |
|
<tki-qrcode v-if="ifShow" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" /> |
|
</view> |
|
<view class="uni-padding-wrap"> |
|
<view class="uni-title">请输入要生成的二维码内容</view> |
|
</view> |
|
<view class="uni-list"> |
|
<input class="uni-input" placeholder="请输入要生成的二维码内容" v-model="val" /> |
|
</view> |
|
<view class="uni-padding-wrap uni-common-mt"> |
|
<view class="uni-title">设置二维码大小</view> |
|
</view> |
|
<view class="body-view"> |
|
<slider :value="size" @change="sliderchange" min="50" max="500" show-value /> |
|
</view> |
|
<view class="uni-padding-wrap"> |
|
<view class="btns"> |
|
<button type="primary" @tap="selectIcon">选择二维码图标</button> |
|
<button type="primary" @tap="creatQrcode">生成二维码</button> |
|
<button type="primary" @tap="saveQrcode">保存到图库</button> |
|
<button type="warn" @tap="clearQrcode">清除二维码</button> |
|
<button type="warn" @tap="ifQrcode">显示隐藏二维码</button> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue' |
|
export default { |
|
data() { |
|
return { |
|
ifShow: true, |
|
val: '二维码', // 要生成的二维码值 |
|
size: 200, // 二维码大小 |
|
unit: 'upx', // 单位 |
|
background: '#b4e9e2', // 背景色 |
|
foreground: '#309286', // 前景色 |
|
pdground: '#32dbc6', // 角标色 |
|
icon: '', // 二维码图标 |
|
iconsize: 40, // 二维码图标大小 |
|
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行 |
|
onval: false, // val值变化时自动重新生成二维码 |
|
loadMake: true, // 组件加载完成后自动生成二维码 |
|
src: '' // 二维码生成后的图片地址或base64 |
|
} |
|
}, |
|
methods: { |
|
sliderchange(e) { |
|
this.size = e.detail.value |
|
}, |
|
creatQrcode() { |
|
this.$refs.qrcode._makeCode() |
|
}, |
|
saveQrcode() { |
|
this.$refs.qrcode._saveCode() |
|
}, |
|
qrR(res) { |
|
this.src = res |
|
}, |
|
clearQrcode() { |
|
this.$refs.qrcode._clearCode() |
|
this.val = '' |
|
}, |
|
ifQrcode() { |
|
this.ifShow = !this.ifShow |
|
}, |
|
selectIcon() { |
|
let that = this |
|
uni.chooseImage({ |
|
count: 1, //默认9 |
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|
sourceType: ['album'], //从相册选择 |
|
success: function (res) { |
|
that.icon = res.tempFilePaths[0] |
|
setTimeout(() => { |
|
that.creatQrcode() |
|
}, 100); |
|
// console.log(res.tempFilePaths); |
|
} |
|
}); |
|
} |
|
}, |
|
components: { |
|
tkiQrcode |
|
}, |
|
onLoad: function () { }, |
|
} |
|
</script> |
|
|
|
<style> |
|
/* @import "../../../common/icon.css"; */ |
|
.container { |
|
display: flex; |
|
flex-direction: column; |
|
width: 100%; |
|
} |
|
|
|
.qrimg { |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
slider { |
|
width: 100%; |
|
} |
|
|
|
input { |
|
width: 100%; |
|
margin-bottom: 20upx; |
|
} |
|
|
|
.btns { |
|
display: flex; |
|
flex-direction: column; |
|
width: 100%; |
|
} |
|
|
|
button { |
|
width: 100%; |
|
margin-top: 10upx; |
|
} |
|
</style>
|
|
|