85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
import { ref, defineComponent, createVNode as _createVNode } from "vue";
|
|
import { truthProp, numericProp, getZIndexStyle, createNamespace, callInterceptor, makeNumericProp, BORDER_TOP_BOTTOM } from "../utils/index.mjs";
|
|
import { useChildren } from "@vant/use";
|
|
import { usePlaceholder } from "../composables/use-placeholder.mjs";
|
|
const [name, bem] = createNamespace("tabbar");
|
|
const tabbarProps = {
|
|
route: Boolean,
|
|
fixed: truthProp,
|
|
border: truthProp,
|
|
zIndex: numericProp,
|
|
placeholder: Boolean,
|
|
activeColor: String,
|
|
beforeChange: Function,
|
|
inactiveColor: String,
|
|
modelValue: makeNumericProp(0),
|
|
safeAreaInsetBottom: {
|
|
type: Boolean,
|
|
default: null
|
|
}
|
|
};
|
|
const TABBAR_KEY = Symbol(name);
|
|
var stdin_default = defineComponent({
|
|
name,
|
|
props: tabbarProps,
|
|
emits: ["change", "update:modelValue"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
const root = ref();
|
|
const {
|
|
linkChildren
|
|
} = useChildren(TABBAR_KEY);
|
|
const renderPlaceholder = usePlaceholder(root, bem);
|
|
const enableSafeArea = () => {
|
|
var _a;
|
|
return (_a = props.safeAreaInsetBottom) != null ? _a : props.fixed;
|
|
};
|
|
const renderTabbar = () => {
|
|
var _a;
|
|
const {
|
|
fixed,
|
|
zIndex,
|
|
border
|
|
} = props;
|
|
return _createVNode("div", {
|
|
"ref": root,
|
|
"role": "tablist",
|
|
"style": getZIndexStyle(zIndex),
|
|
"class": [bem({
|
|
fixed
|
|
}), {
|
|
[BORDER_TOP_BOTTOM]: border,
|
|
"van-safe-area-bottom": enableSafeArea()
|
|
}]
|
|
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
|
};
|
|
const setActive = (active, afterChange) => {
|
|
callInterceptor(props.beforeChange, {
|
|
args: [active],
|
|
done() {
|
|
emit("update:modelValue", active);
|
|
emit("change", active);
|
|
afterChange();
|
|
}
|
|
});
|
|
};
|
|
linkChildren({
|
|
props,
|
|
setActive
|
|
});
|
|
return () => {
|
|
if (props.fixed && props.placeholder) {
|
|
return renderPlaceholder(renderTabbar);
|
|
}
|
|
return renderTabbar();
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
TABBAR_KEY,
|
|
stdin_default as default,
|
|
tabbarProps
|
|
};
|