@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制,使用 TypeScript</b></p>
61 lines (60 loc) • 1.81 kB
JavaScript
import { defineComponent, ref, computed, provide, createElementBlock, openBlock, renderSlot, nextTick } from "vue";
import { collapseProps } from "./types.mjs";
import { collapseInjectKey } from "./provide.mjs";
import { isArray, isArrayEqual } from "../_utils/is.mjs";
const _hoisted_1 = { class: "o-collapse" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "OCollapse",
props: collapseProps,
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const _innerValue = ref(props.defaultValue);
const computedValue = computed(() => {
const value = props.modelValue ?? _innerValue.value;
if (!isArray(value)) {
return [value];
}
return value;
});
const handleItemClick = (value, e) => {
let realValue = [];
if (props.accordion) {
if (!computedValue.value.includes(value)) {
realValue = [value];
}
} else {
realValue = [...computedValue.value];
const idx = realValue.indexOf(value);
if (idx > -1) {
realValue.splice(idx, 1);
} else {
realValue.push(value);
}
}
_innerValue.value = realValue;
emits("update:modelValue", realValue);
emitChange(realValue, e);
};
const emitChange = (val, e) => {
nextTick(() => {
if (isArrayEqual(val, computedValue.value)) {
emits("change", computedValue.value, e);
}
});
};
provide(collapseInjectKey, {
computedValue,
handleItemClick
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default")
]);
};
}
});
export {
_sfc_main as default
};