Skip to content

Slot 自定义插槽

type : 'slot'

自定义插槽,适用于自定义表单想的内容。

代码演示

基础用法

<template>
    <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions">
        <template #slot1>
           <div style="margin: 10px;">
             <font>werwer</font>
           </div>
        </template>
        <template #slot2>
            <div style="margin: 10px;">
                <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </div>
        </template>
    </x-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    slot: '',
});
const formOptions = ref([
    {
        label: 'slot',
        type: 'slot',
        name: 'slot1',

    },
    {
        label: 'slot',
        type: 'slot',
        name: 'slot2',
    },
]);

</script>
<style lang="scss" scoped></style>
基础用法

API

Props

Events