vue3用Ant Design Vue开发集成form表单组件

最新推荐文章于 2024-07-18 13:56:07 发布

励志成为男人的大佬

最新推荐文章于 2024-07-18 13:56:07 发布

阅读量256

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Yspclan/article/details/137774338

版权

先看展示于用法

展示:

使用方法

let formList = [
    {
        name: '头像上传',
        value: 'head',
        type: 'Cropper',
        height: '250px',
        UploadType: ['image/jpeg', 'image/png', 'image/gif'],
        ifmust: true
    },
    {
        name: '我的昵称',
        value: 'name',
        type: 'input',
        maxlength: 10,
        placeholder: '请输入昵称(10字以内)',
        ifmust: true
    },
    {
        name: '当前身份',
        value: 'identity',
        type: 'input',
        maxlength: 8,
        placeholder: '请输入性别(8字以内)',
        ifmust: true
    },
    {
        name: '签名',
        value: 'signature',
        type: 'textarea',
        placeholder: '请输入签名',
        ifmust: true
    },
    {
        name: '迷你名片背景',
        value: 'miniback',
        type: 'upload',
        UploadType: ['image/jpeg', 'image/png'],
        ifmust: true,
        formtips: '上传图片格式必须为jpg/png，比例8:5宽高比，1MB以内'
    },
    {
        name: '个人空间背景',
        value: 'databack',
        type: 'upload',
        UploadType: ['image/jpeg', 'image/png'],
        ifmust: true,
        formtips: '上传图片格式必须为jpg/png，比例6:4宽高比，1MB以内'
    },
    {
        name: '当前项目展示',
        value: 'ProjectDisplay',
        type: 'slot',
        ifmust: true
    }
]

组件使用部分

<!-- form组件 -->
            <FormModule
                v-if="open_edit"
                :slotData="slotData"
                :formList="formList"
                :formDefaultData="formDefaultData"
                @onSubmit="onSubmit"
                @onClose="onClose"
                :ifproject="false"
                :typeshow="'ifformview'"
            >
                <template #ProjectDisplay="{ formValue }">
                    ssss{{ formValue }}
                    <div class="tb_vlcong">
                        <div class="top flex_z mb20">
                            <span class="flex_c">展示中: </span>
                            <draggable
                                :list="state.group1"
                                class="flex_1 flex_z"
                                group="group1"
                                ghost-class="ghost"
                                chosen-class="chosenClass"
                                animation="300"
                                itemKey="id"
                                @start="onStart"
                                @end="onEnd(formValue)"
                            >
                                <template #item="{ element }">
                                    <div class="xz ml20 close mb10">
                                        {{ element.name }}
                                    </div>
                                </template>
                            </draggable>
                        </div>
                        <div class="bottom flex_z">
                            <span class="flex_c flex_s_0 mr20">未展示: </span>
                            <div class="overauto flex_1 flex_z">
                                <draggable
                                    :list="state.group2"
                                    class="flex_1 flex_z"
                                    group="group1"
                                    ghost-class="ghost"
                                    chosen-class="chosenClass"
                                    animation="300"
                                    itemKey="id"
                                    @end="onEnd(formValue)"
                                >
                                    <template #item="{ element }">
                                        <div
                                            class="xz flex_s_0 mr20 mb10"
                                            @click="XZswitch(element)"
                                        >
                                            {{ element.name }}
                                        </div>
                                    </template>
                                </draggable>
                            </div>
                        </div>
                    </div>
                </template>
            </FormModule>