@gyenno/nutui-taro
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
291 lines (290 loc) • 9.1 kB
JavaScript
import { inject, ref, reactive, computed, getCurrentInstance, watch, onMounted, toRefs, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, createBlock, resolveDynamicComponent } from "vue";
import Taro, { eventCenter, getCurrentInstance as getCurrentInstance$1 } from "@tarojs/taro";
import { c as createComponent } from "./component-25dcca32.js";
import { r as renderIcon } from "./renderIcon-3d0fd47c.js";
import { DownArrow } from "@nutui/icons-vue-taro";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { create, componentName } = createComponent("collapse-item");
const _sfc_main = create({
props: {
collapseRef: {
type: Object
},
title: {
type: String,
default: ""
},
value: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
name: {
type: [Number, String],
default: -1,
required: true
},
border: {
type: Boolean,
default: true
},
icon: {
type: Object,
default: () => DownArrow
},
rotate: {
type: [String, Number],
default: 180
}
},
setup(props, ctx) {
const collapse = inject("collapseParent");
const conHeight = ref("auto");
const parent = reactive(collapse);
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const relation = (child) => {
if (child.proxy) {
parent.children.push(child.proxy);
}
};
relation(getCurrentInstance());
const proxyData = reactive({
openExpanded: false
});
const wrapperRef = ref(null);
const contentRef = ref(null);
const onTransitionEnd = () => {
nextTick(() => {
parent.children.forEach((item1, index) => {
let ary = Array.from(item1.$el.children);
ary.forEach((item2, index2) => {
if (item2.className.includes("nut-collapse__item-wrapper")) {
item2.style.willChange = "auto";
}
});
});
});
};
const animation = () => {
nextTick(() => {
const query = Taro.getEnv() === "ALIPAY" ? my.createSelectorQuery() : Taro.createSelectorQuery();
query.selectAll(".nut-collapse__item-wrapper__content").boundingClientRect();
query.exec((res) => {
if (Taro.getEnv() === "WEB") {
getH5();
} else {
getH(res[0]);
}
});
if (!proxyData.openExpanded) {
onTransitionEnd();
}
});
};
const open = () => {
proxyData.openExpanded = !proxyData.openExpanded;
setTimeout(
() => {
animation();
},
init.value ? 500 : 0
);
};
const defaultOpen = () => {
open();
};
const currentName = computed(() => props.name);
const toggleOpen = () => {
if (parent.props.accordion) {
nextTick(() => {
if (currentName.value == parent.props.modelValue) {
open();
} else {
parent.changeVal(currentName.value);
}
});
} else {
parent.changeValAry(props.name);
open();
}
};
const changeOpen = (bol) => {
proxyData.openExpanded = bol;
};
const expanded = computed(() => {
if (parent) {
return parent.isExpanded(props.name);
}
return null;
});
watch(expanded, (value, oldValue) => {
if (value) {
proxyData.openExpanded = true;
}
});
const getH = (list) => {
parent.children.forEach((item1, index1) => {
let ary = Array.from(item1.$el.children);
let _uid = ary[1].children[0]["uid"];
let tm = list == null ? void 0 : list.filter((item2) => item2.id == _uid);
if (tm && tm.length > 0) {
let h = tm[0]["height"];
item1.conHeight = h;
setTimeout(() => {
init.value && handleOpen();
}, 500);
}
});
};
const getH5 = () => {
parent.children.forEach((item1, index1) => {
let ary = Array.from(item1.$el.children);
let h = ary[1].children[0]["offsetHeight"];
item1.conHeight = h;
setTimeout(() => {
init.value && handleOpen();
}, 500);
});
};
const getRefHeight = () => {
const query = Taro.getEnv() === "ALIPAY" ? my.createSelectorQuery() : Taro.createSelectorQuery();
query.selectAll(".nut-collapse__item-wrapper__content").boundingClientRect();
query.exec((res) => {
if (Taro.getEnv() === "WEB") {
getH5();
} else {
getH(res[0]);
}
});
};
const handleOpen = () => {
const { name } = props;
const active = parent && parent.props.modelValue;
if (typeof active == "number" || typeof active == "string") {
if (name == active) {
defaultOpen();
}
} else if (Object.values(active) instanceof Array) {
const f = Object.values(active).filter((item) => item == name);
if (f.length > 0) {
defaultOpen();
}
}
init.value = false;
};
const init = ref(true);
onMounted(() => {
if (Taro.getEnv() === "WEB") {
getRefHeight();
} else {
eventCenter.once(getCurrentInstance$1().router.onReady, () => {
getRefHeight();
});
}
});
return {
renderIcon,
classes,
...toRefs(proxyData),
...toRefs(parent.props),
conHeight,
wrapperRef,
contentRef,
open,
toggleOpen,
changeOpen,
animation
};
}
});
const _hoisted_1 = { class: "nut-collapse-item__title-main" };
const _hoisted_2 = { class: "nut-collapse-item__title-main-value" };
const _hoisted_3 = ["innerHTML"];
const _hoisted_4 = {
key: 2,
class: "nut-collapse-item__title-label"
};
const _hoisted_5 = {
key: 0,
class: "nut-collapse-item__title-sub"
};
const _hoisted_6 = ["innerHTML"];
const _hoisted_7 = {
key: 0,
class: "nut-collapse__item-extraWrapper"
};
const _hoisted_8 = { class: "nut-collapse__item-extraWrapper__extraRender" };
const _hoisted_9 = {
class: "nut-collapse__item-wrapper__content",
ref: "contentRef"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes)
}, [
createElementVNode("view", {
class: normalizeClass(["nut-collapse-item__title", { "nut-collapse-item__title--disabled": _ctx.disabled }]),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleOpen && _ctx.toggleOpen(...args))
}, [
createElementVNode("view", _hoisted_1, [
createElementVNode("view", _hoisted_2, [
_ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock("view", {
key: 1,
innerHTML: _ctx.title,
class: "nut-collapse-item__title-mtitle"
}, null, 8, _hoisted_3)),
createTextVNode(),
_ctx.label ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true)
])
]),
createTextVNode(),
_ctx.$slots.value ? (openBlock(), createElementBlock("view", _hoisted_5, [
renderSlot(_ctx.$slots, "value")
])) : (openBlock(), createElementBlock("view", {
key: 1,
innerHTML: _ctx.value,
class: "nut-collapse-item__title-sub"
}, null, 8, _hoisted_6)),
createTextVNode(),
createElementVNode("view", {
class: normalizeClass(["nut-collapse-item__title-icon", { "nut-collapse-item__title-icon--expanded": _ctx.openExpanded }]),
style: normalizeStyle({ transform: "rotate(" + (_ctx.openExpanded ? _ctx.rotate : 0) + "deg)" })
}, [
_ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.icon)), { key: 0 })) : createCommentVNode("", true)
], 6)
], 2),
createTextVNode(),
_ctx.$slots.extra ? (openBlock(), createElementBlock("view", _hoisted_7, [
createElementVNode("div", _hoisted_8, [
renderSlot(_ctx.$slots, "extra")
])
])) : createCommentVNode("", true),
createTextVNode(),
createElementVNode("view", {
class: normalizeClass(["nut-collapse__item-wrapper", _ctx.openExpanded ? "open-style" : "close-style"]),
ref: "wrapperRef",
style: normalizeStyle({ height: _ctx.openExpanded ? _ctx.conHeight == "auto" ? "auto" : _ctx.conHeight + "px" : 0 })
}, [
createElementVNode("view", _hoisted_9, [
renderSlot(_ctx.$slots, "default")
], 512)
], 6)
], 2);
}
const index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index_taro as default
};