组件总览

DevNet-form 是基于 element-plus & Vue3 面向配置的前端组件库

• 增强了部分组件功能

下拉框支持 弹框树、表格选择
Layout Layot布局
表格列头过滤支持多种类型 基础表格，单元格编辑
......

• 支持 el 原生组件通过配置化使用，参考el原生组件

• 支持自定义组件通过配置化使用，参考自定义组件

• 更多Admin示例，参考Admin-UI

Overview

<template>
    <dn-page>
        <dn-form ref="formRef" v-bind="formOpt">
            <dn-row>               
                <dn-form-item :item="formOpt.columns.fn1" :modelValue="formRef?.form?.fn1">
                </dn-form-item>                  
            </dn-row>       
            <div class="cardComponentContent" >
                <a class="compcardlink" :href="item.url" v-for="item in OptionsItem">
                    <dn-card  v-bind="item" class="hoveritem" :icon="null" :shadow="'hover'">                    
                        <span v-html="item?.icon"></span>  
                    </dn-card> 
                </a>
            </div>  
        </dn-form>
    </dn-page>   
</template>
<script lang="ts">
 import {ref,defineComponent, Ref} from "vue";
 import * as _ from "lodash-es"
 import { useForm,dn } from "@sdevnet/devnet-form";
 import svg from "./svg";

 export default defineComponent({
   setup(props,ctx) {  
     const formRef : Ref<any>=ref(null);
     const formOpt : Ref<any>=ref({});

    const data = ref([
        {name:'icon',url:'./icondemo/',header:'icon 图标',icon:svg.icon},
        {name:'button',url:'./button/',header:'按钮',icon:svg.button},
        {name:'msg',url:'./msg/',header:'消息提示',icon:svg.msg},
        {name:'dialog',url:'./dialog/',header:'弹框',icon:svg.dialog},
       
        {name:'form',url:'./form/',header:'form 表单',icon:svg.form},
        {name:'textbox',url:'./textbox/',header:'文本框',icon:svg.textbox},
        {name:'checkbox',url:'./checkbox/',header:'复选框',icon:svg.checkbox},
        {name:'switch',url:'./switch/',header:'switch开关',icon:svg.switch},
        {name:'select',url:'./select/',header:'下拉选择',icon:svg.select},
        {name:'date',url:'./date/',header:'日期',icon:svg.date},
        {name:'file',url:'./upfile/',header:'文件上传',icon:svg.file},
        {name:'elindex',url:'./el/',header:'el 原生组件',icon:svg.elindex},
        {name:'custom',url:'./comptype/custom',header:'自定义组件',icon:svg.custom},

        {name:'tree',url:'./tree/',header:'tree 树',icon:svg.tree},
        {name:'table',url:'./table/',header:'基础表格',icon:svg.table},
        {name:'treetable',url:'./table/tree/',header:'树表格',icon:svg.table},
        {name:'multiletable',url:'./table/multile/',header:'多级表头',icon:svg.table},
        {name:'handlecoltable',url:'./table/handlecol/',header:'按钮列',icon:svg.table},
        //{name:'childformtable',url:'./table/childform/',header:'弹框编辑',icon:svg.table},
        {name:'editcelltable',url:'./table/celledit/',header:'单元格编辑',icon:svg.table},

        {name:'tabs',url:'./group/tabs/',header:'选项卡',icon:svg.tabs},
        {name:'card',url:'./group/card/',header:'卡片',icon:svg.card},
        {name:'layout',url:'./group/layout/',header:'Layout布局',icon:svg.layout},
        {name:'collapse',url:'./group/collapse/',header:'折叠面板',icon:svg.collapse},
    ]);
    const OptionsItem:Ref<any[]>= ref([]); 
    
    OptionsItem.value = data.value;

    const searchComponent=(query)=>{        
        OptionsItem.value = [];
        _.forEach(data.value,(item:any)=>{
            if(!query || item.header.includes(query) 
                || item.name.includes(query)){            
                    OptionsItem.value.push(item);
            }
        })
        
        return  OptionsItem.value;
    }

    const autoSearch = dn.debounce(searchComponent,300);

    function createFormOpt(){
         const { buildFormOptions } = useForm();
        return buildFormOptions({    
                columns:{
                    fn1: {
                        title: "以下是 DevNet-form 提供的组件示例",
                        type: "text",
                        form: {                        
                            col:{span:24},
                            component:{
                                placeholder:'查找组件',
                                onInput:(event)=>{
                                    autoSearch(event);
                                },
                                'prefix-icon':'search'
                            }
                        }
                    }              
                },
                form:{                    
                    autoRender:false,
                    labelPosition:'top'
                }   
            });
    }

    formOpt.value=createFormOpt();
    return {
         formOpt,
         formRef,
         OptionsItem
    }
   }
 });
</script>
<style lang="less">
.hoveritem{
    cursor: pointer;
}

.cardComponentContent{
    width:auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin:0 auto;
    margin-top:20px;

    .el-card{
        padding:0px 0px;
        height:130px;
    }
    .el-card__header{
        font-weight: bold;
    }
    svg{
        transform: scale(0.5, 0.53);
        position: relative;
        left: -82px;
        top: -60px;
    }
}
.compcardlink{
    text-decoration:none !important;
}

@media (min-width: 960px){
    .cardComponentContent{
        width:580px;
    }
}

</style>