-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Closed
Labels
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
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
<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)];
};
What is expected?
样式正常渲染
What is actually happening?
只有第一个分页器加上了hashId
