tki-qrcode.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template xlang="wxml" minapp="mpvue">
  2. <view class="tki-qrcode">
  3. <!-- #ifndef MP-ALIPAY -->
  4. <canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
  5. <!-- #endif -->
  6. <!-- #ifdef MP-ALIPAY -->
  7. <canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
  8. <!-- #endif -->
  9. <image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
  10. </view>
  11. </template>
  12. <script>
  13. import QRCode from "./qrcode.js"
  14. let qrcode
  15. export default {
  16. name: "tki-qrcode",
  17. props: {
  18. cid: {
  19. type: String,
  20. default: 'tki-qrcode-canvas'
  21. },
  22. size: {
  23. type: Number,
  24. default: 200
  25. },
  26. unit: {
  27. type: String,
  28. default: 'upx'
  29. },
  30. show: {
  31. type: Boolean,
  32. default: true
  33. },
  34. val: {
  35. type: String,
  36. default: ''
  37. },
  38. background: {
  39. type: String,
  40. default: '#ffffff'
  41. },
  42. foreground: {
  43. type: String,
  44. default: '#000000'
  45. },
  46. pdground: {
  47. type: String,
  48. default: '#000000'
  49. },
  50. icon: {
  51. type: String,
  52. default: ''
  53. },
  54. iconSize: {
  55. type: Number,
  56. default: 40
  57. },
  58. lv: {
  59. type: Number,
  60. default: 3
  61. },
  62. onval: {
  63. type: Boolean,
  64. default: false
  65. },
  66. loadMake: {
  67. type: Boolean,
  68. default: false
  69. },
  70. usingComponents: {
  71. type: Boolean,
  72. default: true
  73. },
  74. showLoading: {
  75. type: Boolean,
  76. default: true
  77. },
  78. loadingText: {
  79. type: String,
  80. default: '二维码生成中'
  81. },
  82. },
  83. data() {
  84. return {
  85. result: '',
  86. }
  87. },
  88. methods: {
  89. _makeCode() {
  90. let that = this
  91. if (!this._empty(this.val)) {
  92. qrcode = new QRCode({
  93. context: that, // 上下文环境
  94. canvasId:that.cid, // canvas-id
  95. usingComponents: that.usingComponents, // 是否是自定义组件
  96. showLoading: that.showLoading, // 是否显示loading
  97. loadingText: that.loadingText, // loading文字
  98. text: that.val, // 生成内容
  99. size: that.cpSize, // 二维码大小
  100. background: that.background, // 背景色
  101. foreground: that.foreground, // 前景色
  102. pdground: that.pdground, // 定位角点颜色
  103. correctLevel: that.lv, // 容错级别
  104. image: that.icon, // 二维码图标
  105. imageSize: that.iconSize,// 二维码图标大小
  106. cbResult: function (res) { // 生成二维码的回调
  107. that._result(res)
  108. },
  109. });
  110. } else {
  111. uni.showToast({
  112. title: '二维码内容不能为空',
  113. icon: 'none',
  114. duration: 2000
  115. });
  116. }
  117. },
  118. _clearCode() {
  119. this._result('')
  120. qrcode.clear()
  121. },
  122. _saveCode() {
  123. let that = this;
  124. if (this.result != "") {
  125. uni.saveImageToPhotosAlbum({
  126. filePath: that.result,
  127. success: function () {
  128. uni.showToast({
  129. title: '二维码保存成功',
  130. icon: 'success',
  131. duration: 2000
  132. });
  133. }
  134. });
  135. }
  136. },
  137. _result(res) {
  138. this.result = res;
  139. this.$emit('result', res)
  140. },
  141. _empty(v) {
  142. let tp = typeof v,
  143. rt = false;
  144. if (tp == "number" && String(v) == "") {
  145. rt = true
  146. } else if (tp == "undefined") {
  147. rt = true
  148. } else if (tp == "object") {
  149. if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
  150. } else if (tp == "string") {
  151. if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
  152. } else if (tp == "function") {
  153. rt = false
  154. }
  155. return rt
  156. }
  157. },
  158. watch: {
  159. size: function (n, o) {
  160. if (n != o && !this._empty(n)) {
  161. this.cSize = n
  162. if (!this._empty(this.val)) {
  163. setTimeout(() => {
  164. this._makeCode()
  165. }, 100);
  166. }
  167. }
  168. },
  169. val: function (n, o) {
  170. if (this.onval) {
  171. if (n != o && !this._empty(n)) {
  172. setTimeout(() => {
  173. this._makeCode()
  174. }, 0);
  175. }
  176. }
  177. }
  178. },
  179. computed: {
  180. cpSize() {
  181. if(this.unit == "upx"){
  182. return uni.upx2px(this.size)
  183. }else{
  184. return this.size
  185. }
  186. }
  187. },
  188. mounted: function () {
  189. if (this.loadMake) {
  190. if (!this._empty(this.val)) {
  191. setTimeout(() => {
  192. this._makeCode()
  193. }, 0);
  194. }
  195. }
  196. },
  197. }
  198. </script>
  199. <style>
  200. .tki-qrcode {
  201. position: relative;
  202. }
  203. .tki-qrcode-canvas {
  204. position: fixed;
  205. top: -99999upx;
  206. left: -99999upx;
  207. z-index: -99999;
  208. }
  209. </style>