🎨 支持.vue/.tsx混写

src/router/async.ts

@@ -15,7 +15,7 @@ const PutBook = {
   meta: {
     title: "投放书籍",
   },
-  component: () => import("@/views/put/put-book.vue"),
+  component: () => import("@/views/put/put-book"),
 };
 
 const PutAdAccount = {

src/shims-vue.d.ts

@@ -1,7 +1,7 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import { defineComponent } from "vue";
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
 }
 
 declare module "ant-design-vue/lib/locale-provider/zh_CN";
@@ -19,4 +19,4 @@ interface ClipboardMethod {
     string: string,
     container?: HTMLElement
   ): Promise<ClipboardJS.Event>;
-}
+}

src/views/put/put-book.vue

@@ -1,19 +1,4 @@
-<template>
-  <div class="page-wrap page-wrap-put-books">
-    <tool-bar :text="['official_name', 'book_name']"
-              :label="['公众号名称', '书名']"
-              v-model:loading="inSearching"
-              @confirm="onSearch" />
-    <a-table row-key="id"
-             :pagination="tablePageOptions"
-             :loading="loading"
-             :columns="columns"
-             :data-source="list"></a-table>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from "vue";
+import { defineComponent, reactive, ref } from "vue";
 
 import ToolBar from "@/components/tool-bar/index.vue";
 
@@ -29,8 +14,9 @@ const PutBooks = defineComponent({
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
 
-    const bookData = reactive({
+    const state = reactive({
       inSearching: false,
+      open: false,
       list: ref<IDeliveryBook[]>([]),
       columns: TableColumnOfPutBooks,
     });
@@ -43,18 +29,44 @@ const PutBooks = defineComponent({
           book_name,
           page: 1,
         });
-        bookData.list = data.list;
+        state.list = data.list;
         meta = data.meta;
       } catch (e) {
         console.log(e);
       } finally {
-        bookData.inSearching = false;
+        state.inSearching = false;
       }
     };
 
-    return { ...toRefs(bookData), onSearch, loading, tablePageOptions };
+    // 弹窗
+    const onOpenModal = () => {
+      return (
+        <a-modal v-model={[state.open, "visible"]}>
+          <p>123</p>
+        </a-modal>
+      );
+    };
+
+    return () => {
+      return (
+        <div class="page-wrap page-wrap-put-books">
+          <tool-bar
+            text={["official_name", "book_name"]}
+            label={["公众号名称", "书名"]}
+            v-model={[state.inSearching, "loading"]}
+            onConfirm={onSearch}
+          />
+          <a-table
+            row-key="id"
+            pagination={tablePageOptions}
+            loading={loading.value}
+            columns={state.columns}
+            data-source={state.list}
+          ></a-table>
+        </div>
+      );
+    };
   },
 });
 
 export default PutBooks;
-</script>