song-ui-u
Version:
vue3 + js的PC前端组件库
1 lines • 5.21 kB
Source Map (JSON)
{"version":3,"file":"message.vue.cjs","sources":["../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n <transition :name=\"ns.b()\" @leave=\"onClose\" @after-leave=\"onUnmount\">\n <div\n ref=\"messageRef\"\n :class=\"[ns.b(), ns.m(theme), ns.is('background', background)]\"\n :style=\"[customStyle]\"\n v-show=\"visible\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"startTime\"\n >\n <div :class=\"[ns.e('icon')]\">\n <x-icon><component :is=\"icon\" /></x-icon>\n </div>\n <div :class=\"[ns.e('content')]\">{{ content }}</div>\n <div :class=\"[ns.e('close')]\" @click.stop=\"close\" v-if=\"showClose\">\n <x-icon><component :is=\"typeIcon['close']\" /></x-icon>\n </div>\n </div>\n </transition>\n</template>\n<script>\nexport default { name: \"AlMessage\" };\n</script>\n<script setup>\nimport { computed, ref, onMounted } from \"vue\";\nimport { useNamespace, useStyle } from \"@ui-library/hook\";\nimport {\n tryOnBeforeUnmount,\n useResizeObserver,\n useTimeoutFn,\n} from \"@vueuse/core\";\nimport { XIcon } from \"@ui-library/components\";\nimport { typeIcon, themeType } from \"@ui-library/utils\";\nimport { getPrevBottomOffset } from \"./instance\";\nimport { useZindex } from \"@ui-library/hook\";\nconst ns = useNamespace(\"message\");\nconst { nextZindex, currentZindex } = useZindex();\n\nconst uStyle = useStyle();\n/** props */\nconst props = defineProps({\n type: {\n type: String,\n default: \"\",\n },\n id: {\n type: String,\n default: \"\",\n },\n offset: {\n type: Number,\n default: 0,\n },\n content: {\n type: String,\n default: \"\",\n },\n duration: {\n type: Number,\n default: 3000,\n },\n onClose: Function,\n onUnmount: Function,\n showClose: Boolean,\n background: Boolean,\n});\n\nconst visible = ref(false);\nconst messageRef = ref(null);\nconst height = ref(0);\n\n// 上一个message\nconst prevButtonPosition = computed(() => getPrevBottomOffset(props.id));\n// 偏移更新\nconst offsetTop = computed(() => {\n return props.offset + prevButtonPosition.value;\n});\n// 底部到可视区顶部的距离\nconst bottomPosition = computed(() => height.value + offsetTop.value);\n// 自定义样式\nconst customStyle = computed(() => {\n return {\n top: offsetTop.value + \"px\",\n zIndex: currentZindex.value,\n };\n});\n// icon\nconst icon = computed(() => {\n return typeIcon[props.type] || props.type;\n});\nconst theme = computed(() => themeType?.[props.type] || props.type);\n\nconst startTime = async () => {\n if (props.duration === 0) {\n return false;\n }\n ({ stop } = useTimeoutFn(() => {\n close();\n }, props.duration));\n};\n\nconst onMouseEnter = () => stop?.();\n\nconst close = () => (visible.value = false);\n\nonMounted(() => {\n visible.value = true;\n nextZindex();\n startTime();\n});\n\nuseResizeObserver(messageRef, (entries) => {\n const entry = entries[0];\n height.value = entry.contentRect.height;\n});\n\ndefineExpose({ bottomPosition });\n</script>\n"],"names":["useNamespace","useZindex","useStyle","ref","computed","getPrevBottomOffset","typeIcon","themeType","useTimeoutFn","onMounted","useResizeObserver"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAe,WAAA,GAAA,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcpC,MAAM,EAAE,GAAGA,oBAAY,CAAC,SAAS,CAAC,CAAA;AAClC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAGC,eAAS,EAAE,CAAA;;AAEjD,MAAM,MAAM,GAAGC,gBAAQ,EAAE,CAAA;AACzB;AACA,MAAM,KAAK,GAAG,OAyBZ,CAAA;;AAEF,MAAM,OAAO,GAAGC,OAAG,CAAC,KAAK,CAAC,CAAA;AAC1B,MAAM,UAAU,GAAGA,OAAG,CAAC,IAAI,CAAC,CAAA;AAC5B,MAAM,MAAM,GAAGA,OAAG,CAAC,CAAC,CAAC,CAAA;;AAErB;AACA,MAAM,kBAAkB,GAAGC,YAAQ,CAAC,MAAMC,4BAAmB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;AACxE;AACA,MAAM,SAAS,GAAGD,YAAQ,CAAC,MAAM;AACjC,EAAE,OAAO,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAA;AAChD,CAAC,CAAC,CAAA;AACF;AACA,MAAM,cAAc,GAAGA,YAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;AACrE;AACA,MAAM,WAAW,GAAGA,YAAQ,CAAC,MAAM;AACnC,EAAE,OAAO;AACT,IAAI,GAAG,EAAE,SAAS,CAAC,KAAK,GAAG,IAAI;AAC/B,IAAI,MAAM,EAAE,aAAa,CAAC,KAAK;AAC/B,GAAG,CAAA;AACH,CAAC,CAAC,CAAA;AACF;AACA,MAAM,IAAI,GAAGA,YAAQ,CAAC,MAAM;AAC5B,EAAE,OAAOE,uBAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAA;AAC3C,CAAC,CAAC,CAAA;AACF,MAAM,KAAK,GAAGF,YAAQ,CAAC,MAAMG,mBAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAA;;AAEnE,MAAM,SAAS,GAAG,YAAY;AAC9B,EAAE,IAAI,KAAK,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC5B,IAAI,OAAO,KAAK,CAAA;AAChB,GAAE;AACF,EAAE,CAAC,EAAE,IAAI,EAAE,GAAGC,iBAAY,CAAC,MAAM;AACjC,IAAI,KAAK,EAAE,CAAA;AACX,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAC;AACrB,CAAC,CAAA;;AAED,MAAM,YAAY,GAAG,MAAM,IAAI,IAAI,CAAA;;AAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,CAAA;;AAE3CC,aAAS,CAAC,MAAM;AAChB,EAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAA;AACtB,EAAE,UAAU,EAAE,CAAA;AACd,EAAE,SAAS,EAAE,CAAA;AACb,CAAC,CAAC,CAAA;;AAEFC,sBAAiB,CAAC,UAAU,EAAE,CAAC,OAAO,KAAK;AAC3C,EAAE,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;AAC1B,EAAE,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAA;AACzC,CAAC,CAAC,CAAA;;AAEF,QAAY,CAAC,EAAE,cAAc,EAAE,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}