fix: add an example of markdown embedded in the form #138

CHANGELOG.zh_CN.md

@@ -4,6 +4,7 @@
 
 - 新增 `v-ripple`水波纹指令
 - 新增左侧菜单混合模式
+- 新增 markdown 嵌入表单内示例
 
 ### 🐛 Bug Fixes
 

src/components/Container/src/ScrollContainer.vue

@@ -4,6 +4,7 @@
     :wrapClass="`scrollbar__wrap`"
     :viewClass="`scrollbar__view`"
     class="scroll-container"
+    v-bind="$attrs"
   >
     <slot />
   </Scrollbar>

src/components/Markdown/src/index.vue

@@ -2,14 +2,25 @@
   <div class="markdown" ref="wrapRef" />
 </template>
 <script lang="ts">
-  import { defineComponent, ref, onMounted, unref, onUnmounted, nextTick, watchEffect } from 'vue';
+  import {
+    defineComponent,
+    ref,
+    onMounted,
+    unref,
+    onUnmounted,
+    nextTick,
+    // watch,
+    computed,
+  } from 'vue';
   import Vditor from 'vditor';
   import 'vditor/dist/index.css';
 
   import { propTypes } from '/@/utils/propTypes';
+  import { useLocale } from '/@/hooks/web/useLocale';
 
+  type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
   export default defineComponent({
-    emits: ['update:value'],
+    emits: ['change'],
     props: {
       height: propTypes.number.def(360),
       value: propTypes.string.def(''),
@@ -19,17 +30,42 @@
       const vditorRef = ref<Nullable<Vditor>>(null);
       const initedRef = ref(false);
 
+      const lang = ref<Lang>();
+
+      const { getLang } = useLocale();
+
+      const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
+        switch (unref(getLang)) {
+          case 'en':
+            lang.value = 'en_US';
+            break;
+          case 'ja':
+            lang.value = 'ja_JP';
+            break;
+          case 'ko':
+            lang.value = 'ko_KR';
+            break;
+          default:
+            lang.value = 'zh_CN';
+        }
+        return lang.value;
+      });
       function init() {
         const wrapEl = unref(wrapRef);
         if (!wrapEl) return;
         const bindValue = { ...attrs, ...props };
         vditorRef.value = new Vditor(wrapEl, {
+          lang: unref(getCurrentLang),
           mode: 'sv',
           preview: {
             actions: [],
           },
           input: (v) => {
-            emit('update:value', v);
+            // emit('update:value', v);
+            emit('change', v);
+          },
+          blur: () => {
+            unref(vditorRef)?.setValue(props.value);
           },
           ...bindValue,
           cache: {
@@ -39,14 +75,20 @@
         initedRef.value = true;
       }
 
-      watchEffect(() => {
-        nextTick(() => {
-          const vditor = unref(vditorRef);
-          if (unref(initedRef) && props.value && vditor) {
-            vditor.setValue(props.value);
-          }
-        });
-      });
+      // watch(
+      //   () => props.value,
+      //   () => {
+      //     nextTick(() => {
+      //       const vditor = unref(vditorRef);
+      //       if (unref(initedRef) && props.value && vditor) {
+      //         vditor.setValue(props.value);
+      //       }
+      //     });
+      //   },
+      //   {
+      //     immediate: true,
+      //   }
+      // );
 
       onMounted(() => {
         nextTick(() => {

src/components/Scrollbar/index.ts

@@ -5,7 +5,7 @@
 import { withInstall } from '../util';
 
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const Scrollbar = createAsyncComponent(() => import('./src/Scrollbar'));
+export const Scrollbar = createAsyncComponent(() => import('./src/index.vue'));
 
 withInstall(Scrollbar);