m8-framework-mcp 1.0.0 → 1.0.1

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/073-qrcode/344/272/214/347/273/264/347/240/201.md

@@ -1,1538 +0,0 @@
-# 组件使用
-
-## qrcode 二维码
-
-### 介绍
-
-- 二维码组件。
-
-### 代码演示
-
-#### 基础用法
-
-```html
-<em-qrcode
-  ref="qr1"
-  canvas-id="qr1"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  @click="remake('qr1')"
-  @complete="complete($event, 'qr1')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr1 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr1.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 设置了边距、半透明蓝色背景和红色前景色的二维码
-
-```html
-<em-qrcode
-  ref="qr3"
-  canvas-id="qr3"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-        margin: 10,
-        backgroundColor: 'rgba(25, 147, 227, 0.5)',
-        foregroundColor: 'rgb(185, 0, 0)'
-    }"
-  @click="remake('qr3')"
-  @complete="complete($event, 'qr3')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr3 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr3.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 设置了定位角、分割图案、对齐图案、时序图案、暗块、版本信息颜色的二维码
-
-```html
-<em-qrcode
-  ref="qr4"
-  canvas-id="qr4"
-  :value="`---------------------------${text}---------------------------`"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-        positionProbeBackgroundColor: 'rgba(105,126,255,0.28)',
-        positionProbeForegroundColor: '#697eff',
-        separatorColor: 'rgba(184,112,253,0.29)',
-        positionAdjustBackgroundColor: 'rgba(255,122,140,0.28)',
-        positionAdjustForegroundColor: '#ff7a8c',
-        timingBbackgroundColor: 'rgba(252,219,135,0.21)',
-        timingForegroundColor: '#fcdb87',
-        darkBlockColor: '#0f47ff',
-        typeNumberBackgroundColor: 'rgba(0,255,83,0.18)',
-        typeNumberForegroundColor: '#00ff53'
-    }"
-  @click="remake('qr4')"
-  @complete="complete($event, 'qr4')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr4 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr4.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 设置了纠错等级为 M 的二维码
-
-```html
-<em-qrcode
-  ref="qr5"
-  canvas-id="qr5"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-        errorCorrectLevel: 'M'
-    }"
-  @click="remake('qr5')"
-  @complete="complete($event, 'qr5')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr5 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr5.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 带 logo 的二维码，logo 处于二维码中间
-
-```html
-<em-qrcode
-  ref="qr6"
-  canvas-id="qr6"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-        foregroundImageSrc: '../../../static/logo.jpg',
-        foregroundImageWidth: size / 5,
-        foregroundImageHeight: size / 5,
-        queue: queue
-    }"
-  @click="remake('qr6')"
-  @complete="complete($event, 'qr6')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr6 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr6.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 带 logo 的二维码，logo 处于二维码右下角，与边距有一定距离
-
-```html
-<em-qrcode
-  ref="qr7"
-  canvas-id="qr7"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-                                foregroundImageSrc: '../../../static/logo.jpg',
-                                foregroundImageWidth: size / 5,
-                                foregroundImageHeight: size / 5,
-                                foregroundImageX: size - 10 - size / 5, // 图片绘制的水平坐标，计算到靠右位置
-                                foregroundImageY: size - 10 - size / 5, // 图片绘制的垂直坐标，计算到考下位置
-                                queue: queue
-                            }"
-  @click="remake('qr7')"
-  @complete="complete($event, 'qr7')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr7 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr7.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 带背景图片的二维码，背景缩放 1.5 倍，且背景图片带有一定透明度
-
-```html
-<em-qrcode
-  ref="qr8"
-  canvas-id="qr8"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-                                backgroundColor: 'rgba(0,0,0,0.2)',
-                                backgroundImageSrc: '../../../static/logo.jpg',
-                                backgroundImageWidth: size * 0.75, // 图片宽
-                                backgroundImageHeight: size * 0.75, // 图片高
-                                backgroundImageX: size / 2 - (size * 0.75) / 2, // 图片绘制的水平坐标，计算到居中位置
-                                backgroundImageY: size / 2 - (size * 0.75) / 2, // 图片绘制的垂直坐标，计算到居中位置
-                                backgroundImageAlpha: 0.88, // 透明度
-                                foregroundColor: 'rgb(11, 34, 116)',
-                                queue: queue
-                            }"
-  @click="remake('qr8')"
-  @complete="complete($event, 'qr8')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr8 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr8.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 背景图片来自网络资源的二维码，且背景铺满，前景色为白色，小程序下绘制网络图片需先配置 download 域名白名单才能生效
-
-```html
-<em-qrcode
-  ref="qr9"
-  canvas-id="qr9"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-                                backgroundImageSrc: 'https://img01.yzcdn.cn/vant/cat.jpeg',
-                                backgroundImageWidth: size,
-                                backgroundImageHeight: size,
-                                backgroundImageAlpha: 1,
-                                foregroundColor: '#f0f0f0',
-                                margin: 10,
-                                queue: queue
-                            }"
-  @click="remake('qr9')"
-  @complete="complete($event, 'qr9')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr9 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr9.value; // 这里需要在模板中使用
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### logo 来自网络资源的二维码，且带有边距填充和阴影，小程序下绘制网络图片需先配置 download 域名白名单才能生效
-
-```html
-<em-qrcode
-  ref="qr10"
-  canvas-id="qr10"
-  :value="text"
-  :size="size"
-  :start="true"
-  :auto="true"
-  :options="{
-                                foregroundImageSrc: 'https://img01.yzcdn.cn/vant/cat.jpeg',
-                                foregroundImageWidth: size * 0.25,
-                                foregroundImageHeight: size * 0.25,
-                                foregroundImagePadding: 4,
-                                foregroundImageBorderRadius: 4,
-                                foregroundImageShadowBlur: 50,
-                                foregroundImageShadowColor: 'rgba(0, 0, 0, 0.68)',
-                                queue: queue
-                            }"
-  @click="remake('qr10')"
-  @complete="complete($event, 'qr10')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr10 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr10.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 批量生成的二维码
-
-```html
-<view class="qrcode-box" v-for="(item, index) in 5" :key="index">
-  <view class="qrcode">
-    <em-qrcode
-      ref="qr"
-      :canvas-id="`qr_${index}`"
-      :value="`qr_${index}`"
-      :size="size"
-      :start="true"
-      :auto="false"
-      @click="remake(index)"
-      @complete="complete($event, `qr_${index}`)"
-    ></em-qrcode>
-  </view>
-</view>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(index) {
-      var ref = this.$refs.qr;
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[index].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr = ref(null);
-
-const remake = (index) => {
-  const ref = qr.value; // 这里需要在模板中使用
-  /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-  if (Array.isArray(ref)) {
-    ref[index].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 异步生成的二维码——示例 1
-
-```html
-<em-qrcode
-  ref="qrsync1"
-  canvas-id="qrsync1"
-  :value="textSync"
-  :size="size"
-  :start="false"
-  :auto="true"
-  @click="remake('qrsync1')"
-  @complete="complete($event, 'qrsync1')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      textSync: "",
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  onLoad() {
-    new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve({
-          text: "uQRCode Sync",
-        });
-      }, 3000);
-    }).then((res) => {
-      this.textSync = res.text;
-    });
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-
-const textSync = ref("");
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qrsync1 = ref(null);
-
-onLoad(() => {
-  new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve({
-        text: "uQRCode Sync",
-      });
-    }, 3000);
-  }).then((res) => {
-    textSync.value = res.text;
-  });
-});
-
-const remake = (refName) => {
-  const ref = qrsync1.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 异步生成的二维码——示例 2
-
-```html
-<em-qrcode
-  ref="qrsync1"
-  canvas-id="qrsync1"
-  :value="textSync"
-  :size="size"
-  :start="false"
-  :auto="true"
-  @click="remake('qrsync1')"
-  @complete="complete($event, 'qrsync1')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      textSync2: "",
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  onReady() {
-    new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve({
-          text: "uQRCode Sync",
-        });
-      }, 3000);
-    }).then((res) => {
-      this.textSync2 = res.text;
-      this.make("qrsync2");
-    });
-  },
-  methods: {
-    make(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].make();
-      } else {
-        ref.make();
-      }
-    },
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-import { onReady } from "@dcloudio/uni-app";
-
-const textSync2 = ref("");
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qrsync1 = ref(null);
-
-onReady(() => {
-  new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve({
-        text: "uQRCode Sync",
-      });
-    }, 3000);
-  }).then((res) => {
-    textSync2.value = res.text;
-    make("qrsync2");
-  });
-});
-
-const make = (refName) => {
-  const ref = qrsync1.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].make();
-  } else {
-    ref.make();
-  }
-};
-
-const remake = (refName) => {
-  const ref = qrsync1.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-```
-
-::: endif
-
-#### 弹层——示例 1
-
-```html
-<em-popup ref="popup1" v-model="showPopup1">
-  <view class="qrcode-box" style="margin-top: 30px">
-    <view class="qrcode">
-      <em-qrcode
-        ref="qrpopup1"
-        canvas-id="qrpopup1"
-        :value="text"
-        :size="size"
-        :start="false"
-        @click="remake('qrpopup1')"
-        @complete="complete($event, 'qrpopup1')"
-      ></em-qrcode>
-    </view>
-    <span class="msg">
-      弹层测试，第一种写法，默认二维码组件加载完毕暂不生成，通过弹层组件的change事件去调用二维码组件的make方法去触发生成
-    </span>
-    <view class="btns">
-      <em-button class="btn" type="primary" @click="showPopup1 = false"
-        >关闭</em-button
-      >
-    </view>
-  </view>
-</em-popup>
-<em-button class="btn" type="primary" @click="onClickPopup1()"
-  >弹层测试一</em-button
->
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      showPopup1: false,
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-    onClickPopup1() {
-      this.showPopup1 = true;
-      setTimeout(() => {
-        this.$refs.qrpopup1.make();
-      }, 150);
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const showPopup1 = ref(false);
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const popup1 = ref(null);
-const qrpupup1 = ref(null);
-
-const remake = (refName) => {
-  const ref = qrpupup1.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-
-const onClickPopup1 = () => {
-  showPopup1.value = true;
-  setTimeout(() => {
-    qrpupup1.value.make();
-  }, 150);
-};
-```
-
-::: endif
-
-#### 弹层——示例 2
-
-```html
-<em-popup ref="popup2" v-model="showPopup2">
-  <view class="qrcode-box" style="margin-top: 30px">
-    <view class="qrcode">
-      <em-qrcode
-        ref="qrpopup2"
-        canvas-id="qrpopup2"
-        :value="text"
-        :size="size"
-        :start="true"
-        @click="remake('qrpopup2')"
-        @complete="complete($event, 'qrpopup2')"
-      ></em-qrcode>
-    </view>
-    <span class="msg">
-      弹层测试，第二种写法，默认二维码组件加载完毕立马生成，在某些设备弹层时canvas组件未在第一时间渲染完毕，可能会生成失败。优化方式，在弹层组件的change事件里延时150毫秒左右调用二维码组件的remake方法即可
-    </span>
-    <view class="btns">
-      <em-button class="btn" type="primary" @click="showPopup2 = false"
-        >关闭</em-button
-      >
-    </view>
-  </view>
-</em-popup>
-<em-button class="btn" type="primary" @click="onClickPopup2()"
-  >弹层测试二</em-button
->
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      textSync: "",
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-    onClickPopup2() {
-      this.showPopup2 = true;
-      setTimeout(() => {
-        this.$refs.qrpopup2.make();
-      }, 150);
-    },
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const showPopup2 = ref(false);
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const popup2 = ref(null);
-const qrpupup2 = ref(null);
-
-const remake = (refName) => {
-  const ref = qrpupup2.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-
-const onClickPopup2 = () => {
-  showPopup2.value = true;
-  setTimeout(() => {
-    qrpupup2.value.make();
-  }, 150);
-};
-```
-
-::: endif
-
-#### 这是在 EJS 容器内部可使用 EJS API 截图的二维码
-
-```html
-<em-button class="emButton" @click="onClickScreenShot">点击截屏</em-button>
-<em-qrcode
-  ref="qr11"
-  :size="200"
-  :value="'https://example.com'"
-  :options="{
-                                foregroundImageSrc: '/static/logo.jpg',
-                                foregroundImageWidth: size / 5,
-                                foregroundImageHeight: size / 5,
-                                foregroundImageX: size - 10 - size / 5,
-                                foregroundImageY: size - 10 - size / 5
-                            }"
-  @click="remake('qr11')"
-  @complete="complete($event, 'qr11')"
-></em-qrcode>
-```
-
-::: ifdef M83
-
-```js
-export default {
-  name: "Qrcode",
-  data() {
-    return {
-      text: "//app.epoint.com.cn/m8fedoc/",
-      size: 200,
-    };
-  },
-  methods: {
-    remake(refName) {
-      var ref = this.$refs[refName];
-      /* ref通过v-for遍历后会自动包裹在数组里，所以要判断一下 */
-
-      if (Array.isArray(ref)) {
-        ref[0].remake();
-      } else {
-        ref.remake();
-      }
-    },
-    complete(e, refName) {
-      if (e.success) {
-        console.log(refName + "生成成功");
-      } else {
-        console.log(refName + "生成失败");
-      }
-    },
-  },
-  onClickScreenShot() {
-    ejs.io.screenShot({
-      captureType: 1,
-      success: function (result) {
-        ejs.ui.toast("success");
-      },
-      error: function (error) {},
-    });
-  },
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from "vue";
-
-const text = ref("//app.epoint.com.cn/m8fedoc/");
-const size = ref(200);
-const qr11 = ref(null);
-
-const remake = (refName) => {
-  const ref = qr11.value; // 这里需要在模板中使用
-
-  // ref通过v-for遍历后会自动包裹在数组里，所以要判断一下
-  if (Array.isArray(ref)) {
-    ref[0].remake();
-  } else {
-    ref.remake();
-  }
-};
-
-const complete = (e, refName) => {
-  if (e.success) {
-    console.log(refName + "生成成功");
-  } else {
-    console.log(refName + "生成失败");
-  }
-};
-
-const onClickScreenShot = (e, refName) => {
-  ejs.io.screenShot({
-    captureType: 1,
-    success: function (result) {
-      ejs.ui.toast("success");
-    },
-    error: function (error) {},
-  });
-};
-```
-
-::: endif
-
-### API
-
-#### Props
-
-| 参数      |               说明               | 类型            | 默认值   |
-| :-------- | :------------------------------: | :-------------- | :------- |
-| size      |         生成二维码的尺寸         | number / string | `200`    |
-| canvas-id |          canvas 组件 id          | string          | -        |
-| value     |            二维码内容            | number / string | - `必填` |
-| fileType  | 导出的文件类型，支持 `jpg` `png` | string          | `png`    |
-| start     |    是否初始化组件后就开始生成    | boolean         | `true`   |
-| auto      |     是否数据发生改变自动重绘     | boolean         | `false`  |
-| hide      |          是否隐藏该组件          | boolean         | `false`  |
-| options   |        二维码配置项，见下        | object          | -        |
-
-### options 配置项
-
-| 参数                          |                                                  说明                                                   | 类型    |
-| :---------------------------- | :-----------------------------------------------------------------------------------------------------: | :------ |
-| backgroundColor               |                                              二维码背景色                                               | string  |
-| foregroundColor               |                                              二维码颗粒色                                               | string  |
-| margin                        |                                            较上下左右的边距                                             | number  |
-| positionProbeBackgroundColor  |                                              定位角背景色                                               | string  |
-| positionProbeForegroundColor  |                                              定位角颗粒色                                               | string  |
-| separatorColor                |                                            定位角内里分割色                                             | string  |
-| positionAdjustBackgroundColor |                                             对齐图案背景色                                              | string  |
-| positionAdjustForegroundColor |                                             对齐图案颗粒色                                              | string  |
-| timingBbackgroundColor        |                                             时序图案背景色                                              | string  |
-| timingForegroundColor         |                                            时序图案角颗粒色                                             | string  |
-| darkBlockColor                |                                               暗块背景色                                                | string  |
-| typeNumberBackgroundColor     |                                             版本信息背景色                                              | string  |
-| typeNumberForegroundColor     |                                             版本信息颗粒色                                              | string  |
-| errorCorrectLevel             | 纠错等级(容错率),即值越高被遮挡的地方有点多也能被识别;默认`H`,可选择值为 `L:7%` `M:15%` `Q:25%` `H:30%` | string  |
-| foregroundImageSrc            |                                         二维码 logo 的 img 地址                                         | string  |
-| foregroundImageWidth          |                                            二维码 logo 的宽                                             | number  |
-| foregroundImageHeight         |                                            二维码 logo 的高                                             | number  |
-| foregroundImageX              |                                   图片绘制的水平坐标，计算到靠右位置                                    | number  |
-| foregroundImageY              |                                   图片绘制的垂直坐标，计算到靠下位置                                    | number  |
-| queue                         |                             所有需要加载图片的项都需要将 queue 设置为 true                              | boolean |
-| backgroundImageSrc            |                                           二维码背景图片地址                                            | string  |
-| backgroundImageWidth          |                                            二维码背景图片宽                                             | number  |
-| backgroundImageHeight         |                                            二维码背景图片高                                             | number  |
-| backgroundImageX              |                                   图片绘制的水平坐标，计算到居中位置                                    | number  |
-| backgroundImageY              |                                   图片绘制的垂直坐标，计算到居中位置                                    | number  |
-| backgroundImageAlpha          |                                         二维码背景图片的透明度                                          | number  |
-| foregroundImagePadding        |                                          二维码 logo 边距填充                                           | number  |
-| foregroundImageBorderRadius   |                                         二维码 logo 四周的圆角                                          | number  |
-| foregroundImageShadowBlur     |                                       二维码 logo 的阴影发散的值                                        | number  |
-| foregroundImageShadowColor    |                                         二维码 logo 的阴影颜色                                          | string  |
-
-#### qrcode 方法
-
-通过 `ref` 可以获取到 `qrcode` 实例并调用实例方法，详见组件实例方法
-
-| 方法名 |      说明      | 参数 | 返回值 |
-| :----- | :------------: | :--- | :----- |
-| make   |   生成二维码   | -    | -      |
-| remake | 重新生成二维码 | -    | -      |
-
-#### Events
-
-| 事件名    |      说明      | 回调参数 |
-| :-------- | :------------: | :------- |
-| complete  | 二维码加载成功 | -        |
-| click     |   点击二维码   | -        |
-| longpress |   长按二维码   | -        |
-
-::: ifdef M83
-
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-qrcode"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-qrcode"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-
- <style>
- .ui-showcase-iframe {
-    position: fixed;
-    right: 3.5vw;
-    top: 17%;
-    width: 375px;
-    height: 75vh;
-    box-shadow: 0 0 12px 6px #eee;
-    border-radius: 15px;
- }
- .main .markdown-body {
-    padding: 45px;
-    width: calc(97vw - 661px);
-}
- </style>