Closed Atw-Lee closed 1 month ago
4.2.3
OS: macOS 14.6.1, Chrome: 128.0.6613.85,Vue ^3.4.31
// Wrapper
<template> <component :is="Wrapper(renderDefaultSlot)"></component> </template> <script setup lang="ts"> import { computed, PropType, useSlots } from "vue"; import { useStyleRegister, useToken } from "./theme"; import type { CSSInterpolation, GlobalToken } from "./theme"; const props = defineProps({ getStyles: { type: Function as PropType< (token: GlobalToken,id:string) => Omit<CSSInterpolation, "CSSObject"> >, default: undefined, }, component: { type: String, require: true, }, }); const [theme, token, hashId] = useToken(); const registerParam = computed(() => { return { theme: theme.value, token: token.value, hashId: hashId.value, path: [props.component ?? "", "panui"], }; }); const slots = useSlots(); const Wrapper = useStyleRegister(registerParam, () => { return props.getStyles?.(token.value,hashId.value) ?? []; }); const renderDefaultSlot = computed(() => slots.default ? slots.default()[0] : null ); </script>
// children
<ThemeWrapper :getStyles="getStyles" component="pagination"> <div :class="wrapperClassName" v-bind="$attrs"> <Pagination v-bind="props" /> </div> </ThemeWrapper> </template> <script lang="ts" setup> import { computed, onMounted, ref } from "vue"; import { Pagination } from "ant-design-vue"; import Total from "./components/Total.vue"; import Jump from "./components/Jump.vue"; import PageSize from "./components/PageSize.vue"; import type { ContinueParams, EmitsTypes, PaginationProps } from "./type"; import type { SelectValue } from "../../antd"; import ThemeWrapper from "../../theme/ThemeWrapper.vue"; import type { GlobalToken } from "../../theme"; import { useComponentsClassInjectContext } from "../../config-provider/ComponentsClassContext"; import classNames from "classnames"; import { getPaginationStyle } from "./style"; defineOptions({ name: "PsPagination", inheritAttrs: false, }); const hashId = ref(""); const wrapperClassName = computed(() => { return classNames(["panui-base-pagination-container", hashId.value]); }); const getStyles = (token: GlobalToken,id:string) => { hashId.value=id return [getPaginationStyle("panui-base-pagination-container.", token)]; };
样式正常渲染
只有第一个分页器加上了hashId
const [, , hashId] = useToken();
Version
4.2.3
Environment
OS: macOS 14.6.1, Chrome: 128.0.6613.85,Vue ^3.4.31
Reproduction link
Steps to reproduce
// Wrapper
// children
What is expected?
样式正常渲染
What is actually happening?
只有第一个分页器加上了hashId