meixioacomponent 0.1.0

package/packages/components/base/baseImageViewer/image-viewer.vue

@@ -0,0 +1,348 @@
+<!-- element 源码 勿动 -->
+<template>
+  <transition name="viewer-fade">
+    <div
+      tabindex="-1"
+      ref="el-image-viewer__wrapper"
+      class="el-image-viewer__wrapper"
+      :style="{ 'z-index': viewerZIndex }"
+    >
+      <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
+      <!-- CLOSE -->
+      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
+        <i class="el-icon-close"></i>
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span
+          class="el-image-viewer__btn el-image-viewer__prev"
+          :class="{ 'is-disabled': !infinite && isFirst }"
+          @click="prev"
+        >
+          <i class="el-icon-arrow-left" />
+        </span>
+        <span
+          class="el-image-viewer__btn el-image-viewer__next"
+          :class="{ 'is-disabled': !infinite && isLast }"
+          @click="next"
+        >
+          <i class="el-icon-arrow-right" />
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div class="el-image-viewer__btn el-image-viewer__actions">
+        <div class="el-image-viewer__actions__inner">
+          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i :class="mode.icon" @click="toggleMode"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i
+            class="el-icon-refresh-left"
+            @click="handleActions('anticlocelise')"
+          ></i>
+          <i
+            class="el-icon-refresh-right"
+            @click="handleActions('clocelise')"
+          ></i>
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="el-image-viewer__canvas">
+        <div v-for="(url, i) in urlList" :key="url">
+          <img
+            v-if="i === index"
+            ref="img"
+            class="el-image-viewer__img"
+            :key="url"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown"
+          />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from "element-ui/src/utils/dom";
+import { rafThrottle, isFirefox } from "element-ui/src/utils/util";
+import { PopupManager } from "element-ui/src/utils/popup";
+
+const Mode = {
+  CONTAIN: {
+    name: "contain",
+    icon: "el-icon-full-screen",
+  },
+  ORIGINAL: {
+    name: "original",
+    icon: "el-icon-c-scale-to-original",
+  },
+};
+
+const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
+
+export default {
+  name: "imageViewer",
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => [],
+    },
+    zIndex: {
+      type: Number,
+      default: 2000,
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {},
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    initialIndex: {
+      type: Number,
+      default: 0,
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true,
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false,
+      },
+    };
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1;
+    },
+    currentImg() {
+      return this.urlList[this.index];
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? "transform .3s" : "",
+        "margin-left": `${offsetX}px`,
+        "margin-top": `${offsetY}px`,
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = "100%";
+      }
+      return style;
+    },
+    viewerZIndex() {
+      const nextZIndex = PopupManager.nextZIndex();
+      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
+    },
+  },
+  watch: {
+    index: {
+      handler: function (val) {
+        this.reset();
+        this.onSwitch(val);
+      },
+    },
+    currentImg(val) {
+      this.$nextTick((_) => {
+        const $img = this.$refs.img[0];
+        if (!$img.complete) {
+          this.loading = true;
+        }
+      });
+    },
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall();
+      this.onClose();
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = (e) => {
+        e.stopPropagation();
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide();
+            break;
+          // SPACE
+          case 32:
+            this.toggleMode();
+            break;
+          // LEFT_ARROW
+          case 37:
+            this.prev();
+            break;
+          // UP_ARROW
+          case 38:
+            this.handleActions("zoomIn");
+            break;
+          // RIGHT_ARROW
+          case 39:
+            this.next();
+            break;
+          // DOWN_ARROW
+          case 40:
+            this.handleActions("zoomOut");
+            break;
+        }
+      };
+      this._mouseWheelHandler = rafThrottle((e) => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          this.handleActions("zoomIn", {
+            zoomRate: 0.015,
+            enableTransition: false,
+          });
+        } else {
+          this.handleActions("zoomOut", {
+            zoomRate: 0.015,
+            enableTransition: false,
+          });
+        }
+      });
+      on(document, "keydown", this._keyDownHandler);
+      on(document, mousewheelEventName, this._mouseWheelHandler);
+    },
+    deviceSupportUninstall() {
+      off(document, "keydown", this._keyDownHandler);
+      off(document, mousewheelEventName, this._mouseWheelHandler);
+      this._keyDownHandler = null;
+      this._mouseWheelHandler = null;
+    },
+    handleImgLoad(e) {
+      this.loading = false;
+    },
+    handleImgError(e) {
+      this.loading = false;
+      e.target.alt = "加载失败";
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return;
+
+      const { offsetX, offsetY } = this.transform;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      this._dragHandler = rafThrottle((ev) => {
+        this.transform.offsetX = offsetX + ev.pageX - startX;
+        this.transform.offsetY = offsetY + ev.pageY - startY;
+      });
+      on(document, "mousemove", this._dragHandler);
+      on(document, "mouseup", (ev) => {
+        off(document, "mousemove", this._dragHandler);
+      });
+
+      e.preventDefault();
+    },
+    handleMaskClick() {
+      if (this.maskClosable) {
+        this.hide();
+      }
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false,
+      };
+    },
+    toggleMode() {
+      if (this.loading) return;
+
+      const modeNames = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const index = modeValues.indexOf(this.mode);
+      const nextIndex = (index + 1) % modeNames.length;
+      this.mode = Mode[modeNames[nextIndex]];
+      this.reset();
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index + 1) % len;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options,
+      };
+      const { transform } = this;
+      switch (action) {
+        case "zoomOut":
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat(
+              (transform.scale - zoomRate).toFixed(3)
+            );
+          }
+          break;
+        case "zoomIn":
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          break;
+        case "clocelise":
+          transform.deg += rotateDeg;
+          break;
+        case "anticlocelise":
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    },
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    if (this.appendToBody) {
+      document.body.appendChild(this.$el);
+    }
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs["el-image-viewer__wrapper"].focus();
+  },
+  destroyed() {
+    // if appendToBody is true, remove DOM node after destroy
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+  },
+};
+</script>

package/packages/components/base/baseImageViewer/index.js

@@ -0,0 +1,7 @@
+import imageViewer from "./image-viewer.vue";
+
+imageViewer.install = function (Vue) {
+  Vue.component(imageViewer.name, imageViewer);
+};
+
+export default imageViewer;

package/packages/components/base/baseImg/baseImg.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="base-img-wrap">
+    <img
+      alt=""
+      :src="src"
+      @load="loadEd"
+      @error="errorEd"
+      @click="viewImg"
+      v-if="imgShow"
+      v-show="!isError && !loading"
+      :style="imgStyle"
+    />
+    <baseSkeletonVue
+      v-if="loading"
+      :lines="[1]"
+      :shape="`rect`"
+    ></baseSkeletonVue>
+    <div class="img-error-wrap" v-if="isError">
+      <base-icon
+        :name="`icon-tupiancuowu`"
+        :size="`l`"
+        :color="`s`"
+      ></base-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import useImg from "../../../config/use/UseImg";
+import baseSkeletonVue from "../baseSkeleton/baseSkeleton.vue";
+export default {
+  name: "baseImg",
+  data() {
+    return {
+      isError: false,
+      loading: true,
+    };
+  },
+  created() {
+    this.init();
+  },
+  components: {
+    baseSkeletonVue,
+  },
+  props: {
+    //   cover,fill,contain,
+    fit: {
+      type: String,
+      default: "cover",
+    },
+    src: {
+      type: String,
+    },
+    error: {
+      type: String,
+      default: "图片加载失败",
+    },
+    event: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    imgStyle() {
+      return {
+        objectFit: this.$props.fit,
+        cursor: this.$props.event ? "zoom-in" : "default",
+      };
+    },
+    imgShow() {
+      if (this.$props.src) {
+        return true;
+      }
+      return false;
+    },
+  },
+  methods: {
+    init() {
+      if (!this.$props.src) {
+        this.loading = true;
+      }
+    },
+    loadEd() {
+      this.loading = false;
+    },
+    errorEd() {
+      console.log(this.$props.src)
+      console.log("imgError");
+      this.loading = false;
+      this.isError = true;
+    },
+    viewImg() {
+      if (!this.$props.event || this.loading || this.isError) return;
+      let parent = this.$parent;
+      if (!parent) {
+        useImg.toView([this.$props.src]);
+        return;
+      }
+      let tags = parent.$options._componentTag;
+      if (tags == "baseUploadItemVue") {
+        useImg.toView([this.$props.src]);
+      } else {
+        let parentChildrenList = parent.$children;
+        let name = this.$options.name;
+        let filterList = parentChildrenList.filter((item) => {
+          return item.$options.name == name;
+        });
+        let imgList = [];
+        let thisIndex = null;
+        let thisSrc = this.$props.src;
+        filterList.forEach((item, index) => {
+          let itemSrc = item.$props.src;
+          if (itemSrc == thisSrc) {
+            thisIndex = index;
+          }
+          imgList.push(itemSrc);
+        });
+        this.viewListImg(thisIndex, imgList);
+      }
+    },
+
+    viewListImg(index, imgList) {
+      let templateList = [...imgList];
+      if (index == 0) {
+        useImg.toView(templateList);
+        return;
+      }
+      let start = templateList.splice(index);
+      let remain = templateList.splice(0, index);
+      useImg.toView(start.concat(remain));
+    },
+  },
+
+  watch: {
+    src: function (newVal, oldVal) {
+      this.isError = false;
+      this.loading = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-img-wrap {
+  width: 100%;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  .img-error-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: center;
+  }
+}
+</style>

package/packages/components/base/baseImg/index.js

@@ -0,0 +1,6 @@
+import baseImg from "./baseImg.vue";
+
+baseImg.install = function (Vue) {
+  Vue.component(baseImg.name, baseImg);
+};
+export default baseImg;

package/packages/components/base/baseInforWrap/baseInforWrap.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="base-text-wrap">
+    <div class="base-title">
+      <span>{{ label }}</span>
+    </div>
+    <div class="base-value">
+      <el-tooltip
+        effect="dark"
+        placement="top"
+        :visible-arrow="false"
+        :content="`${value}`"
+      >
+        <span>{{ value }}</span>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseInforWrap",
+  data() {
+    return {};
+  },
+  props: {
+    label: {
+      type: String,
+    },
+    value: {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-text-wrap {
+  // width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: inherit;
+  box-sizing: border-box;
+  .base-title {
+    span {
+      color: var(--font-color-s);
+      font-size: var(--font-size-base);
+    }
+  }
+  .base-value {
+    width: 100%;
+    span {
+      width: 100%;
+      text-align: left;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+      text-overflow: ellipsis;
+      color: var(--font-color-d);
+      font-weight: var(--font-weight-g);
+      font-size: var(--font-size-base);
+    }
+  }
+}
+.base-text-wrap + .base-text-wrap {
+  padding-left: calc(var(--padding-5) * 1.5);
+  border-left: 1px solid var(--color-border);
+}
+</style>

package/packages/components/base/baseInforWrap/index.js

@@ -0,0 +1,6 @@
+import baseInforWrap from "./baseInforWrap.vue";
+
+baseInforWrap.install = function (Vue) {
+  Vue.component(baseInforWrap.name, baseInforWrap);
+};
+export default baseInforWrap;

package/packages/components/base/baseLineInfoGroup/baseLineInfoGroup.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="base-line-info-group">
+    <div
+      :key="index"
+      class="line-group-wrap"
+      v-for="(item, index) in mountedList"
+    >
+      <div
+        class="line-wrap"
+        :key="cindex"
+        v-for="(citem, cindex) in item"
+        :style="{ width: `${100 / item.length}%` }"
+      >
+        <baseLineInfoItemVue
+          :icon="citem.icon"
+          :label="citem.label"
+          :value="citem.value"
+          :event="citem.event"
+          :labelWidth="labelWidth"
+          :valueAlign="valueAlign"
+          @infoclickicon="infoclickicon(citem)"
+        ></baseLineInfoItemVue>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseLineInfoItemVue from "../baseLineInfoItem/baseLineInfoItem.vue";
+//
+import { ArrayChunk } from "../../../utils/utils";
+export default {
+  name: "baseLineInfoGroup",
+  data() {
+    return {
+      labelWidth: null,
+    };
+  },
+  created() {
+    this.init();
+  },
+  components: {
+    baseLineInfoItemVue,
+  },
+  props: {
+    valueAlign: {
+      type: String,
+      default: "left",
+    },
+    lineNumber: {
+      type: Number,
+      default: 1,
+    },
+    infoList: {
+      type: Array,
+      require: true,
+    },
+  },
+  computed: {
+    mountedList() {
+      return ArrayChunk(this.$props.infoList, this.$props.lineNumber);
+    },
+  },
+  methods: {
+    init() {
+      let _inforList = this.$props.infoList;
+      _inforList.forEach((item, index) => {
+        let width = item.label.length * 14 + (item.icon ? 42 : 0);
+        if (this.labelWidth < width) {
+          this.labelWidth = width;
+        }
+      });
+      console.log(this.labelWidth);
+    },
+    infoclickicon(item) {
+      this.$emit("infoclickicon", item);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-line-info-group {
+  box-sizing: border-box;
+  padding: var(--padding-5);
+  .line-group-wrap {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+}
+</style>

package/packages/components/base/baseLineInfoGroup/index.js

@@ -0,0 +1,6 @@
+import baseLineInfoGroup from "./baseLineInfoGroup.vue";
+
+baseLineInfoGroup.install = function (Vue) {
+  Vue.component(baseLineInfoGroup.name, baseLineInfoGroup);
+};
+export default baseLineInfoGroup;