123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- 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
- };
|