[Bug Report] ElSilder and ElAffix cannot import components on demand

[shiwuhao]

Element Plus version

1.2.0-beta.4

OS/Browsers version

any

Vue version

3.2.23

Reproduction Link

https://jsfiddle.net/

Steps to reproduce

import {ElSlider, ELAffix} from 'element-plus'
按需导入无法导入组件， Cannot resolve symbol 'ElSlider' ,'ElAffix'

What is Expected?

按需导入能正常导入组件

What is actually happening?

node_modules/element-plus/es/components/afix/,node_modules/element-plus/es/components/slider/
目录下没有index.d.ts

[element-bot]

Translation of this issue:

Element Plus version

1.2.0-beta.4

OS/Browsers version

any

Vue version

3.2.23

Reproduction Link

https://jsfiddle.net/

Steps to reproduce

import {ElSilder, ELAffix} from 'element-plus'

On demand import cannot import components, cannot resolve symbol 'elsider', 'elaffix'

What is Expected?

On demand import can import components normally

What is actually happening?

node_ modules/element-plus/es/components/afix/,node_ modules/element-plus/es/components/slider/
There is no index.d.ts in the directory

[autodocking]

typescript 提示 '"element-plus"' has no exported member named 'ElSlider'和 'ElAffix'，build 时会失败。

另外当 tsconfig.json 中 "skipLibCheck": false 时，报错比1.2.0-beta.3版又多了不少。

[shiwuhao]

当使用unplugin-vue-components按需加载时，使用动态渲染组件，ElSilder无法正常渲染

app.vue

<template>
  <div>
    <component :is="ElInput" v-model="slider"></component>
    <component :is="ElSlider" v-model="slider"></component>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {ElSlider, ElInput} from 'element-plus'
const slider = ref();
</script>

vite.config.ts

import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  resolve: {
    alias: {
      "~/": `${path.resolve(__dirname, "src")}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
        }),
      ],
    }),
  ],
});

[emojiiii]

@sxzz cc

[emojiiii]

there is a temporary solution, please add a global type file

export declare type SFCWithInstall<T> = T & import("vue").Plugin;

declare module 'element-plus' {
  export const ElAffix: SFCWithInstall<import("vue").DefineComponent<{
    readonly zIndex: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<import("csstype").ZIndexProperty>, 100, unknown, unknown, unknown>;
    readonly target: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
    readonly offset: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
    readonly position: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom", unknown>;
  }, {
    root: import("@vue/reactivity").ShallowRef<HTMLDivElement | undefined>;
    state: {
        fixed: boolean;
        height: number;
        width: number;
        scrollTop: number;
        clientHeight: number;
        transform: number;
    };
    rootStyle: import("vue").ComputedRef<CSSProperties>;
    affixStyle: import("vue").ComputedRef<CSSProperties | undefined>;
    update: () => void;
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    scroll: ({ scrollTop, fixed }: {
        scrollTop: number;
        fixed: boolean;
    }) => boolean;
    change: (fixed: boolean) => boolean;
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
    readonly zIndex?: unknown;
    readonly target?: unknown;
    readonly offset?: unknown;
    readonly position?: unknown;
  } & {
    zIndex: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<number>, unknown, unknown>;
    target: string;
    offset: number;
    position: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "top" | "bottom", unknown>;
  } & {}> & {
    onChange?: ((fixed: boolean) => any) | undefined;
    onScroll?: ((args_0: {
        scrollTop: number;
        fixed: boolean;
    }) => any) | undefined;
  }, {
    zIndex: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<number>, unknown, unknown>;
    target: string;
    offset: number;
    position: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "top" | "bottom", unknown>;
  }>>
}

[sxzz]

Waiting for vuejs/core#5026

[sxzz]

Duplicate of #4531