eoss-ui 0.6.20 → 0.6.22

package/packages/pagination/src/main.vue

@@ -1,96 +1,96 @@
-<template>
-  <el-pagination
-    class="es-pagination"
-    :class="{ 'es-pagination-complete': isComplete && position != 'center' }"
-    v-bind="$attrs"
-    :current-page="pageNum"
-    :page-size="pageSize"
-    :page-sizes="limits"
-    :layout="layout"
-    :total="totalCount"
-    :pager-count="groups"
-    :hide-on-single-page="hideOnSinglePage"
-    :unit="false"
-    @size-change="handleSize"
-    @current-change="handleCurrent"
-    @prev-click="handlePrev"
-    @next-click="handleNext"
-  >
-  </el-pagination>
-</template>
-<script>
-import util from 'eoss-ui/src/utils/util';
-const paginationLayout =
-  util.win.top.tableLayout ||
-  util.win.tableLayout ||
-  'prev, pager, next, sizes, total';
-export default {
-  name: 'EsPagination',
-  inheritAttrs: false,
-  computed: {
-    isComplete() {
-      return (
-        this.layout.indexOf('total') > -1 &&
-        this.layout.indexOf('sizes') > -1 &&
-        this.layout.indexOf('prev') > -1 &&
-        this.layout.indexOf('pager') > -1 &&
-        this.layout.indexOf('next') > -1 &&
-        this.layout.indexOf('jumper') > -1
-      );
-    }
-  },
-  props: {
-    position: String,
-    // 当前页码
-    pageNum: {
-      type: Number,
-      default: 1
-    },
-    // 每页显示的条数
-    pageSize: {
-      type: Number,
-      default: 20
-    },
-    // 每页条数的选择项
-    limits: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 40, 50, 100];
-      }
-    },
-    // 总页数
-    pageCount: Number,
-    // 总条目数
-    totalCount: Number,
-    // 自定义排版
-    layout: {
-      type: String,
-      default: paginationLayout
-    },
-    // 只有一页时是否隐藏
-    hideOnSinglePage: {
-      type: Boolean,
-      default: false
-    },
-    // 页码按钮的数量
-    groups: {
-      type: Number,
-      default: 7
-    }
-  },
-  methods: {
-    handleSize(res) {
-      this.$emit('change', res);
-    },
-    handleCurrent(res) {
-      this.$emit('current', res);
-    },
-    handlePrev(res) {
-      this.$emit('prev', res);
-    },
-    handleNext(res) {
-      this.$emit('next', res);
-    }
-  }
-};
-</script>
+<template>
+  <el-pagination
+    class="es-pagination"
+    :class="{ 'es-pagination-complete': isComplete && position != 'center' }"
+    v-bind="$attrs"
+    :current-page="pageNum"
+    :page-size="pageSize"
+    :page-sizes="limits"
+    :layout="layout"
+    :total="totalCount"
+    :pager-count="groups"
+    :hide-on-single-page="hideOnSinglePage"
+    :unit="false"
+    @size-change="handleSize"
+    @current-change="handleCurrent"
+    @prev-click="handlePrev"
+    @next-click="handleNext"
+  >
+  </el-pagination>
+</template>
+<script>
+import util from 'eoss-ui/src/utils/util';
+const paginationLayout =
+  util.win.top.tableLayout ||
+  util.win.tableLayout ||
+  'prev, pager, next, sizes, total';
+export default {
+  name: 'EsPagination',
+  inheritAttrs: false,
+  computed: {
+    isComplete() {
+      return (
+        this.layout.indexOf('total') > -1 &&
+        this.layout.indexOf('sizes') > -1 &&
+        this.layout.indexOf('prev') > -1 &&
+        this.layout.indexOf('pager') > -1 &&
+        this.layout.indexOf('next') > -1 &&
+        this.layout.indexOf('jumper') > -1
+      );
+    }
+  },
+  props: {
+    position: String,
+    // 当前页码
+    pageNum: {
+      type: Number,
+      default: 1
+    },
+    // 每页显示的条数
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    // 每页条数的选择项
+    limits: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 40, 50, 100];
+      }
+    },
+    // 总页数
+    pageCount: Number,
+    // 总条目数
+    totalCount: Number,
+    // 自定义排版
+    layout: {
+      type: String,
+      default: paginationLayout
+    },
+    // 只有一页时是否隐藏
+    hideOnSinglePage: {
+      type: Boolean,
+      default: false
+    },
+    // 页码按钮的数量
+    groups: {
+      type: Number,
+      default: 7
+    }
+  },
+  methods: {
+    handleSize(res) {
+      this.$emit('change', res);
+    },
+    handleCurrent(res) {
+      this.$emit('current', res);
+    },
+    handlePrev(res) {
+      this.$emit('prev', res);
+    },
+    handleNext(res) {
+      this.$emit('next', res);
+    }
+  }
+};
+</script>

package/packages/qr-code/src/main.vue

@@ -1,170 +1,170 @@
-<template>
-  <div class="es-qrcode-box" id="qrcode" ref="qrcode">
-    <template v-if="mwidth && mheight">
-      <img
-        class="es-qrcode-img"
-        :width="mwidth"
-        :height="mheight"
-        ref="qrcodeImg"
-        alt="二维码图片"
-      />
-      <!-- <img
-      v-if="logo"
-      class="es-qrcode-logo"
-      ref="qrcodeLogo"
-      :src="logo"
-      alt="二维码logo"
-    /> -->
-      <canvas
-        :width="mwidth"
-        :height="mheight"
-        class="canvas"
-        ref="canvas"
-      ></canvas>
-    </template>
-  </div>
-</template>
-
-<script>
-import util from 'eoss-ui/src/utils/util';
-const QRCode = require('qrcode');
-export default {
-  name: 'EsQrCode',
-  props: {
-    content: {
-      type: String,
-      required: true
-    },
-    logo: String,
-    text: String,
-    width: {
-      type: Number,
-      default: 300
-    },
-    height: {
-      type: Number,
-      default: 300
-    },
-    auto: Boolean,
-    option: {
-      type: Object,
-      default: () => {
-        return {
-          errorCorrectionLevel: 'H', //纠错等级
-          color: {
-            dark: '#000000',
-            light: '#ffffff'
-          }
-        };
-      }
-    }
-  },
-  computed: {},
-  data() {
-    return {
-      mwidth: 0,
-      mheight: 0
-    };
-  },
-  watch: {
-    logo: function (val) {
-      this.$nextTick(() => {
-        this.createQRCode();
-      });
-    },
-    content: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.createQRCode();
-        }
-      }
-    }
-  },
-  created() {},
-  mounted() {
-    if (this.auto) {
-      let h =
-        (this.$refs.qrcode.offsetHeight || this.$refs.qrcode.offsetWidth) -
-        parseInt(util.getStyle(this.$refs.qrcode, 'padding-top'), 10) -
-        parseInt(util.getStyle(this.$refs.qrcode, 'padding-bottom'), 10);
-      if (h > 0) {
-        this.mwidth = h;
-        this.mheight = h;
-      }
-    } else {
-      this.mwidth = this.width;
-      this.mheight = this.height;
-    }
-    this.$nextTick(() => {
-      this.createQRCode();
-    });
-  },
-  methods: {
-    createQRCode() {
-      let qrcodeImg = this.$refs.qrcodeImg;
-      //let qrcodeLogo = this.$refs.qrcodeLogo;
-      let canvas = this.$refs.canvas;
-      let option = util.extend({}, this.option, {
-        width: this.mwidth,
-        height: this.mheight
-      });
-      if (!qrcodeImg) {
-        return false;
-      }
-      QRCode.toDataURL(this.content, option, (err, url) => {
-        if (this.content && url) {
-          qrcodeImg.src = url;
-          // 画二维码里的logo// 在canvas里进行拼接
-          let ctx = canvas.getContext('2d');
-          setTimeout(() => {
-            //获取图片
-            ctx.drawImage(qrcodeImg, 0, 0, this.mwidth, this.mheight);
-            if (this.logo && this.logo.indexOf('.') > -1) {
-              let logo = new Image();
-              logo.src = this.logo;
-              //设置logo大小
-              let logoPosition = (this.mwidth - 46) / 2; //logo相对于canvas居中定位
-              //设置获取的logo将其变为圆角以及添加白色背景
-              /* ctx.fillStyle = "#fff";
-							ctx.beginPath();
-							let h = 46; //圆角高 10为基数(logo四周白色背景为10/2)
-							let w = 46; //圆角宽
-							let x = logoPosition - 5;
-							let y = logoPosition - 5;
-							let r = 5; //圆角半径
-							ctx.moveTo(x + r, y);
-							ctx.arcTo(x + w, y, x + w, y + h, r);
-							ctx.arcTo(x + w, y + h, x, y + h, r);
-							ctx.arcTo(x, y + h, x, y, r);
-							ctx.arcTo(x, y, x + w, y, r);
-							ctx.closePath();
-							ctx.fill(); */
-              logo.onload = () => {
-                ctx.drawImage(logo, logoPosition, logoPosition, 46, 46);
-                qrcodeImg.src = canvas.toDataURL();
-              };
-            } else if (this.text) {
-              //设置字体
-              let fpadd = 10; //规定内间距
-              ctx.font = 'bold 16px Arial';
-              let tw = ctx.measureText(this.text).width; //文字真实宽度
-              let ftop = (this.mheight - 16) / 2; //根据字体大小计算文字top
-              let fleft = (this.mwidth - tw) / 2; //根据字体大小计算文字left
-              let tp = 16 / 2; //字体边距为字体大小的一半可以自己设置
-              ctx.fillStyle = '#fff';
-              ctx.fillRect(fleft - tp / 2, ftop - tp / 2, tw + tp, 16 + tp);
-              ctx.textBaseline = 'top'; //设置绘制文本时的文本基线。
-              ctx.fillStyle = '#f40';
-              ctx.fillText(this.text, fleft, ftop);
-            }
-            canvas.style.display = 'none';
-            qrcodeImg.src = canvas.toDataURL();
-            qrcodeImg.style.display = 'inline-block';
-          }, 500);
-        }
-      });
-    }
-  }
-};
-</script>
+<template>
+  <div class="es-qrcode-box" id="qrcode" ref="qrcode">
+    <template v-if="mwidth && mheight">
+      <img
+        class="es-qrcode-img"
+        :width="mwidth"
+        :height="mheight"
+        ref="qrcodeImg"
+        alt="二维码图片"
+      />
+      <!-- <img
+      v-if="logo"
+      class="es-qrcode-logo"
+      ref="qrcodeLogo"
+      :src="logo"
+      alt="二维码logo"
+    /> -->
+      <canvas
+        :width="mwidth"
+        :height="mheight"
+        class="canvas"
+        ref="canvas"
+      ></canvas>
+    </template>
+  </div>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+const QRCode = require('qrcode');
+export default {
+  name: 'EsQrCode',
+  props: {
+    content: {
+      type: String,
+      required: true
+    },
+    logo: String,
+    text: String,
+    width: {
+      type: Number,
+      default: 300
+    },
+    height: {
+      type: Number,
+      default: 300
+    },
+    auto: Boolean,
+    option: {
+      type: Object,
+      default: () => {
+        return {
+          errorCorrectionLevel: 'H', //纠错等级
+          color: {
+            dark: '#000000',
+            light: '#ffffff'
+          }
+        };
+      }
+    }
+  },
+  computed: {},
+  data() {
+    return {
+      mwidth: 0,
+      mheight: 0
+    };
+  },
+  watch: {
+    logo: function (val) {
+      this.$nextTick(() => {
+        this.createQRCode();
+      });
+    },
+    content: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.createQRCode();
+        }
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    if (this.auto) {
+      let h =
+        (this.$refs.qrcode.offsetHeight || this.$refs.qrcode.offsetWidth) -
+        parseInt(util.getStyle(this.$refs.qrcode, 'padding-top'), 10) -
+        parseInt(util.getStyle(this.$refs.qrcode, 'padding-bottom'), 10);
+      if (h > 0) {
+        this.mwidth = h;
+        this.mheight = h;
+      }
+    } else {
+      this.mwidth = this.width;
+      this.mheight = this.height;
+    }
+    this.$nextTick(() => {
+      this.createQRCode();
+    });
+  },
+  methods: {
+    createQRCode() {
+      let qrcodeImg = this.$refs.qrcodeImg;
+      //let qrcodeLogo = this.$refs.qrcodeLogo;
+      let canvas = this.$refs.canvas;
+      let option = util.extend({}, this.option, {
+        width: this.mwidth,
+        height: this.mheight
+      });
+      if (!qrcodeImg) {
+        return false;
+      }
+      QRCode.toDataURL(this.content, option, (err, url) => {
+        if (this.content && url) {
+          qrcodeImg.src = url;
+          // 画二维码里的logo// 在canvas里进行拼接
+          let ctx = canvas.getContext('2d');
+          setTimeout(() => {
+            //获取图片
+            ctx.drawImage(qrcodeImg, 0, 0, this.mwidth, this.mheight);
+            if (this.logo && this.logo.indexOf('.') > -1) {
+              let logo = new Image();
+              logo.src = this.logo;
+              //设置logo大小
+              let logoPosition = (this.mwidth - 46) / 2; //logo相对于canvas居中定位
+              //设置获取的logo将其变为圆角以及添加白色背景
+              /* ctx.fillStyle = "#fff";
+							ctx.beginPath();
+							let h = 46; //圆角高 10为基数(logo四周白色背景为10/2)
+							let w = 46; //圆角宽
+							let x = logoPosition - 5;
+							let y = logoPosition - 5;
+							let r = 5; //圆角半径
+							ctx.moveTo(x + r, y);
+							ctx.arcTo(x + w, y, x + w, y + h, r);
+							ctx.arcTo(x + w, y + h, x, y + h, r);
+							ctx.arcTo(x, y + h, x, y, r);
+							ctx.arcTo(x, y, x + w, y, r);
+							ctx.closePath();
+							ctx.fill(); */
+              logo.onload = () => {
+                ctx.drawImage(logo, logoPosition, logoPosition, 46, 46);
+                qrcodeImg.src = canvas.toDataURL();
+              };
+            } else if (this.text) {
+              //设置字体
+              let fpadd = 10; //规定内间距
+              ctx.font = 'bold 16px Arial';
+              let tw = ctx.measureText(this.text).width; //文字真实宽度
+              let ftop = (this.mheight - 16) / 2; //根据字体大小计算文字top
+              let fleft = (this.mwidth - tw) / 2; //根据字体大小计算文字left
+              let tp = 16 / 2; //字体边距为字体大小的一半可以自己设置
+              ctx.fillStyle = '#fff';
+              ctx.fillRect(fleft - tp / 2, ftop - tp / 2, tw + tp, 16 + tp);
+              ctx.textBaseline = 'top'; //设置绘制文本时的文本基线。
+              ctx.fillStyle = '#f40';
+              ctx.fillText(this.text, fleft, ftop);
+            }
+            canvas.style.display = 'none';
+            qrcodeImg.src = canvas.toDataURL();
+            qrcodeImg.style.display = 'inline-block';
+          }, 500);
+        }
+      });
+    }
+  }
+};
+</script>