Skip to content

我想要拓展Theme(components Token) #7849

@Atw-Lee

Description

@Atw-Lee
  • 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

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions