wip(VForm): VForm coding

src/App.vue

@@ -5,10 +5,12 @@ import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 // import en from 'element-plus/lib/locale/lang/en'
 import { VFrom, VFormExpose } from '@/components/Form'
 const formRef = ref<ComponentRef<typeof VFrom> & VFormExpose>()
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 onMounted(() => {
   const form = unref(formRef.value)
-  console.log(form?.$el)
+  console.log(form)
 })
 const schema = reactive<VFormSchema[]>([
   {
@@ -33,5 +35,6 @@ const schema = reactive<VFormSchema[]>([
     <!-- <VFrom :is-col="false" :schema="schema" /> -->
     <!-- <Component :is="VFrom" /> -->
     <!-- <RouterView class="app" /> -->
+    <div>{{ t('common.inputText') }}</div>
   </ElConfigProvider>
 </template>

src/components/Form/src/VForm.vue

@@ -66,16 +66,20 @@ export default defineComponent({
                   typeof defineComponent
                 >
                 return (
-                  <Com
+                  <Com v-model={test.value} {...(autoSetPlaceholder && setTextPlaceholder(item))}>
-                    v-model={test.value}
+                    {item.options ? renderOptions() : null}
-                    {...(autoSetPlaceholder && setTextPlaceholder(item))}
+                  </Com>
-                  ></Com>
                 )
               }}
             </ElFormItem>
           )
         })
-      // return <div>{schema[0]?.field}</div>
+    }
+
+    // 渲染options
+    function renderOptions() {
+      // const optionsMap = ['Radio', 'Checkbox', 'Select']
+      return <div>2222</div>
     }
 
     // 过滤传入Form组件的属性

src/components/Form/src/helper.ts

@@ -1,6 +1,5 @@
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
-console.log(t)
 
 interface PlaceholderMoel {
   placeholder?: string
@@ -15,11 +14,9 @@ interface PlaceholderMoel {
  * @description 用于自动设置placeholder
  */
 export function setTextPlaceholder(schema: VFormSchema): PlaceholderMoel {
-  console.log(schema)
   const textMap = ['Input', 'Autocomplete', 'InputNumber']
   const selectMap = ['Select', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect']
   if (textMap.includes(schema?.component as string)) {
-    console.log(t('common.inputText'))
     return {
       placeholder: t('common.inputText')
     }

src/hooks/web/useI18n.ts

@@ -29,7 +29,6 @@ export function useI18n(namespace?: string): {
       return getKey(namespace, key)
     }
   }
-  console.log(i18n)
 
   if (!i18n) {
     return normalFn
@@ -48,4 +47,4 @@ export function useI18n(namespace?: string): {
   }
 }
 
-// export const t = (key: string) => key
+export const t = (key: string) => key

src/main.ts

@@ -1,15 +1,12 @@
 // 引入windi css
 import '@/plugins/windicss'
+
 import { createApp } from 'vue'
 import App from './App.vue'
 const app = createApp(App)
-// 引入多语言
+
-import { setupI18n } from '@/plugins/i18n'
 // 引入状态管理
 import { setupStore } from '@/store'
-
-setupI18n(app)
-
 setupStore(app)
 
 app.mount('#app')

src/plugins/i18n/index.ts

@@ -1,20 +1,16 @@
 import { createI18n } from 'vue-i18n'
-import type { App } from 'vue'
-import type { I18nOptions } from 'vue-i18n'
 
-export let i18n: ReturnType<typeof createI18n>
+export const i18n = setupI18n()
 
-const messages = Object.fromEntries(
+function setupI18n() {
+  const messages = Object.fromEntries(
     Object.entries(import.meta.globEager('../../locales/*.ts')).map(([key, value]) => {
       return [key.slice(14, -3), value.default]
     })
-)
+  )
-
+  return createI18n({
-export function setupI18n(app: App): void {
-  i18n = createI18n({
     legacy: false,
     locale: 'zh-CN',
     messages
-  } as I18nOptions)
+  })
-  app.use(i18n)
 }

vite.config.ts

@@ -86,6 +86,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     },
     resolve: {
       alias: [
+        {
+          find: 'vue-i18n',
+          replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
+        },
         {
           find: /\@\//,
           replacement: `${pathResolve('src')}/`