vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
https://antdv.com/
Other
20.27k stars 3.79k forks source link

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

Closed Atw-Lee closed 1 month ago

Atw-Lee commented 1 month ago

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
Atw-Lee commented 1 month ago

// children

const [, , hashId] = useToken();