lazy-components
v1.1.4
Published
一个基于Vue3和Vite的配置型快速开发组件库
Downloads
50
Readme
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
其它
# 说明
# 代码格式检查