chore: mitt demo

apps/web-antd/src/views/system/dict/data/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -6,6 +8,7 @@ import { Card } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter';
 
+import { emitter } from '../mitt';
 import { querySchema } from './data';
 import dictDataDrawer from './dict-data-drawer.vue';
 
@@ -36,6 +39,12 @@ const [QueryForm] = useVbenForm({
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-2',
 });
+
+const testValue = ref('');
+
+emitter.on('rowClick', (dictType) => {
+  testValue.value = dictType;
+});
 </script>
 
 <template>
@@ -48,6 +57,7 @@ const [QueryForm] = useVbenForm({
         {{ $t('pages.common.add') }}
       </a-button>
     </Card>
+    {{ testValue }}
     <DictDataDrawer />
   </div>
 </template>

apps/web-antd/src/views/system/dict/mitt.ts

@@ -0,0 +1,10 @@
+import { mitt } from '@vben/utils';
+
+/**
+ * dictType: string
+ */
+type Events = {
+  rowClick: string;
+};
+
+export const emitter = mitt<Events>();

apps/web-antd/src/views/system/dict/type/index.vue

@@ -3,9 +3,11 @@ import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { Card } from 'ant-design-vue';
+import { uniqueId } from 'lodash-es';
 
 import { useVbenForm } from '#/adapter';
 
+import { emitter } from '../mitt';
 import { querySchema } from './data';
 import dictTypeModel from './dict-type-model.vue';
 
@@ -38,6 +40,10 @@ const [QueryForm] = useVbenForm({
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-2',
 });
+
+function handleRowClickTest() {
+  emitter.emit('rowClick', uniqueId('mitt-'));
+}
 </script>
 
 <template>
@@ -50,6 +56,10 @@ const [QueryForm] = useVbenForm({
         {{ $t('pages.common.add') }}
       </a-button>
     </Card>
+    <Card>
+      <a-button @click="handleRowClickTest">测试mitt</a-button>
+      左侧向右侧传值
+    </Card>
     <DictTypeModal />
   </div>
 </template>