tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 5.71 kB
Source Map (JSON)
{"version":3,"file":"tab-nav-bar.mjs","sources":["../../../components/tabs/tab-nav-bar.tsx"],"sourcesContent":["import { defineComponent, PropType, computed, VNode, nextTick, ref, watch, onMounted } from 'vue';\nimport tabProps from './props';\n\n// hooks\nimport { usePrefixClass, useResizeObserver } from '@tdesign/shared-hooks';\n\nimport { debounce } from 'lodash-es';\n\nexport default defineComponent({\n props: {\n navs: {\n type: Array as PropType<VNode[]>,\n },\n placement: tabProps.placement,\n value: tabProps.value,\n },\n setup(props) {\n const COMPONENT_NAME = usePrefixClass('tabs');\n const classPrefix = usePrefixClass();\n const barRef = ref<HTMLElement>();\n const navBarClass = computed(() => {\n return [`${COMPONENT_NAME.value}__bar`, `${classPrefix.value}-is-${props.placement}`];\n });\n const navBarStyle = ref(null);\n const getStyle = () => {\n const isVertical = ['left', 'right'].includes(props.placement.toLowerCase());\n const [sizePropName, offsetPropName] = isVertical ? ['height', 'top'] : ['width', 'left'];\n let offset = 0;\n let i = 0;\n for (; i < props.navs.length; i++) {\n if (props.navs[i].props.value === props.value) {\n break;\n }\n if (props.navs[i]?.el) {\n const sizeWithUnit = getComputedStyle(props.navs[i].el as Element)[sizePropName as 'width' | 'left'];\n const size = parseFloat(sizeWithUnit);\n offset += size;\n }\n }\n if (!props.navs[i]) return {};\n return {\n [offsetPropName]: `${offset}px`,\n [sizePropName]: props.navs[i].el\n ? getComputedStyle(props.navs[i].el as Element)[sizePropName as 'width' | 'left']\n : '0px',\n };\n };\n const update = () => (navBarStyle.value = getStyle());\n\n onMounted(() => {\n nextTick(() => {\n update();\n });\n });\n\n watch([() => props.navs, () => props.value, () => props.placement], () => {\n nextTick(() => {\n update();\n });\n });\n\n useResizeObserver(\n barRef,\n debounce(() => {\n update();\n // 数值大了动画不流畅，小了会频繁触发，所以在合适区间里选择一个值\n }, 35),\n );\n return () => {\n return <div class={navBarClass.value} style={navBarStyle.value} ref={barRef}></div>;\n };\n },\n});\n"],"names":["defineComponent","props","navs","type","Array","placement","tabProps","value","setup","COMPONENT_NAME","usePrefixClass","classPrefix","barRef","ref","navBarClass","computed","concat","navBarStyle","getStyle","isVertical","includes","toLowerCase","_ref","_ref2","_slicedToArray","sizePropName","offsetPropName","offset","i","length","_props$navs$i","el","sizeWithUnit","getComputedStyle","size","parseFloat","_defineProperty","update","onMounted","nextTick","watch","useResizeObserver","debounce","_createVNode"],"mappings":"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"}