lazy-components v1.1.4

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended Setup

• VS Code + Vue - Official (previously Volar) and disable Vetur

• Use vue-tsc for performing the same type checking from the command line, or for generating d.ts files for SFCs.

配置环境

# 安装依赖
yarn add lazy-components

# 配置环境
import {LazyCompotens,config} from 'lazy-components'
import 'lazy-components/dist/style.css'
config.setConfig({
    uploadFunc:(formData)=>{
        return {url:'服务器返回的url地址'}
    },
})
import 'lazy-components/dist/style.css'
app.use(LazyCompotens)

使用

<template>
    <z_content v-model="pageData" :options="pageOptions" />
</template>
<script>
export default {
    name: 'list',
    components: {},
    data(){
            pageData: {
                queryParams: {
                    pageIndex: 1,
                    pageSize: 15,
                    total: 0,
                }},
            pageOptions: {
                'prop': 'pageData',
                'type': 'page',
                'label': '测试页面',
                'data': [],
                'options': {},
                children: [
                    {
                        'prop': 'queryParams',
                        'type': 'form',
                        'label': '',
                        'data': [],
                        'press': this.press,
                        'options': { inline: true },
                        children: [
                            { 'prop': 'id0', 'type': 'select', 'label': '测试类型', 'data': [], 'options': {} },
                            { 'prop': 'id0', 'type': 'input', 'label': '测试输入框', 'data': [], 'options': {} },
                            { 'prop': 'reset', 'type': 'button', 'label': '重置', 'data': [], 'options': { 'noFormItem': 'true' } },
                            { 'prop': 'search', 'type': 'button', 'label': '搜索', 'data': [], 'options': { 'noFormItem': 'true', 'type': 'primary' } },
                            { 'prop': 'add', 'type': 'button', 'label': '新增', 'data': [], 'options': { 'noFormItem': 'true', 'type': 'primary' } }
                        ]
                    },
                    {
                        'prop': 'table_list',
                        'type': 'table',
                        'label': '',
                        'data': [],
                        'options': { loading: false, key: 'table_list[0]', autoFlex: true },
                        children: [
                            { 'prop': 'appId', 'type': 'span', 'label': 'AppId', 'value': '', 'data': [], 'options': {} },
                            { 'prop': 'edgeService', 'type': 'span', 'label': '服务', 'value': '', 'data': [], 'options': {} },
                            {
                                'prop': 'opType', 'label': '操作', 'type': 'operate', 'data': [], 'options': {
                                    key: 'op[0]', 'tableOperationList': []
                                }
                            }]
                    },
                    {
                        prop: 'pageIndex', type: 'pagination', value: [1, 15, 30], data: [], options: {
                            formatting: ['pageIndex', 'pageSize', 'total'],
                            path: 'queryParams.pageIndex'
                        }, press: this.getDataList,
                    },
                ]
            },
    }
    methods:{

    }
}
</script>

配置环境

构建生产环境

npm run build:prod

其它

# 说明


# 代码格式检查