Differences

This shows you the differences between two versions of the page.

--- snippets:vue [2025/08/08 07:45] – [tsx table] lingao
+++ snippets:vue [2025/11/05 12:18] (current) – [tsx slots type] lingao
@@ Line 1: / Line 1: @@
 ==== tsx component best practice ====
 bare bone
+<code tsx>
+import { computed, defineComponent, defineProps, type PropType } from 'vue'
+type ModelType = __MODEL_TYPE__;
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object as PropType<ModelType>,
+      default: () => ({} as ModelType),
+    },
+    'onUpdate:modelValue': {
+      type: Function as PropType<(val: ModelType) => void>,
+    },
+  },
+  setup(props) {
+    const modelValue = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(val: ModelType) {
+        props['onUpdate:modelValue']?.(val);
+      },
+    });
+    return () => <></>;
+  },
+});
+</code>
 <code tsx>
 import { defineComponent } from 'vue'
@@ Line 17: / Line 49: @@
 <code tsx>
 import { defineComponent } from 'vue'
-export interface Expose {}
 export default defineComponent({
@@ Line 150: / Line 181: @@
               </div>
             </div>
-            <ElTable class="flex-1" v-loading={loading.value} data={tableData.value}>
+            <ElTable class="flex-[1-1-0]" v-loading={loading.value} data={tableData.value}>
               <ElTableColumn width="60" type="selection" align="center" />
               <ElTableColumn label="序号" width="60" type="index" align="center">
@@ Line 249: / Line 280: @@
 })
 </code>
+++++
+==== tsx add ====
+++++ tsx add |
+<code tsx>
+import { defineComponent, ref } from 'vue'
+import BaseContainer from '@/components/BaseContainer/BaseContainer.vue'
+import Form from './_Form'
+import { AssessmentObjective } from './types'
+import { ElButton } from 'element-plus'
+export default defineComponent({
+  setup() {
+    const form = ref<AssessmentObjective>({})
+    function handleSubmit() {}
+    return () => (
+      <BaseContainer fill back>
+        {{
+          default: () => <Form v-model={form.value} />,
+          'header-options': () => (
+            <ElButton type="primary" onClick={handleSubmit} icon="ElIconDocument">
+              提交
+            </ElButton>
+          )
+        }}
+      </BaseContainer>
+    )
+  }
+})
+</code>
+++++
+==== tsx slots type ====
+++++ tsx slots type |
+<codeprism tsx>
+const Component = defineComponent({
+  props: {
+    config: {
+      type: Array as PropType<EntityInfo[]>
+    }
+  },
+  slots: Object as SlotsType<{
+    default: ({ foo: string; bar: number }) => JSX.Element
+  }>,
+  setup: (props, { slots }) => {
+    if (props.config == null) throw Error('Config can not be null')
+    const context = createReferenceInstance(props.config)
+    provide(refInjectionKey, context)
+    return () => <>{slots.default && slots.default()}</>
+  }
+})
+const s = new Component().$slots
+const a = (
+  <Component>
+    {
+      {
+        default: (scope) => {
+          scope
+        }
+      } as typeof s
+    }
+  </Component>
+)
+</codeprism>
 ++++