🐞 fix: 低版本element环境信息说明

Author: slothvips

.github/ISSUE_TEMPLATE/ui_library_request.md

@@ -48,3 +48,4 @@ const result = await CommandModal(<UserForm />, {
 
 
 
+

.github/pull_request_template.md

@@ -44,3 +44,4 @@
 
 
 
+

CONTRIBUTING.md

@@ -114,3 +114,7 @@ chore: 构建工具或依赖更新
 
 
 
+
+
+
+

packages/core/dist/index.cjs.js

@@ -67,7 +67,7 @@ const Ar = (e = "") => e.slice(2).toLowerCase(), Sr = (e = "") => `on${e.charAt(
 }, $r = (e) => e == null, Ir = (e) => typeof e != "function" ? e : z(ee({ render: () => e() })), Mr = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), xe = Symbol("CommandComponentConsumerInjectKey"), fe = Symbol("CommandComponentStackInjectKey"), R = new Je(), le = /* @__PURE__ */ new Set(), X = (e) => T(T({}, e.parent ? X(e.parent) : {}), e.provides);
 function Qe(e, t, n) {
   var M;
-  e || N(z({
+  console.log(99999), e || N(z({
     setup() {
       return e = Z(), () => null;
     }

packages/core/dist/index.es.js

@@ -7,7 +7,7 @@ import {
   nextTick,
   provide,
   render,
-  Teleport
+  Teleport,
 } from "vue";
 import {
   EVENT_NAME,
@@ -46,15 +46,19 @@ export function commandProviderWithRender(
   uiComponent: VNode,
   config: ICoreConfig,
 ): IConsumer {
+  console.log(99999);
 
   // 某些情况下,我们可能需要在vue组件树之外的地方使用命令式组件,这个时候无法补货到组件实例,可以创建一个空的组件实例来代替,以免后续流程受到影响
   if (!parentInstance) {
-    render(h({
-      setup() {
-        parentInstance = getCurrentInstance();
-        return () => null
-      }
-    }), document.body);
+    render(
+      h({
+        setup() {
+          parentInstance = getCurrentInstance();
+          return () => null;
+        },
+      }),
+      document.body,
+    );
   }
 
   // 挂在点
@@ -160,6 +164,7 @@ export function commandProviderWithRender(
         ...getProvidesChain(commandInstance!),
         ...getProvidesChain(parentInstance!),
       };
+
       for (const key in upStreamProvides) {
         provide(key, upStreamProvides[key]);
       }

packages/core/src/core.tsx

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import DefaultTheme from "vitepress/theme";
 import { useData } from "vitepress";
+import { ElConfigProvider } from "element-plus";
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
 import { NConfigProvider, darkTheme, lightTheme } from "naive-ui";
 import { ConfigProvider } from "vant";
-
 const { isDark } = useData();
 </script>
 
 <template>
-  <NConfigProvider :theme="isDark ? darkTheme : lightTheme">
-    <ConfigProvider :theme="isDark ? 'dark' : 'light'">
-      <DefaultTheme.Layout />
-    </ConfigProvider>
-  </NConfigProvider>
+  <ElConfigProvider :locale="zhCn">
+    <NConfigProvider :theme="isDark ? darkTheme : lightTheme">
+      <ConfigProvider :theme="isDark ? 'dark' : 'light'">
+        <DefaultTheme.Layout />
+      </ConfigProvider>
+    </NConfigProvider>
+  </ElConfigProvider>
 </template>

packages/docs/.vitepress/theme/components/Layout.vue

@@ -16,7 +16,9 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

packages/docs/components.d.ts

@@ -28,3 +28,56 @@ import { useDestroyAllOnRouteChange } from "@vue-cmd/hooks";
 const stop = useDestroyAllOnRouteChange();
 // stop();
 ```
+## 低版本element-plus出现ElConfigProvider注入配置失效问题
+
+最新版本的element-plus不会出现这个问题,可以自行手动注入一遍
+
+可以抽离配置注入组件,然后在你原先注入的地方使用这个组件:
+```tsx
+import { ElConfigProvider } from "element-plus";
+import { computed, defineComponent, getCurrentInstance } from "vue";
+import zh from "element-plus/es/locale/lang/zh-cn";
+import en from "element-plus/lib/locale/lang/en";
+
+export default defineComponent({
+  setup(_, { slots }) {
+    return () => (
+      <ElConfigProvider locale={zh}>
+        {slots}
+      </ElConfigProvider>
+    );
+  }
+});
+```
+然后使用这个组件对命令组件进行包裹,所以我们需要稍微封装一下:
+```tsx
+import ElConfigProvider from "./ElConfigProvider";
+
+import {
+  useDrawer as useDrawerRaw,
+  useDialog as useDialogRaw
+} from "@vue-cmd/element-plus";
+
+export function useDrawer(config = {}) {
+  const drawer = useDrawerRaw(config);
+  return (VNode, config) => {
+    drawer(<ElConfigProvider>{VNode}</ElConfigProvider>, config);
+  };
+}
+
+export function useDialog(config) {
+  const drawer = useDialogRaw(config);
+  return (VNode, config) => {
+    drawer(<ElConfigProvider>{VNode}</ElConfigProvider>, config);
+  };
+}
+```
+使用方式没有任何改变,改变的只是导入的地方:
+
+```tsx
+import { useDrawer } from "@/components/VueCmd";
+
+const drawer = useDrawer();
+
+drawer(<div>hello</div>)
+```

packages/docs/guide/faq.md

@@ -1,6 +1,6 @@
 {
   "name": "@vue-cmd/element-plus",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "description": "Element Plus命令式组件适配器 - 让Element Plus的Dialog、Drawer等组件支持命令式调用",
   "homepage": "https://pandavips.github.io/Vue-Command-Component/",