1 line
8.8 KiB
Plaintext
1 line
8.8 KiB
Plaintext
|
{"version":3,"file":"wd-popup.js","sources":["../../../../../../../node_modules/wot-design-uni/components/wd-popup/wd-popup.vue","../../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL25vZGVfbW9kdWxlcy93b3QtZGVzaWduLXVuaS9jb21wb25lbnRzL3dkLXBvcHVwL3dkLXBvcHVwLnZ1ZQ"],"sourcesContent":["<template>\n <wd-overlay\n v-if=\"modal\"\n :show=\"modelValue\"\n :z-index=\"zIndex\"\n :lock-scroll=\"lockScroll\"\n :duration=\"duration\"\n :custom-style=\"modalStyle\"\n @click=\"handleClickModal\"\n @touchmove=\"noop\"\n />\n <view v-if=\"!lazyRender || inited\" :class=\"rootClass\" :style=\"style\" @transitionend=\"onTransitionEnd\">\n <slot />\n <wd-icon v-if=\"closable\" custom-class=\"wd-popup__close\" name=\"add\" @click=\"close\" />\n </view>\n</template>\n\n<script lang=\"ts\">\nexport default {\n name: 'wd-popup',\n options: {\n virtualHost: true,\n addGlobalClass: true,\n styleIsolation: 'shared'\n }\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onBeforeMount, ref, watch } from 'vue'\nimport { isObj, requestAnimationFrame } from '../common/util'\nimport { popupProps } from './types'\n\nconst props = defineProps(popupProps)\nconst emit = defineEmits([\n 'update:modelValue',\n 'before-enter',\n 'enter',\n 'before-leave',\n 'leave',\n 'after-leave',\n 'after-enter',\n 'click-modal',\n 'close'\n])\n\nconst getClassNames = (name?: string) => {\n if (!name) {\n return {\n enter: 'enter-class enter-active-class',\n 'enter-to': 'enter-to-class enter-active-class',\n leave: 'leave-class leave-active-class',\n 'leave-to': 'leave-to-class leave-active-class'\n }\n }\n\n return {\n enter: `wd-${name}-enter wd-${name}-enter-active`,\n 'enter-to': `wd-${name}-enter-to wd-${name}-enter-active`,\n leave: `wd-${name}-leave wd-${name}-leave-active`,\n 'leave-to': `wd-${name}-leave-to wd-${name}-leave-active`\n }\n}\n\n// 初始化是否完成\nconst inited = ref<boolean>(false)\n// 是否显示\nconst display = ref<boolean>(false)\n// 当前动画状态\nconst status = ref<string>('')\n// 动画是否结束\nconst transitionEnded = ref<boolean>(false)\n// 动画持续时间\nconst currentDuration = ref<number>(300)\n// 类名\nconst classes = ref<string>('')\n\nconst safeBottom = ref<number>(0)\n\nconst name = ref<string>('') // 动画名\n\nconst style = computed(() => {\n return `z-index: ${props.zIndex}; padding-bottom: ${safeBottom.value}px; -webkit-transition-duration: ${\n currentDuration.value\n }ms; transition-duration: ${currentDuration.value}ms; ${display.value || !props.hideWhenClose ? '' : 'display: none;'} ${props.customStyle}`\n})\n\nconst rootClass = computed(() => {\n return `wd-popup wd-popup--${props.position} ${props.customClass || ''} ${classes.value || ''}`\n})\n\nonBeforeMount(() => {\n observerTransition()\n if (props.safeAreaInsetBottom) {\n const { safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()\n\n if (safeArea) {\n\n safeBottom.value = screenHeight - (safeArea!.bottom || 0)\n\n\n\n\n } else {\n safeBottom.value = 0\n }\n }\n if (props.modelValue) {\n enter()\n }\n})\n\nwatch(\n () => props.modelValue,\n (newVal) => {\n observermodelValue(newVal)\n },\n { deep: true, immediate: true }\n)\n\nwatch(\n [() => props.position, () => props.transition],\n () => {\n observerTransition()\n },\n { deep: true, immediate: true }\n)\n\nfunction observermodelValue(value: boolean) {\n value ? enter() : leave()\n}\n\nfunction enter() {\n const classNames = getClassNames(props.transition || props.position)\n const duration = props.transition === 'none' ? 0 : isObj(props.duration) ? (props.duration as any).enter : props.duration\n status.value = 'enter'\n emit('before-enter')\n\n requestAnimationFrame(() => {\n emit('enter')\n classes.value = classNames.enter\n currentDuration.value = duration\n requestAnimationFrame(() => {\n inited.value = true\n display.value = true\n requestAnimationFrame(() => {\n
|