cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
222 lines (221 loc) • 8.28 kB
JavaScript
import { defineComponent, ref, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, Fragment, renderList, toDisplayString, normalizeStyle, 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: "CoTableEffectList",
props: {},
setup(props) {
let aniType;
((aniType2) => {
aniType2[aniType2["slide"] = 0] = "slide";
aniType2[aniType2["flip"] = 1] = "flip";
})(aniType || (aniType = {}));
const anitype = ref("flip");
const headData = ref([]);
const tableData = ref([]);
const pageData = ref([]);
const pageIndex = ref(1);
const pageItem = ref(3);
const pageCount = ref(0);
const tempIndex = ref(-1);
const hideDeg = ref(0);
const showDeg = ref(0);
const aniSlide = () => {
let dataTable = document.querySelector("#tList");
let dataRow = dataTable.querySelectorAll(".data-row");
for (let i = 1; i < (dataRow == null ? void 0 : dataRow.length); i++) {
dataRow[i].classList.remove("ani-slide-out-odd");
dataRow[i].classList.remove("ani-slide-out-even");
if (i % 2) {
dataRow[i].classList.add("ani-slide-out-even");
} else {
dataRow[i].classList.add("ani-slide-out-odd");
}
}
setTimeout(function() {
for (let i = 1; i < (dataRow == null ? void 0 : dataRow.length); i++) {
dataRow[i].classList.remove("ani-slide-out-odd");
dataRow[i].classList.remove("ani-slide-out-even");
}
}, 500);
};
const initData = () => {
if (!props.data.length)
return;
headData.value = props.data[0];
if (anitype.value == "slide") {
tableData.value = props.data.slice(1);
pageCount.value = Math.ceil(tableData.value.length / pageItem.value);
pageData.value = tableData.value.slice(pageIndex.value - 1, pageItem.value);
} else {
hideDeg.value = -90;
showDeg.value = 0;
tableData.value = props.data.slice(1);
pageCount.value = Math.ceil(tableData.value.length / pageItem.value);
let page1 = tableData.value.slice(pageIndex.value - 1, pageItem.value);
let page2 = tableData.value.slice(
pageItem.value * pageIndex.value,
pageItem.value * (pageIndex.value + 1)
);
let data = [page1, page2];
console.log("tableData", tableData.value, "page1", page1, "page2", page2);
pageIndex.value = 2;
pageData.value = data;
}
};
const getPageData = () => {
if (anitype.value == "slide") {
let startIndex = (pageIndex.value - 1) * pageItem.value;
let endIndex = startIndex + pageItem.value;
pageData.value = tableData.value.slice(startIndex, endIndex);
} else {
let startIndex = (pageIndex.value - 1) * pageItem.value;
let endIndex = startIndex + pageItem.value;
let single_page_data = tableData.value.slice(startIndex, endIndex);
if (tempIndex.value < pageIndex.value) {
hideDeg.value = -(hideDeg.value + 270);
showDeg.value = -(hideDeg.value + 90);
pageData.value.splice(0, 1, single_page_data);
} else {
hideDeg.value = hideDeg.value + 270;
showDeg.value = hideDeg.value + 90;
pageData.value.splice(1, 1, single_page_data);
}
tempIndex.value = pageIndex.value;
}
};
const onPrev = () => {
pageIndex.value--;
if (pageIndex.value < 1) {
pageIndex.value = 1;
return;
}
getPageData();
nextTick(() => {
aniSlide();
});
};
const onNext = () => {
pageIndex.value++;
if (pageIndex.value > pageCount.value) {
pageIndex.value = pageCount.value;
return;
}
getPageData();
nextTick(() => {
aniSlide();
});
};
onMounted(() => {
initData();
});
return {
hideDeg,
showDeg,
pageData,
onPrev,
onNext
};
}
});
const _hoisted_1 = { class: "co-table-effect-list" };
const _hoisted_2 = {
id: "tList",
class: "data-table slide",
style: { "display": "none" }
};
const _hoisted_3 = { class: "data-row" };
const _hoisted_4 = { class: "data-column" };
const _hoisted_5 = { class: "data-column" };
const _hoisted_6 = { class: "cell" };
const _hoisted_7 = {
id: "tList",
class: "data-table filp"
};
const _hoisted_8 = { class: "data-row" };
const _hoisted_9 = { class: "data-column" };
const _hoisted_10 = { class: "data-column" };
const _hoisted_11 = { class: "cell" };
const _hoisted_12 = { class: "data-column" };
const _hoisted_13 = { class: "cell" };
const _hoisted_14 = { class: "page" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("ul", _hoisted_2, [
createElementVNode("li", _hoisted_3, [
createElementVNode("ul", _hoisted_4, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headData, (field) => {
return openBlock(), createElementBlock("li", {
class: "cell",
key: field
}, toDisplayString(field), 1);
}), 128))
])
]),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pageData, (item, index) => {
return openBlock(), createElementBlock("li", {
key: index,
class: "data-row"
}, [
createElementVNode("ul", _hoisted_5, [
(openBlock(true), createElementBlock(Fragment, null, renderList(item, (field) => {
return openBlock(), createElementBlock("li", _hoisted_6, toDisplayString(field), 1);
}), 256))
])
]);
}), 128))
]),
createElementVNode("ul", _hoisted_7, [
createElementVNode("li", _hoisted_8, [
createElementVNode("ul", _hoisted_9, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headData, (field) => {
return openBlock(), createElementBlock("li", {
class: "cell",
key: field
}, toDisplayString(field), 1);
}), 128))
])
]),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pageData[0], (item, index) => {
return openBlock(), createElementBlock("li", {
class: "data-row",
key: index
}, [
_ctx.pageData[1][index] ? (openBlock(), createElementBlock("div", {
key: 0,
class: "back",
style: normalizeStyle({ transform: `rotateX(${_ctx.hideDeg}deg)` })
}, [
createElementVNode("ul", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pageData[1][index], (field) => {
return openBlock(), createElementBlock("li", _hoisted_11, toDisplayString(field), 1);
}), 256))
])
], 4)) : createCommentVNode("", true),
createElementVNode("div", {
class: "font",
style: normalizeStyle({ transform: `rotateX(${_ctx.showDeg}deg)` })
}, [
createElementVNode("ul", _hoisted_12, [
(openBlock(true), createElementBlock(Fragment, null, renderList(item, (field) => {
return openBlock(), createElementBlock("li", _hoisted_13, toDisplayString(field), 1);
}), 256))
])
], 4)
]);
}), 128))
]),
createElementVNode("div", _hoisted_14, [
createElementVNode("div", {
class: "prev",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onPrev && _ctx.onPrev(...args))
}, "\u4E0A\u4E00\u9875"),
createElementVNode("div", {
class: "next",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onNext && _ctx.onNext(...args))
}, "\u4E0B\u4E00\u9875")
])
]);
}
var TableEffectList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-41037b8b"]]);
export { TableEffectList as default };