cione-comp-lib/es/packages/co-picture-wall-hexagon/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, watch, nextTick, onMounted, toRefs, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createElementVNode, toDisplayString, createCommentVNode } from "vue";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoPictureWallHexagon",
  props: {
    width: {
      type: String
    },
    height: {
      type: String
    },
    pictureWallType: {
      type: String,
      default: "hexagon"
    },
    firstLineCount: {
      type: Number,
      default: 3
    },
    marginNum: {
      type: Number,
      default: 3
    },
    isPageJump: {
      type: Boolean,
      default: false
    },
    maskBgColor: {
      type: String,
      default: "rgba(0, 128, 128, 0.8)"
    },
    titleSize: {
      type: Number,
      default: 20
    },
    textSize: {
      type: Number,
      default: 14
    },
    titleColor: {
      type: String,
      default: "rgab(255,255,255,1)"
    },
    textColor: {
      type: String,
      default: "rgab(255,255,255,1)"
    },
    randomBgColor: {
      type: String,
      default: "rgab(255,255,255,1)"
    },
    randomBorderColor: {
      type: String,
      default: "rgab(221,221,221,1)"
    },
    maxWidth: {
      type: Number,
      default: 300
    },
    maxHeight: {
      type: Number,
      default: 300
    },
    topInitNum: {
      type: Number,
      default: 220
    },
    leftInitNum: {
      type: Number,
      default: 224
    },
    list: {
      type: Array,
      default: () => {
      }
    }
  },
  setup(props) {
    const listData = ref(props.list);
    const pictureWallBox = ref();
    const rowWidth = ref();
    const rowPadding = ref();
    const doubleArr = ref([]);
    const rowOneNumArr = ref([]);
    const isFirstLineCount = ref(true);
    const pageJump = (url) => {
      if (url) {
        if (props.isPageJump) {
          window.open(url);
        }
      }
    };
    const firstLineCountFn = () => {
      doubleArr.value = [];
      rowOneNumArr.value = [];
      rowWidth.value = (96 / props.firstLineCount).toFixed(2);
      rowPadding.value = (110.85 / props.firstLineCount).toFixed(2);
      var arr = [];
      listData.value.forEach((element, index) => {
        arr.push(index);
      });
      let averageNum = Math.floor(arr.length / (props.firstLineCount - 0.5));
      let num2 = 0;
      let newArr = [];
      for (let i = 1; i <= averageNum; i++) {
        if (i % 2 == 1) {
          num2 = num2 + props.firstLineCount;
          newArr = arr.slice(num2, num2 + props.firstLineCount - 1);
          doubleArr.value.push(...newArr);
        } else {
          num2 = num2 + props.firstLineCount - 1;
        }
        rowOneNumArr.value.push(num2);
      }
    };
    const isRandomBox = ref(true);
    const dataReplenish = ref([]);
    const randomInit = () => {
      dataReplenish.value = listData.value;
      topData.value = [];
      leftData.value = [];
      rotateData.value = [];
      dataNum.value = 0;
      topNum.value = 0;
      dataRandom();
    };
    const topData = ref([]);
    const leftData = ref([]);
    const rotateData = ref([]);
    const topNum = ref(0);
    const dataNum = ref(0);
    const dataRandom = () => {
      dataReplenish.value.forEach((element, index) => {
        if (index % props.firstLineCount === 0 && index !== 0) {
          dataNum.value = 0;
          topNum.value += props.topInitNum;
        }
        topData.value.push(topNum.value);
        leftData.value.push(props.leftInitNum * dataNum.value);
        let num2 = Math.floor(Math.random() * 60);
        if (num2 >= 30) {
          num2 = 30 - num2;
        }
        rotateData.value.push(num2);
        dataNum.value++;
      });
    };
    const num = ref(0);
    const actualWidth = ref(0);
    const actualHeight = ref(0);
    const dataRandomCenter = () => {
      num.value++;
      if (num.value >= topData.value.length) {
        var imgDomArr = pictureWallBox.value.children;
        var lastHeightIndex = topData.value.lastIndexOf(Math.max(...topData.value));
        var lastWidthIndex = leftData.value.lastIndexOf(Math.max(...leftData.value));
        var lastImgDomWidth = imgDomArr[lastWidthIndex].offsetWidth;
        var lastImgDomHeight = imgDomArr[lastHeightIndex].offsetHeight;
        actualWidth.value = Math.max(...leftData.value) - Math.min(...leftData.value) + lastImgDomWidth;
        actualHeight.value = Math.max(...topData.value) - Math.min(...topData.value) + lastImgDomHeight;
      }
    };
    const randomUpData = () => {
      isRandomBox.value = false;
      nextTick(() => {
        isRandomBox.value = true;
        nextTick(() => {
          randomInit();
        });
      });
    };
    const renewList = () => {
      if (props.pictureWallType === "hexagon") {
        isFirstLineCount.value = false;
        nextTick(() => {
          isFirstLineCount.value = true;
          nextTick(() => {
            firstLineCountFn();
          });
        });
      } else if (props.pictureWallType === "random") {
        isRandomBox.value = false;
        nextTick(() => {
          isRandomBox.value = true;
          nextTick(() => {
            randomInit();
          });
        });
      }
    };
    const updataList = (newList) => {
      listData.value = newList;
      renewList();
    };
    watch(
      () => props.firstLineCount,
      () => {
        if (props.pictureWallType === "hexagon") {
          isFirstLineCount.value = false;
          nextTick(() => {
            isFirstLineCount.value = true;
            nextTick(() => {
              firstLineCountFn();
            });
          });
        } else if (props.pictureWallType === "random") {
          isRandomBox.value = false;
          nextTick(() => {
            isRandomBox.value = true;
            nextTick(() => {
              randomInit();
            });
          });
        }
      }
    );
    watch(
      () => props.maxWidth,
      () => {
        if (props.pictureWallType === "random") {
          randomUpData();
        }
      }
    );
    watch(
      () => props.maxHeight,
      () => {
        if (props.pictureWallType === "random") {
          randomUpData();
        }
      }
    );
    watch(
      () => props.topInitNum,
      () => {
        if (props.pictureWallType === "random") {
          randomUpData();
        }
      }
    );
    watch(
      () => props.leftInitNum,
      () => {
        if (props.pictureWallType === "random") {
          randomUpData();
        }
      }
    );
    watch(
      () => props.list,
      () => {
        listData.value = props.list;
        renewList();
      }
    );
    onMounted(() => {
      if (props.pictureWallType === "hexagon") {
        firstLineCountFn();
      } else if (props.pictureWallType === "random") {
        randomInit();
      }
    });
    return {
      listData,
      rowWidth,
      rowPadding,
      doubleArr,
      rowOneNumArr,
      isFirstLineCount,
      topData,
      leftData,
      rotateData,
      isRandomBox,
      pictureWallBox,
      actualWidth,
      actualHeight,
      pageJump,
      dataRandomCenter,
      updataList,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = {
  key: 0,
  class: "picture-wall-type"
};
const _hoisted_2 = {
  key: 0,
  id: "picture-wall__hexGrid"
};
const _hoisted_3 = ["onClick"];
const _hoisted_4 = ["src"];
const _hoisted_5 = ["title"];
const _hoisted_6 = ["title"];
const _hoisted_7 = {
  key: 1,
  class: "picture-wall-type picture-wall__random_box"
};
const _hoisted_8 = ["src", "onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-picture-wall-hexagon",
    style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
  }, [
    _ctx.pictureWallType === "hexagon" ? (openBlock(), createElementBlock("div", _hoisted_1, [
      _ctx.isFirstLineCount ? (openBlock(), createElementBlock("ul", _hoisted_2, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData, (value, index) => {
          return openBlock(), createElementBlock("li", {
            class: "picture-wall-hexagon__hex",
            key: index,
            style: normalizeStyle({
              width: _ctx.rowWidth + "%",
              paddingBottom: _ctx.rowPadding + "%",
              transform: _ctx.doubleArr.includes(index) ? "translateX(50%) rotate(-60deg) skewY(30deg)" : "",
              marginTop: _ctx.doubleArr.includes(index) ? "-" + _ctx.marginNum + "%" : "",
              marginBottom: _ctx.doubleArr.includes(index) ? "-" + _ctx.marginNum + "%" : "",
              clear: _ctx.rowOneNumArr.includes(index) ? "left" : "unset",
              marginLeft: _ctx.rowOneNumArr.includes(index) ? "0.8%" : ""
            })
          }, [
            createElementVNode("div", {
              class: "picture-wall-hexagon__hexIn",
              onClick: ($event) => _ctx.pageJump(value.link),
              style: normalizeStyle({ cursor: _ctx.isPageJump ? "pointer" : "auto" })
            }, [
              createElementVNode("img", {
                src: value.imgSrc,
                alt: ""
              }, null, 8, _hoisted_4),
              createElementVNode("h1", {
                style: normalizeStyle({
                  backgroundColor: _ctx.maskBgColor,
                  color: _ctx.titleColor,
                  fontSize: _ctx.titleSize + "px"
                }),
                title: value.title
              }, toDisplayString(value.title), 13, _hoisted_5),
              createElementVNode("div", {
                class: "picture-wall-hexagon__p",
                style: normalizeStyle({ backgroundColor: _ctx.maskBgColor, color: _ctx.textColor, fontSize: _ctx.textSize + "px" }),
                title: value.text
              }, [
                createElementVNode("p", null, toDisplayString(value.text), 1)
              ], 12, _hoisted_6)
            ], 12, _hoisted_3)
          ], 4);
        }), 128))
      ])) : createCommentVNode("", true)
    ])) : createCommentVNode("", true),
    _ctx.pictureWallType === "random" ? (openBlock(), createElementBlock("div", _hoisted_7, [
      _ctx.isRandomBox ? (openBlock(), createElementBlock("div", {
        key: 0,
        ref: "pictureWallBox",
        class: "picture-wall__random",
        style: normalizeStyle({ width: _ctx.actualWidth + "px", height: _ctx.actualHeight + "px" })
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
          return openBlock(), createElementBlock("img", {
            src: item.imgSrc,
            style: normalizeStyle({
              width: _ctx.maxWidth + "px",
              height: _ctx.maxHeight + "px",
              top: _ctx.topData[index] + "px" || "",
              left: _ctx.leftData[index] + "px" || "",
              transform: "rotate(" + _ctx.rotateData[index] + "deg)" || "",
              transition: "1s",
              backgroundColor: _ctx.randomBgColor,
              borderColor: _ctx.randomBorderColor
            }),
            key: index,
            onClick: ($event) => _ctx.pageJump(item.link),
            onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.dataRandomCenter && _ctx.dataRandomCenter(...args)),
            onError: _cache[1] || (_cache[1] = (...args) => _ctx.dataRandomCenter && _ctx.dataRandomCenter(...args))
          }, null, 44, _hoisted_8);
        }), 128))
      ], 4)) : createCommentVNode("", true)
    ])) : createCommentVNode("", true)
  ], 4);
}
var pictureWallHexagon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-07954021"]]);
export { pictureWallHexagon as default };