128 lines
3.7 KiB
JavaScript
128 lines
3.7 KiB
JavaScript
import { watch, onMounted, onUnmounted, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
|
import { pick, isDef, unknownProp, numericProp, makeStringProp, makeNumberProp, createNamespace } from "../utils/index.mjs";
|
|
import { lockClick } from "./lock-click.mjs";
|
|
import { Icon } from "../icon/index.mjs";
|
|
import { Popup } from "../popup/index.mjs";
|
|
import { Loading } from "../loading/index.mjs";
|
|
const [name, bem] = createNamespace("toast");
|
|
const popupInheritProps = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay", "zIndex"];
|
|
const toastProps = {
|
|
icon: String,
|
|
show: Boolean,
|
|
type: makeStringProp("text"),
|
|
overlay: Boolean,
|
|
message: numericProp,
|
|
iconSize: numericProp,
|
|
duration: makeNumberProp(2e3),
|
|
position: makeStringProp("middle"),
|
|
teleport: [String, Object],
|
|
wordBreak: String,
|
|
className: unknownProp,
|
|
iconPrefix: String,
|
|
transition: makeStringProp("van-fade"),
|
|
loadingType: String,
|
|
forbidClick: Boolean,
|
|
overlayClass: unknownProp,
|
|
overlayStyle: Object,
|
|
closeOnClick: Boolean,
|
|
closeOnClickOverlay: Boolean,
|
|
zIndex: numericProp
|
|
};
|
|
var stdin_default = defineComponent({
|
|
name,
|
|
props: toastProps,
|
|
emits: ["update:show"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
let timer;
|
|
let clickable = false;
|
|
const toggleClickable = () => {
|
|
const newValue = props.show && props.forbidClick;
|
|
if (clickable !== newValue) {
|
|
clickable = newValue;
|
|
lockClick(clickable);
|
|
}
|
|
};
|
|
const updateShow = (show) => emit("update:show", show);
|
|
const onClick = () => {
|
|
if (props.closeOnClick) {
|
|
updateShow(false);
|
|
}
|
|
};
|
|
const clearTimer = () => clearTimeout(timer);
|
|
const renderIcon = () => {
|
|
const {
|
|
icon,
|
|
type,
|
|
iconSize,
|
|
iconPrefix,
|
|
loadingType
|
|
} = props;
|
|
const hasIcon = icon || type === "success" || type === "fail";
|
|
if (hasIcon) {
|
|
return _createVNode(Icon, {
|
|
"name": icon || type,
|
|
"size": iconSize,
|
|
"class": bem("icon"),
|
|
"classPrefix": iconPrefix
|
|
}, null);
|
|
}
|
|
if (type === "loading") {
|
|
return _createVNode(Loading, {
|
|
"class": bem("loading"),
|
|
"size": iconSize,
|
|
"type": loadingType
|
|
}, null);
|
|
}
|
|
};
|
|
const renderMessage = () => {
|
|
const {
|
|
type,
|
|
message
|
|
} = props;
|
|
if (slots.message) {
|
|
return _createVNode("div", {
|
|
"class": bem("text")
|
|
}, [slots.message()]);
|
|
}
|
|
if (isDef(message) && message !== "") {
|
|
return type === "html" ? _createVNode("div", {
|
|
"key": 0,
|
|
"class": bem("text"),
|
|
"innerHTML": String(message)
|
|
}, null) : _createVNode("div", {
|
|
"class": bem("text")
|
|
}, [message]);
|
|
}
|
|
};
|
|
watch(() => [props.show, props.forbidClick], toggleClickable);
|
|
watch(() => [props.show, props.type, props.message, props.duration], () => {
|
|
clearTimer();
|
|
if (props.show && props.duration > 0) {
|
|
timer = setTimeout(() => {
|
|
updateShow(false);
|
|
}, props.duration);
|
|
}
|
|
});
|
|
onMounted(toggleClickable);
|
|
onUnmounted(toggleClickable);
|
|
return () => _createVNode(Popup, _mergeProps({
|
|
"class": [bem([props.position, props.wordBreak === "normal" ? "break-normal" : props.wordBreak, {
|
|
[props.type]: !props.icon
|
|
}]), props.className],
|
|
"lockScroll": false,
|
|
"onClick": onClick,
|
|
"onClosed": clearTimer,
|
|
"onUpdate:show": updateShow
|
|
}, pick(props, popupInheritProps)), {
|
|
default: () => [renderIcon(), renderMessage()]
|
|
});
|
|
}
|
|
});
|
|
export {
|
|
stdin_default as default,
|
|
toastProps
|
|
};
|