meixioacomponent 1.1.49 → 2.0.1

package/packages/components/base/baseEdito/baseEdito.vue

@@ -8,54 +8,50 @@
         <slot name="edito-title-slot"></slot>
       </div>
       <div class="edito-content-wrap">
-        <el-input
-          type="textarea"
-          v-model="textValue"
-          :autosize="{ minRows: 4, maxRows: 22 }"
-          placeholder="请输入内容"
-        >
-        </el-input>
+        <t-textarea
+            v-model="textValue"
+            placeholder="请输入内容"
+            :autosize="{ minRows: 4, maxRows: 22 }"
+        />
         <baseUploadVue
-          ref="baseUpload"
-          v-model="imgList"
-          v-show="imgList.length > 0"
+            ref="baseUpload"
+            v-model="imgList"
+            v-show="imgList.length > 0"
         ></baseUploadVue>
         <baseAppendixVue
-          :key="appendixKey"
-          ref="baseAppendix"
-          v-model="appendix"
-          v-show="appendix.length > 0"
-          style="margin-top: calc(var(--margin-5) * 2)"
+            :key="appendixKey"
+            ref="baseAppendix"
+            v-model="appendix"
+            v-show="appendix.length > 0"
+            style="margin-top: calc(var(--margin-5) * 2)"
         ></baseAppendixVue>
       </div>
       <div class="base-edito-handle" v-if="useUpload">
-        <base-icon
-          :size="`m`"
-          :color="`d`"
-          :event="true"
-          :title="`图片`"
-          @iconClick="addImg"
-          :name="`icon-tupian_huaban`"
-        ></base-icon>
-        <base-icon
-          :size="`m`"
-          :color="`d`"
-          :event="true"
-          :title="`附件`"
-          @iconClick="addAppendix"
-          :name="`meixicomponenticon-weibiaoti--`"
-        ></base-icon>
+
+        <t-button shape="square" variant="outline" @click="addImg">
+          <template #icon>
+            <image-icon
+            ></image-icon>
+          </template>
+        </t-button>
+
+        <t-button shape="square" variant="outline" @click="addAppendix">
+          <template #icon>
+            <combination-icon></combination-icon>
+          </template>
+        </t-button>
+
       </div>
       <baseUploadItemVue
-        v-model="appendix"
-        ref="baseUploadItem"
-        style="display: none"
-        :uploadType="`multiple`"
-        @uploadEd="uploadEd"
+          v-model="appendix"
+          ref="baseUploadItem"
+          style="display: none"
+          :uploadType="`multiple`"
+          @uploadEd="uploadEd"
       ></baseUploadItemVue>
       <baseButtonHandle
-        :config="handleConfig"
-        style="margin-top: var(--margin-5)"
+          :config="handleConfig"
+          style="margin-top: var(--margin-5)"
       ></baseButtonHandle>
     </div>
   </div>
@@ -66,6 +62,7 @@ import baseUploadVue from "../baseUpload/baseUpload.vue";
 import baseAppendixVue from "../baseAppendix/baseAppendix.vue";
 import baseUploadItemVue from "../baseUpload/baseUploadItem.vue";
 import baseButtonHandle from "../baseButtonHandle/baseButtonHandle.vue";
+import {ImageIcon,CombinationIcon} from "tdesign-icons-vue"
 //
 
 export default {
@@ -121,6 +118,8 @@ export default {
     baseAppendixVue,
     baseButtonHandle,
     baseUploadItemVue,
+    ImageIcon,
+    CombinationIcon
   },
   methods: {
     addImg() {
@@ -134,19 +133,19 @@ export default {
       let obj = {
         textValue: this.textValue,
         imgList: this.imgList
-          .filter((item) => {
-            return item.process == 100;
-          })
-          .map((item) => {
-            return item.url;
-          }),
+            .filter((item) => {
+              return item.process == 100;
+            })
+            .map((item) => {
+              return item.url;
+            }),
         appendix: this.appendix
-          .filter((item) => {
-            return item.process == 100;
-          })
-          .map((item) => {
-            return item.url;
-          }),
+            .filter((item) => {
+              return item.process == 100;
+            })
+            .map((item) => {
+              return item.url;
+            }),
       };
 
       //console.log(obj);
@@ -168,32 +167,39 @@ export default {
   background: var(--color-gray-s);
   border: 2px solid var(--color-border);
   padding: var(--padding-5) calc(var(--padding-5) * 2);
+
   .no-launch {
     width: 100%;
     height: auto;
     cursor: pointer;
     padding: calc(var(--padding-5) * 2) 0px;
+
     span {
       color: var(--font-color-s);
       font-size: var(--font-base-s);
     }
   }
+
   .edito-title-wrap {
     width: 100%;
   }
+
   .edito-content-wrap {
     width: 100%;
     height: auto;
     padding: var(--padding-5) 0px;
   }
+
   /deep/ textarea {
     resize: none !important;
     font-weight: var(--font-weight-g);
     color: var(--font-color-d) !important;
   }
+
   .base-edito-handle {
     display: flex;
     align-items: center;
+
     /deep/ i {
       font-weight: var(--font-weight-kg);
     }

package/packages/components/base/baseFixedHeader/baseFixedHeader.vue

@@ -4,50 +4,42 @@
       <span class="header-text">{{ currentNews.content }}</span>
 
       <div class="content-handle-wrap" v-if="showHandle">
-        <base-icon
-          :size="`s`"
-          :event="true"
-          :plain="true"
-          :disable="upDisable"
-          :color="`text-white`"
-          :name="`meixicomponenticon-shouqi`"
-          @iconClick="upNews"
-        >
-        </base-icon>
-        <base-icon
-          :size="`s`"
-          :event="true"
-          :plain="true"
-          :color="`text-white`"
-          :name="`meixicomponenticon-xiala`"
-          :disable="downDisable"
-          @iconClick="downNews"
-        >
-        </base-icon>
+
+        <t-button shape="square" variant="outline" @click="upNews">
+          <template #icon>
+            <arrow-up-icon
+            >
+            </arrow-up-icon>
+          </template>
+        </t-button>
+
+        <t-button shape="square" variant="outline" @click="downNews">
+          <template #icon>
+            <arrow-down-icon
+            >
+            </arrow-down-icon>
+          </template>
+        </t-button>
+
       </div>
-      <el-button
-        size="mini"
-        @click="newsConfirm"
-        :type="currentNews.type"
-        v-if="currentNews.event"
-        >确定</el-button
-      >
+
+      <base-button :type="currentNews.type" v-if="currentNews.event" @click="newsConfirm" size="small">确定
+      </base-button>
+
     </div>
+    <t-button shape="square" variant="outline" @click="closeHeader">
+      <template #icon>
+        <close-icon>
+        </close-icon>
+      </template>
+    </t-button>
 
-    <base-icon
-      :size="`s`"
-      :event="true"
-      :title="`关闭`"
-      :color="`text-white`"
-      :name="`meixicomponenticon-close`"
-      class="header-close-icon"
-      @iconClick="closeHeader"
-    >
-    </base-icon>
   </div>
 </template>
 
 <script>
+import {ArrowDownIcon, ArrowUpIcon, CloseIcon} from "tdesign-icons-vue"
+
 export default {
   name: "baseFixedHeader",
   data() {
@@ -61,6 +53,11 @@ export default {
       default: () => [],
     },
   },
+  components: {
+    ArrowDownIcon,
+    ArrowUpIcon,
+    CloseIcon
+  },
   computed: {
     currentNews() {
       return this.$props.newsList[this.index];
@@ -85,9 +82,11 @@ export default {
       this.index = this.$props.newsList.length - 1;
     },
     upNews() {
+      if (this.upDisable) return;
       this.index -= 1;
     },
     downNews() {
+      if (this.downDisable) return;
       this.index += 1;
     },
     newsConfirm() {
@@ -126,24 +125,29 @@ export default {
   flex-flow: row nowrap;
   justify-content: center;
   transition: all 0.7s ease-in;
+
   .fixed-header-content {
     display: flex;
     align-items: center;
     justify-content: center;
+
     .header-text {
       font-size: var(--font-size-base);
     }
+
     .content-handle-wrap {
       display: flex;
       flex-flow: column;
       align-items: center;
       justify-items: center;
       margin: 0px calc(var(--margin-5) * 4);
+
       .plain + .plain {
         margin: 0px;
       }
     }
   }
+
   .header-close-icon {
     position: absolute;
     top: 50%;
@@ -151,12 +155,15 @@ export default {
     transform: translateY(-50%);
   }
 }
+
 .header-primary {
   background: var(--color-primary);
 }
+
 .header-danger {
   background: var(--color-error);
 }
+
 .header-primary,
 .header-danger {
   .fixed-header-content {

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

@@ -1,93 +1,15 @@
-<!-- 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>
+  <div>
+    <t-image-viewer :visible="visible" :images="urlList" :closeOnEscKeydown="true" :z-index="zIndex"
+                    :close-on-overlay="maskClosable" :index="initialIndex" @index-change="onSwitch" @close="onClose">
+    </t-image-viewer>
+  </div>
+
 </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,
@@ -99,11 +21,13 @@ export default {
     },
     onSwitch: {
       type: Function,
-      default: () => {},
+      default: () => {
+      },
     },
     onClose: {
       type: Function,
-      default: () => {},
+      default: () => {
+      },
     },
     initialIndex: {
       type: Number,
@@ -117,241 +41,35 @@ export default {
       type: Boolean,
       default: true,
     },
+    value: {
+      type: Boolean,
+      default: false
+    }
   },
 
   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,
-      },
+      visible: 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);
+    model: {
+      set(val) {
+        this.$emit('input', 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;
-
-      this.$nextTick(() => {
-        let item = this.$refs.img[0];
-
-        if (item.clientHeight > document.body.clientHeight) {
-          this.transform.scale = document.body.clientHeight / item.clientHeight;
-        }
-      });
-    },
-    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();
+      get() {
+        return this.$props.value
       }
-    },
-    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);
     }
   },
+  watch: {},
+  methods: {},
+  mounted() {
+    this.$nextTick(() => {
+        this.visible=true
+    })
+  }
+
+
 };
 </script>