tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 11.4 kB
Source Map (JSON)
{"version":3,"file":"useRipple.mjs","sources":["../../../components/hooks/useRipple.ts"],"sourcesContent":["import { ref, onMounted, onUnmounted, Ref } from 'vue';\nimport useKeepAnimation from './useKeepAnimation';\nimport { usePrefixClass } from './useConfig';\nimport setStyle from '@tdesign/common-js/utils/setStyle';\n\nconst period = 200;\nconst noneRippleBg = 'rgba(0, 0, 0, 0)';\nconst defaultRippleColor = 'rgba(0, 0, 0, 0.35)';\n\n// 设置动画颜色 get the ripple animation color\nconst getRippleColor = (el: HTMLElement, fixedRippleColor?: string) => {\n // get fixed color from params\n if (fixedRippleColor) {\n return fixedRippleColor;\n }\n // get dynamic color from the dataset\n if (el?.dataset?.ripple) {\n const rippleColor = el.dataset.ripple;\n return rippleColor;\n }\n // use css variable\n const cssVariable = getComputedStyle(el).getPropertyValue('--ripple-color');\n if (cssVariable) {\n return cssVariable;\n }\n return defaultRippleColor;\n};\n\n/**\n * 斜八角动画hooks 支持三种方式使用\n * 1. fixedRippleColor 固定色值 useRipple(ref,fixedRippleColor);\n * 2. dynamicColor 动态色值 data.ripple=\"rippleColor\" useRipple(ref)\n * 3. CSS variables（recommended） 配合节点对应CSS设置 --ripple-color useRipple(ref)\n * @param ref 需要使用斜八角动画的DOM\n * @param fixedRippleColor 斜八角的动画颜色\n */\nexport default function useRipple(el: Ref<HTMLElement>, fixedRippleColor?: Ref<string>) {\n const rippleContainer = ref(null);\n const classPrefix = usePrefixClass();\n\n // 全局配置ripple\n const { keepRipple } = useKeepAnimation();\n\n // 为节点添加斜八角动画 add ripple to the DOM and set up the animation\n const handleAddRipple = (e: MouseEvent) => {\n const dom = el.value;\n const rippleColor = getRippleColor(dom, fixedRippleColor?.value);\n if (e.button !== 0 || !el || !keepRipple) return;\n\n if (\n dom.classList.contains(`${classPrefix.value}-is-active`) ||\n dom.classList.contains(`${classPrefix.value}-is-disabled`) ||\n dom.classList.contains(`${classPrefix.value}-is-checked`) ||\n dom.classList.contains(`${classPrefix.value}-is-loading`)\n )\n return;\n\n const elStyle = getComputedStyle(dom);\n\n const elBorder = parseInt(elStyle.borderWidth, 10);\n const border = elBorder > 0 ? elBorder : 0;\n const width = dom.offsetWidth;\n const height = dom.offsetHeight;\n\n if (rippleContainer.value.parentNode === null) {\n setStyle(rippleContainer.value, {\n position: 'absolute',\n left: `${0 - border}px`,\n top: `${0 - border}px`,\n width: `${width}px`,\n height: `${height}px`,\n borderRadius: elStyle.borderRadius,\n pointerEvents: 'none',\n overflow: 'hidden',\n });\n dom.appendChild(rippleContainer.value);\n }\n // 新增一个ripple\n const ripple = document.createElement('div');\n\n setStyle(ripple, {\n marginTop: '0',\n marginLeft: '0',\n right: `${width}px`,\n width: `${width + 20}px`,\n height: '100%',\n transition: `transform ${period}ms cubic-bezier(.38, 0, .24, 1), background ${period * 2}ms linear`,\n transform: 'skewX(-8deg)',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n backgroundColor: rippleColor,\n opacity: '0.9',\n });\n\n // fix zIndex：避免遮盖内部元素\n const elMap = new WeakMap();\n for (let n = dom.children.length, i = 0; i < n; ++i) {\n const child = dom.children[i];\n if ((child as HTMLElement).style.zIndex === '' && child !== rippleContainer.value) {\n (child as HTMLElement).style.zIndex = '1';\n elMap.set(child, true);\n }\n }\n\n // fix position\n const initPosition = dom.style.position ? dom.style.position : getComputedStyle(dom).position;\n if (initPosition === '' || initPosition === 'static') {\n // eslint-disable-next-line no-param-reassign\n dom.style.position = 'relative';\n }\n rippleContainer.value.insertBefore(ripple, rippleContainer.value.firstChild);\n\n setTimeout(() => {\n ripple.style.transform = `translateX(${width}px)`;\n }, 0);\n // 清除动画节点 clear ripple container\n const handleClearRipple = () => {\n ripple.style.backgroundColor = noneRippleBg;\n\n if (!el.value) return;\n\n el.value.removeEventListener('pointerup', handleClearRipple, false);\n el.value.removeEventListener('pointerleave', handleClearRipple, false);\n\n setTimeout(() => {\n ripple.remove();\n if (rippleContainer.value.children.length === 0) rippleContainer.value.remove();\n }, period * 2 + 100);\n };\n el.value.addEventListener('pointerup', handleClearRipple, false);\n el.value.addEventListener('pointerleave', handleClearRipple, false);\n };\n\n onMounted(() => {\n const dom = el?.value;\n if (!dom) return;\n\n rippleContainer.value = document.createElement('div');\n\n dom.addEventListener('pointerdown', handleAddRipple, false);\n });\n\n onUnmounted(() => {\n el?.value?.removeEventListener('pointerdown', handleAddRipple, false);\n });\n}\n"],"names":["period","noneRippleBg","defaultRippleColor","getRippleColor","el","fixedRippleColor","_el$dataset","dataset","ripple","rippleColor","cssVariable","getComputedStyle","getPropertyValue","useRipple","rippleContainer","ref","classPrefix","usePrefixClass","_useKeepAnimation","useKeepAnimation","keepRipple","handleAddRipple","e","dom","value","button","classList","contains","concat","elStyle","elBorder","parseInt","borderWidth","border","width","offsetWidth","height","offsetHeight","parentNode","setStyle","position","left","top","borderRadius","pointerEvents","overflow","appendChild","document","createElement","marginTop","marginLeft","right","transition","transform","zIndex","backgroundColor","opacity","elMap","WeakMap","n","children","length","i","child","style","set","initPosition","insertBefore","firstChild","setTimeout","handleClearRipple","removeEventListener","remove","addEventListener","onMounted","onUnmounted","_el$value"],"mappings":"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"}