@gyenno/nutui-taro
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
220 lines (219 loc) • 8.09 kB
JavaScript
import { reactive, computed, ref, inject, getCurrentInstance, onUnmounted, nextTick, resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, vShow, createTextVNode, createVNode, mergeProps, withCtx, Fragment, renderList, renderSlot, createCommentVNode, toDisplayString } from "vue";
import { c as createComponent } from "./component-25dcca32.js";
import { P as Popup } from "./index.taro-72b18dbf.js";
import { Check } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
import "./Overlay.js";
const { componentName, create } = createComponent("menu-item");
let _zIndex = 2e3;
const _sfc_main = create({
props: {
title: String,
options: {
type: Array,
default: []
},
disabled: {
type: Boolean,
default: false
},
modelValue: null,
cols: {
type: Number,
default: 1
},
activeTitleClass: String,
inactiveTitleClass: String,
optionIcon: {
type: String,
default: "Check"
}
},
components: {
Check,
[Popup.name]: Popup
},
emits: ["update:modelValue", "change"],
setup(props, { emit, slots }) {
const state = reactive({
zIndex: _zIndex,
showPopup: false,
transition: true,
showWrapper: false,
isShowPlaceholderElement: false
});
const useParent = () => {
const parent2 = inject("menuParent", null);
if (parent2) {
const instance = getCurrentInstance();
const { link, removeLink } = parent2;
link(instance);
onUnmounted(() => {
removeLink(instance);
});
return {
parent: parent2
};
}
};
const { parent } = useParent();
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const placeholderElementStyle = computed(() => {
const heightStyle = { height: parent.offset.value + "px" };
if (parent.props.direction === "down") {
return heightStyle;
} else {
return { ...heightStyle, top: "auto" };
}
});
const contentHeight = ref("auto");
const toggle = (show = !state.showPopup, options = {}) => {
if (show) {
nextTick(() => {
setTimeout(() => {
const query = Taro.createSelectorQuery();
query.selectAll(".nut-menu-item__content").boundingClientRect();
query.exec((res) => {
const data = res[0];
const _height = data.filter((item) => item.height > 0);
contentHeight.value = _height[0]["height"] + "px";
});
}, 500);
});
}
if (show === state.showPopup) {
return;
}
state.showPopup = show;
state.isShowPlaceholderElement = show;
if (show) {
state.showWrapper = true;
state.zIndex = ++_zIndex;
}
};
const renderTitle = () => {
var _a;
if (props.title) {
return props.title;
}
const match = (_a = props.options) == null ? void 0 : _a.find((option) => option.value === props.modelValue);
return match ? match.text : "";
};
const onClick = (option) => {
state.showPopup = false;
state.isShowPlaceholderElement = false;
if (option.value !== props.modelValue) {
emit("update:modelValue", option.value);
emit("change", option.value);
}
};
const handleClose = () => {
state.showWrapper = false;
state.isShowPlaceholderElement = false;
};
const handleClickOutside = () => {
state.showPopup = false;
};
return {
classes,
placeholderElementStyle,
renderTitle,
state,
parent,
toggle,
onClick,
handleClose,
handleClickOutside,
contentHeight
};
}
});
const _hoisted_1 = { "scroll-y": true };
const _hoisted_2 = { class: "nut-menu-item__content" };
const _hoisted_3 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Check = resolveComponent("Check");
const _component_nut_popup = resolveComponent("nut-popup");
return withDirectives((openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes),
style: normalizeStyle({ zIndex: _ctx.state.zIndex })
}, [
withDirectives(createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClickOutside && _ctx.handleClickOutside(...args)),
class: normalizeClass(["nut-menu-item-placeholder-element", { up: _ctx.parent.props.direction === "up" }]),
style: normalizeStyle(_ctx.placeholderElementStyle)
}, null, 6), [
[vShow, _ctx.state.isShowPlaceholderElement]
]),
createTextVNode(),
createVNode(_component_nut_popup, mergeProps({
style: _ctx.parent.props.direction === "down" ? {
top: _ctx.parent.offset.value + "px",
height: _ctx.state.showPopup ? _ctx.contentHeight : 0
} : {
bottom: _ctx.parent.offset.value + "px",
height: _ctx.state.showPopup ? _ctx.contentHeight : 0
},
"overlay-style": _ctx.parent.props.direction === "down" ? { top: _ctx.parent.offset.value + "px" } : { bottom: _ctx.parent.offset.value + "px", top: "auto" },
transition: "none"
}, _ctx.$attrs, {
visible: _ctx.state.showPopup,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.state.showPopup = $event),
position: _ctx.parent.props.direction === "down" ? "top" : "bottom",
duration: _ctx.parent.props.duration,
"pop-class": "nut-menu__pop",
"destroy-on-close": false,
overlay: _ctx.parent.props.overlay,
lockScroll: _ctx.parent.props.lockScroll,
onClosed: _ctx.handleClose,
"close-on-click-overlay": _ctx.parent.props.closeOnClickOverlay
}), {
default: withCtx(() => [
createElementVNode("scroll-view", _hoisted_1, [
createElementVNode("view", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
return openBlock(), createElementBlock("view", {
key: index,
class: normalizeClass(["nut-menu-item__option", [{ active: option.value === _ctx.modelValue }]]),
style: normalizeStyle({ "flex-basis": 100 / _ctx.cols + "%" }),
onClick: ($event) => _ctx.onClick(option)
}, [
option.value === _ctx.modelValue ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(["nut-menu-item__span", [option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass]])
}, [
renderSlot(_ctx.$slots, "icon", {}, () => [
createVNode(_component_Check, mergeProps(_ctx.$attrs, {
color: _ctx.parent.props.activeColor
}), null, 16, ["color"])
])
], 2)) : createCommentVNode("", true),
createTextVNode(),
createElementVNode("view", {
class: normalizeClass([option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass]),
style: normalizeStyle({ color: option.value === _ctx.modelValue ? _ctx.parent.props.activeColor : "" })
}, toDisplayString(option.text), 7)
], 14, _hoisted_3);
}), 128)),
createTextVNode(),
renderSlot(_ctx.$slots, "default")
])
])
]),
_: 3
}, 16, ["style", "overlay-style", "visible", "position", "duration", "overlay", "lockScroll", "onClosed", "close-on-click-overlay"])
], 6)), [
[vShow, _ctx.state.showWrapper]
]);
}
const index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index_taro as default
};