tdesign-mobile-vue
Version:
tdesign-mobile-vue
1 lines • 11.3 kB
Source Map (JSON)
{"version":3,"file":"segmented.mjs","sources":["../../src/segmented/segmented.tsx"],"sourcesContent":["import { computed, defineComponent, h, nextTick, onMounted, ref, toRefs, watch } from 'vue';\nimport { isFunction } from 'lodash-es';\nimport config from '../config';\nimport props from './props';\nimport useVModel from '../hooks/useVModel';\nimport { usePrefixClass } from '../hooks/useClass';\nimport { useResizeObserver } from '../hooks/useResizeObserver';\n\nconst { prefix } = config;\n\nexport default defineComponent({\n name: `${prefix}-segmented`,\n props,\n emits: ['update:value', 'update:modelValue', 'change'],\n setup(props) {\n const segmentedClass = usePrefixClass('segmented');\n\n const { value, modelValue } = toRefs(props);\n const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue);\n\n const thumbStyle = ref<Record<string, string>>({});\n const groupRef = ref<HTMLDivElement>();\n const itemRefs = ref<(HTMLDivElement | null)[]>([]);\n\n const segmentItems = computed(() => {\n if (!props.options?.length) return [];\n return props.options.map((option) => {\n if (typeof option === 'string' || typeof option === 'number') {\n return {\n value: option,\n label: String(option),\n };\n }\n return {\n ...option,\n label: option.label ?? String(option.value),\n };\n });\n });\n\n const activeIndex = computed(() => {\n if (innerValue.value == null) return -1;\n return segmentItems.value.findIndex((item) => item.value === innerValue.value);\n });\n\n const updateThumb = () => {\n if (activeIndex.value < 0) {\n thumbStyle.value = {};\n return;\n }\n\n nextTick(() => {\n const groupEl = groupRef.value;\n const itemEl = itemRefs.value[activeIndex.value];\n if (!groupEl || !itemEl) return;\n\n const groupRect = groupEl.getBoundingClientRect();\n const itemRect = itemEl.getBoundingClientRect();\n\n thumbStyle.value = {\n width: `${itemRect.width}px`,\n transform: `translateX(${itemRect.left - groupRect.left}px)`,\n };\n });\n };\n\n const handleSelect = (index: number) => {\n const item = segmentItems.value[index];\n if (props.disabled || !item || item.disabled) return;\n if (index === activeIndex.value) return;\n\n setInnerValue(item.value);\n props.onChange?.({ value: item.value, selectedOption: item });\n };\n\n watch(activeIndex, () => {\n updateThumb();\n });\n\n watch(\n () => props.options,\n () => {\n nextTick(() => {\n updateThumb();\n });\n },\n { deep: true },\n );\n\n // 监听尺寸变化，适配 v-show 和动态布局场景\n useResizeObserver(groupRef, () => updateThumb(), { onVisibilityChange: true });\n\n onMounted(() => {\n updateThumb();\n });\n\n return () => {\n const rootClasses = [\n segmentedClass.value,\n {\n [`${segmentedClass.value}--block`]: props.block,\n },\n ];\n\n return (\n <div class={rootClasses}>\n <div class={`${segmentedClass.value}__group`} ref={groupRef}>\n {/* 滑块背景 */}\n <div class={`${segmentedClass.value}__thumb`} style={thumbStyle.value} />\n\n {/* 选项列表 */}\n {segmentItems.value.map((item, index) => {\n const itemClasses = [\n `${segmentedClass.value}__item`,\n `${segmentedClass.value}-item-${index}`,\n {\n [`${segmentedClass.value}__item--active`]: index === activeIndex.value,\n [`${segmentedClass.value}__item--disabled`]: props.disabled || item.disabled,\n },\n ];\n\n // 渲染 icon\n const iconNode = item.icon && (\n <span class={`${segmentedClass.value}__item-icon`}>\n {isFunction(item.icon) ? item.icon(h) : item.icon}\n </span>\n );\n\n // 渲染 label\n const labelNode = item.label && (\n <span class={`${segmentedClass.value}__item-label`}>\n {isFunction(item.label) ? item.label(h) : item.label}\n </span>\n );\n\n return (\n <div\n key={item.value}\n ref={(el) => {\n itemRefs.value[index] = el as HTMLDivElement;\n }}\n class={itemClasses}\n onClick={() => handleSelect(index)}\n >\n <div class={`${segmentedClass.value}__item-inner`}>\n {iconNode}\n {labelNode}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n };\n },\n});\n"],"names":["prefix","config","defineComponent","name","props","emits","setup","segmentedClass","usePrefixClass","_toRefs","toRefs","value","modelValue","_useVModel","useVModel","defaultValue","_useVModel2","_slicedToArray","innerValue","setInnerValue","thumbStyle","ref","groupRef","itemRefs","segmentItems","computed","_props2$options","options","length","map","option","_option$label","label","String","_objectSpread","activeIndex","findIndex","item","updateThumb","nextTick","groupEl","itemEl","groupRect","getBoundingClientRect","itemRect","width","concat","transform","left","handleSelect","index","_props2$onChange","disabled","onChange","selectedOption","watch","deep","useResizeObserver","onVisibilityChange","onMounted","rootClasses","_defineProperty","block","_createVNode","itemClasses","iconNode","icon","isFunction","h","labelNode","el","onClick"],"mappings":"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"}