@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
273 lines (272 loc) • 9.16 kB
JavaScript
import { ref, reactive, computed, onMounted, watch, nextTick, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, toDisplayString, renderSlot, withDirectives, vShow, createCommentVNode, withModifiers } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { u as useExpose } from "./index-79c5dc33.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("elevator");
const _sfc_main = create({
props: {
height: {
type: [Number, String],
default: "200px"
},
acceptKey: {
type: [String],
default: "title"
},
indexList: {
type: Array,
default: () => {
return [];
}
},
isSticky: {
type: [Boolean],
default: false
},
spaceHeight: {
type: [Number],
default: 23
},
titleHeight: {
type: [Number],
default: 35
}
},
emits: ["click-item", "click-index", "change"],
setup(props, context) {
const listview = ref(null);
const state = reactive({
anchorIndex: 0,
codeIndex: 0,
listHeight: [],
listGroup: [],
touchState: {
y1: 0,
y2: 0
},
scrollStart: false,
currentIndex: 0,
currentData: {},
currentKey: "",
scrollY: 0,
diff: -1,
fixedTop: 0
});
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const fixedStyle = computed(() => {
return {
transform: `translate3d(0, ${state.scrollY + state.fixedTop}px, 0)`
};
});
const clientHeight = computed(() => {
return listview.value.clientHeight;
});
const getData = (el, name) => {
const prefix = "data-";
return el.getAttribute(prefix + name);
};
const setListGroup = (el) => {
nextTick(() => {
if (!state.listGroup.includes(el) && el != null) {
state.listGroup.push(el);
}
});
};
const calculateHeight = () => {
let height = 0;
state.listHeight.push(height);
for (let i = 0; i < state.listGroup.length; i++) {
let item = state.listGroup[i];
height += Math.floor(item.clientHeight);
state.listHeight.push(height);
}
};
const scrollTo = (index) => {
if (!index && index !== 0) {
return;
}
if (index < 0)
index = 0;
if (index > state.listHeight.length - 2)
index = state.listHeight.length - 2;
state.codeIndex = index;
listview.value.scrollTo(0, state.listHeight[index]);
};
const touchStart = (e) => {
state.scrollStart = true;
let index = getData(e.target, "index");
let firstTouch = e.touches[0];
state.touchState.y1 = firstTouch.pageY;
state.anchorIndex = +index;
state.codeIndex = +index;
scrollTo(+index);
};
const touchMove = (e) => {
let firstTouch = e.touches[0];
state.touchState.y2 = firstTouch.pageY;
let delta = (state.touchState.y2 - state.touchState.y1) / props.spaceHeight | 0;
state.codeIndex = state.anchorIndex + delta;
scrollTo(state.codeIndex);
};
const touchEnd = () => {
state.scrollStart = false;
};
const handleClickItem = (key, item) => {
context.emit("click-item", key, item);
state.currentData = item;
state.currentKey = key;
};
const handleClickIndex = (key) => {
context.emit("click-index", key);
};
const listViewScroll = (e) => {
let target = e.target;
let scrollTop = target.scrollTop;
const listHeight = state.listHeight;
state.scrollY = scrollTop;
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i];
let height2 = listHeight[i + 1];
if (state.scrollY >= height1 && state.scrollY < height2) {
state.currentIndex = i;
state.diff = height2 - state.scrollY;
return;
}
}
state.currentIndex = listHeight.length - 2;
};
onMounted(() => {
listview.value.addEventListener("scroll", listViewScroll);
});
useExpose({
scrollTo
});
watch(
() => state.listGroup.length,
() => {
state.listHeight = [];
nextTick(calculateHeight);
}
);
watch(
() => state.diff,
(newVal) => {
const listHeight = state.listHeight;
let fixedTop = newVal > 0 && newVal < props.titleHeight ? newVal - props.titleHeight : 0;
if (state.scrollY + clientHeight.value === listHeight[listHeight.length - 1]) {
if (fixedTop !== 0)
fixedTop = 0;
}
if (state.fixedTop === fixedTop)
return;
state.fixedTop = fixedTop;
}
);
watch(
() => state.currentIndex,
(newVal) => {
context.emit("change", newVal);
}
);
return {
classes,
...toRefs(state),
fixedStyle,
clientHeight,
setListGroup,
listview,
touchStart,
touchMove,
touchEnd,
handleClickItem,
handleClickIndex
};
}
});
const _hoisted_1 = { class: "cqmc-elevator__list__item__code" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["innerHTML"];
const _hoisted_4 = { class: "cqmc-elevator__fixed-title" };
const _hoisted_5 = { class: "cqmc-elevator__bars__inner" };
const _hoisted_6 = ["data-index", "onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes)
}, [
createElementVNode("view", {
class: "cqmc-elevator__list",
ref: "listview",
style: normalizeStyle({ height: isNaN(+_ctx.height) ? _ctx.height : `${_ctx.height}px` })
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item) => {
return openBlock(), createElementBlock("view", {
class: "cqmc-elevator__list__item",
key: item[_ctx.acceptKey],
ref_for: true,
ref: _ctx.setListGroup
}, [
createElementVNode("view", _hoisted_1, toDisplayString(item[_ctx.acceptKey]), 1),
(openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (subitem) => {
return openBlock(), createElementBlock("view", {
class: normalizeClass(["cqmc-elevator__list__item__name", {
"cqmc-elevator__list__item__name--highcolor": _ctx.currentData.id === subitem.id && _ctx.currentKey === item[_ctx.acceptKey]
}]),
key: subitem["id"],
onClick: ($event) => _ctx.handleClickItem(item[_ctx.acceptKey], subitem)
}, [
!_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
key: 0,
innerHTML: subitem.name
}, null, 8, _hoisted_3)) : renderSlot(_ctx.$slots, "default", {
key: 1,
item: subitem
})
], 10, _hoisted_2);
}), 128))
]);
}), 128)),
_ctx.isSticky ? withDirectives((openBlock(), createElementBlock("view", {
key: 0,
class: "cqmc-elevator__list__fixed",
style: normalizeStyle(_ctx.fixedStyle)
}, [
createElementVNode("span", _hoisted_4, toDisplayString(_ctx.indexList[_ctx.currentIndex][_ctx.acceptKey]), 1)
], 4)), [
[vShow, _ctx.scrollY > 0]
]) : createCommentVNode("", true)
], 4),
_ctx.indexList.length ? withDirectives((openBlock(), createElementBlock("view", {
key: 0,
class: "cqmc-elevator__code--current"
}, toDisplayString(_ctx.indexList[_ctx.codeIndex][_ctx.acceptKey]), 513)), [
[vShow, _ctx.scrollStart]
]) : createCommentVNode("", true),
createElementVNode("view", {
class: "cqmc-elevator__bars",
onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
onTouchmove: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.touchMove && _ctx.touchMove(...args), ["stop", "prevent"])),
onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
}, [
createElementVNode("view", _hoisted_5, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item, index) => {
return openBlock(), createElementBlock("view", {
class: normalizeClass(["cqmc-elevator__bars__inner__item", { active: item[_ctx.acceptKey] === _ctx.indexList[_ctx.currentIndex][_ctx.acceptKey] }]),
"data-index": index,
key: item[_ctx.acceptKey],
onClick: ($event) => _ctx.handleClickIndex(item[_ctx.acceptKey])
}, toDisplayString(item[_ctx.acceptKey]), 11, _hoisted_6);
}), 128))
])
], 32)
], 2);
}
const Elevator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
Elevator as default
};