snippets:vue

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
snippets:vue [2025/08/08 06:57] – [tsx table] lingaosnippets:vue [2025/11/05 12:18] (current) – [tsx slots type] lingao
Line 1: Line 1:
 ==== tsx component best practice ==== ==== tsx component best practice ====
 bare bone 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> <code tsx>
 import { defineComponent } from 'vue' import { defineComponent } from 'vue'
Line 17: Line 49:
 <code tsx> <code tsx>
 import { defineComponent } from 'vue' import { defineComponent } from 'vue'
-export interface Expose {} 
  
 export default defineComponent({ export default defineComponent({
Line 150: Line 181:
               </div>               </div>
             </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 width="60" type="selection" align="center" />
               <ElTableColumn label="序号" width="60" type="index" align="center">               <ElTableColumn label="序号" width="60" type="index" align="center">
Line 169: Line 200:
               <ElTableColumn label="操作" align="center" width="100">               <ElTableColumn label="操作" align="center" width="100">
                 {(scope) => (                 {(scope) => (
-                  <div class="flex align-center justify-center">+                  <div class="flex align-center justify-center flex-wrap">
                     <ElButton                     <ElButton
                       link                       link
                       type="primary"                       type="primary"
-                      icon="ElIconEdit" 
                       onClick={() => handleEdit(scope.row)}                       onClick={() => handleEdit(scope.row)}
                     >                     >
Line 181: Line 211:
                       link                       link
                       type="danger"                       type="danger"
-                      icon="ElIconDelete" 
                       onClick={() => handleDelete(scope.row)}                       onClick={() => handleDelete(scope.row)}
                     >                     >
Line 205: Line 234:
   }   }
 }) })
 +</code>
 +++++
 +
 +==== tsx _form ====
 +
 +++++ tsx _form |
 +<code tsx>
 +import { computed, defineComponent, PropType } from 'vue'
 +import BaseCard from '@/components/BaseCard/Index'
 +import type { AssessmentObjective } from './types'
 +import { ElForm, ElFormItem } from 'element-plus'
 +
 +const rules = {}
 +
 +export default defineComponent({
 +  props: {
 +    modelValue: {
 +      type: Object as PropType<AssessmentObjective>,
 +      default: () => ({})
 +    }
 +  },
 +  emits: ['update:modelValue'],
 +  setup(props, { emit }) {
 +    const modelValue = computed({
 +      get() {
 +        return props.modelValue
 +      },
 +      set(val) {
 +        emit('update:modelValue', val)
 +      }
 +    })
 +
 +    return () => (
 +      <ElForm model={modelValue.value} rules={rules} class="flex flex-col gap-3">
 +        <BaseCard title="基础信息">
 +          <div class="grid grid-cols-2 gap-4">
 +            <ElFormItem label="企业名称" prop="companyName">
 +              <span>name</span>
 +            </ElFormItem>
 +          </div>
 +        </BaseCard>
 +      </ElForm>
 +    )
 +  }
 +})
 +</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>
 ++++ ++++
  • snippets/vue.1754636256.txt.gz
  • Last modified: 2025/08/08 06:57
  • by lingao