cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-ArsenalPicture/cyy-ArsenalPicture.vue

@@ -1,228 +1,228 @@
-<template>
-  <div>
-    <div v-if="!props.selectImg.length" class="holder">请选择添加图片</div>
-    <template v-else>
-      <div
-        :class="[props.showStyle === 1 ? 'ArsenalPicture-colunm' : 'ArsenalPicture']"
-        :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }"
-      >
-        <div
-          v-for="(item, index) in resultArr"
-          :key="index"
-          :class="{
-            'classA-show': classOptions.showA,
-            'classB-show': classOptions.showB,
-            'classC-show': classOptions.showC,
-            'classD-show': classOptions.showD,
-            'classE-show': classOptions.showE,
-            'classF-show': classOptions.showF,
-            'classG-show': classOptions.showG,
-            'classH-show': classOptions.showH,
-            'classI-show': classOptions.showI,
-            'classJ-show': classOptions.showJ,
-          }"
-        >
-          <img
-            v-if="classOptions.showJ || classOptions.showI"
-            class="ArsenalImg-classIJ"
-            mode="widthFix"
-            :src="item['imgUrl']"
-            alt=""
-            :style="{
-              borderRadius: props.cornerStyle + 'px',
-            }"
-            @click="linkClick(item)"
-          />
-          <img
-            v-else
-            class="ArsenalImg"
-            mode="widthFix"
-            :src="item['imgUrl']"
-            alt=""
-            :style="{
-              borderRadius: props.cornerStyle + 'px',
-            }"
-            @click="linkClick(item)"
-          />
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import pick from "lodash-es/pick.js";
-import omit from "lodash-es/omit.js";
-import { handlePlat } from "../../utils/index.js";
-import { isEmpty, isUndefined } from "lodash-es";
-export default {
-  name: "cyy-ArsenalPicture",
-  data() {
-    return {
-      classOptions: {
-        showA: false,
-        showB: false,
-        showC: false,
-        showD: false,
-        showE: false,
-        showF: false,
-        showG: false,
-        showH: false,
-        showI: false,
-        showJ: false,
-      },
-      imgStyle: {
-        width: "100%",
-        boxSizing: "border-box",
-      },
-    };
-  },
-  props: {
-    props: {
-      showStyle: Number, //展示风格
-      cornerStyle: Number, //边角样式
-      spacing: Number, //图片间距         @unwhrite@
-      marginTop: Number, //上边距
-      marginBottom: Number, //下边距
-      selectImg: Array, //添加图片
-      defaultValue: Array,
-    },
-  },
-  mounted() {
-    console.log(this.props, 2007);
-    this.whitchClass();
-  },
-  computed: {
-    resultArr() {
-      const { selectImg, defaultValue } = this.props;
-      const computedArr = selectImg.filter((item) => !isUndefined(item)).filter((item) => !Object.values(item).every((citem) => isUndefined(citem)));
-      let arr = defaultValue;
-      if (!isEmpty(computedArr)) {
-        arr = computedArr;
-      }
-      console.log(52, arr);
-      return arr;
-    },
-  },
-  methods: {
-    whitchClass() {
-      if (this.props.showStyle === 1) {
-        if (this.props.spacing != 0) {
-          this.classOptions.showJ = true;
-          return;
-        }
-        this.classOptions.showI = true;
-        return;
-      }
-      if (this.props.spacing != 0) {
-        switch (this.props.selectImg.length) {
-          case 1:
-            this.classOptions.showE = true;
-            break;
-          case 2:
-            this.classOptions.showF = true;
-            break;
-          case 3:
-            this.classOptions.showG = true;
-            break;
-          case 4:
-            this.classOptions.showH = true;
-            break;
-          default:
-        }
-        return;
-      }
-      switch (this.resultArr.length) {
-        case 1:
-          this.classOptions.showA = true;
-          break;
-        case 2:
-          this.classOptions.showB = true;
-          break;
-        case 3:
-          this.classOptions.showC = true;
-          break;
-        case 4:
-          this.classOptions.showD = true;
-          break;
-        default:
-      }
-    },
-    linkClick(item) {
-      this.$emit("linkClick", item);
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.holder {
-  width: 100%;
-  height: 180px;
-  line-height: 180px;
-  font-size: 30px;
-  background-color: #ccc;
-  color: #aaa;
-  text-align: center;
-}
-.ArsenalPicture {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  .classA-show {
-    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
-    width: 100%;
-    color: red;
-  }
-  .classB-show {
-    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
-    width: 50%;
-    color: orange;
-  }
-  .classC-show {
-    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
-    width: 33.33%;
-    color: yellow;
-  }
-  .classD-show {
-    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
-    width: 25%;
-  }
-  .classE-show {
-    height: 392px;
-    width: 392px;
-  }
-  .classF-show {
-    height: 180px;
-    width: 180px;
-  }
-  .classG-show {
-    height: 120px;
-    width: 120px;
-  }
-  .classH-show {
-    height: 80px;
-    width: 80px;
-  }
-  .ArsenalImg {
-    width: 100%;
-    height: 100% !important;
-  }
-}
-.ArsenalPicture-colunm {
-  width: 100%;
-  .classI-show {
-    width: 100%;
-  }
-  .classJ-show {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-  .ArsenalImg {
-    width: 100%;
-    height: 100% !important;
-  }
-  .ArsenalImg-classIJ {
-    width: 100%;
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-if="!props.selectImg.length" class="holder">请选择添加图片</div>
+    <template v-else>
+      <div
+        :class="[props.showStyle === 1 ? 'ArsenalPicture-colunm' : 'ArsenalPicture']"
+        :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }"
+      >
+        <div
+          v-for="(item, index) in resultArr"
+          :key="index"
+          :class="{
+            'classA-show': classOptions.showA,
+            'classB-show': classOptions.showB,
+            'classC-show': classOptions.showC,
+            'classD-show': classOptions.showD,
+            'classE-show': classOptions.showE,
+            'classF-show': classOptions.showF,
+            'classG-show': classOptions.showG,
+            'classH-show': classOptions.showH,
+            'classI-show': classOptions.showI,
+            'classJ-show': classOptions.showJ,
+          }"
+        >
+          <img
+            v-if="classOptions.showJ || classOptions.showI"
+            class="ArsenalImg-classIJ"
+            mode="widthFix"
+            :src="item['imgUrl']"
+            alt=""
+            :style="{
+              borderRadius: props.cornerStyle + 'px',
+            }"
+            @click="linkClick(item)"
+          />
+          <img
+            v-else
+            class="ArsenalImg"
+            mode="widthFix"
+            :src="item['imgUrl']"
+            alt=""
+            :style="{
+              borderRadius: props.cornerStyle + 'px',
+            }"
+            @click="linkClick(item)"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import pick from "lodash-es/pick.js";
+import omit from "lodash-es/omit.js";
+import { handlePlat } from "../../utils/index.js";
+import { isEmpty, isUndefined } from "lodash-es";
+export default {
+  name: "cyy-ArsenalPicture",
+  data() {
+    return {
+      classOptions: {
+        showA: false,
+        showB: false,
+        showC: false,
+        showD: false,
+        showE: false,
+        showF: false,
+        showG: false,
+        showH: false,
+        showI: false,
+        showJ: false,
+      },
+      imgStyle: {
+        width: "100%",
+        boxSizing: "border-box",
+      },
+    };
+  },
+  props: {
+    props: {
+      showStyle: Number, //展示风格
+      cornerStyle: Number, //边角样式
+      spacing: Number, //图片间距         @unwhrite@
+      marginTop: Number, //上边距
+      marginBottom: Number, //下边距
+      selectImg: Array, //添加图片
+      defaultValue: Array,
+    },
+  },
+  mounted() {
+    console.log(this.props, 2007);
+    this.whitchClass();
+  },
+  computed: {
+    resultArr() {
+      const { selectImg, defaultValue } = this.props;
+      const computedArr = selectImg.filter((item) => !isUndefined(item)).filter((item) => !Object.values(item).every((citem) => isUndefined(citem)));
+      let arr = defaultValue;
+      if (!isEmpty(computedArr)) {
+        arr = computedArr;
+      }
+      console.log(52, arr);
+      return arr;
+    },
+  },
+  methods: {
+    whitchClass() {
+      if (this.props.showStyle === 1) {
+        if (this.props.spacing != 0) {
+          this.classOptions.showJ = true;
+          return;
+        }
+        this.classOptions.showI = true;
+        return;
+      }
+      if (this.props.spacing != 0) {
+        switch (this.props.selectImg.length) {
+          case 1:
+            this.classOptions.showE = true;
+            break;
+          case 2:
+            this.classOptions.showF = true;
+            break;
+          case 3:
+            this.classOptions.showG = true;
+            break;
+          case 4:
+            this.classOptions.showH = true;
+            break;
+          default:
+        }
+        return;
+      }
+      switch (this.resultArr.length) {
+        case 1:
+          this.classOptions.showA = true;
+          break;
+        case 2:
+          this.classOptions.showB = true;
+          break;
+        case 3:
+          this.classOptions.showC = true;
+          break;
+        case 4:
+          this.classOptions.showD = true;
+          break;
+        default:
+      }
+    },
+    linkClick(item) {
+      this.$emit("linkClick", item);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.holder {
+  width: 100%;
+  height: 180px;
+  line-height: 180px;
+  font-size: 30px;
+  background-color: #ccc;
+  color: #aaa;
+  text-align: center;
+}
+.ArsenalPicture {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .classA-show {
+    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
+    width: 100%;
+    color: red;
+  }
+  .classB-show {
+    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
+    width: 50%;
+    color: orange;
+  }
+  .classC-show {
+    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
+    width: 33.33%;
+    color: yellow;
+  }
+  .classD-show {
+    aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
+    width: 25%;
+  }
+  .classE-show {
+    height: 392px;
+    width: 392px;
+  }
+  .classF-show {
+    height: 180px;
+    width: 180px;
+  }
+  .classG-show {
+    height: 120px;
+    width: 120px;
+  }
+  .classH-show {
+    height: 80px;
+    width: 80px;
+  }
+  .ArsenalImg {
+    width: 100%;
+    height: 100% !important;
+  }
+}
+.ArsenalPicture-colunm {
+  width: 100%;
+  .classI-show {
+    width: 100%;
+  }
+  .classJ-show {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .ArsenalImg {
+    width: 100%;
+    height: 100% !important;
+  }
+  .ArsenalImg-classIJ {
+    width: 100%;
+  }
+}
+</style>