@binlun/manage-components v1.1.8

manage-components (后台业务组件集合)

概述

• 基于规范的后台业务组件

组件安装

npm --registry=http://101.68.79.42:4873/ install @lishi/manage-components --save

使用示例

1. 全局使用

// main.js
import '@lishi/manage-components/lib/style.css'

import { HelloWorld } form '@lishi/manage-components'
import Vue from 'vue'

Vue.use(HelloWorld);

<hello-world></hello-world>

2. 非全局使用

import { HelloWorld } form '@lishi/manage-components'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

...

<hello-world></hello-world>

3. script setup

<script setup>
import { HelloWorld } form '@lishi/manage-components'
</script>

...

<hello-world></hello-world>

SearchForm组件接口文档

属性

column属性

formItemProps属性

Cascader 、datepicker等 | | options | object, object | option | - | type为select或cascader时的数据源 | | innerProps | Object | option | - | 表单项内部组件props，参考antdv组件 |

方法

注：以下方法需在获取到实例后，onMounted及之后调用（DOM 元素将在初始渲染后分配给 ref）

• getFormValues(通过ref来获取实例后调用，手动获取整个表单值): (params: object) => void
• setFormValues(通过ref来获取实例后调用，手动填写整个表单值): (params: object) => void
• resetFormValues(通过ref来获取实例后调用，手动重置整个表单值): () => void

事件

• onReset(点击重置后的回调函数，返回表单内容): (params: object) => void
• onSubmit(点击查询后的回调函数，返回表单内容): (params: object) => void

SideBarMenu 组件接口文档

属性

其他未覆盖的属性和方法可直接传入并且参考ant-design-vue/menu的文档

插槽(slot)

beforeMenu 在菜单上方的操作

LocationSelect 组件接口文档

属性

事件

事件

MapSelect 组件接口文档

属性

事件

方法

通过ref获取到组件的实例, 调用方法

<template>
  <map-select ref="mapSelectRef"></map-select>
</template>
<script>
const mapSelectRef = ref(null)
// 需要在组件mounted以后才能使用
mapSelectRef.value.init()
mapSelectRef.value.reset()
</script>

NavTop 组件接口文档

属性

menus属性

commandList属性

事件

开发与调试

• 运行 npm install --registry=http://101.68.79.42:4873/ 安装依赖
• 运行 npm start

目录结构

├── index.js ----------------------  npm入口文件，新增组件时需要在这里添加
├── lib ---------------------------  打包代码
├── examples ----------------------  示例代码
    ├── assets --------------------  静态资源目录
    ├── main.ts -------------------  示例入口
    ├── App.vue -------------------  示例实现
├── public ------------------------  html上引用的公共资源
└── src ---------------------------  源码目录
    ├── components ----------------  组件目录
        ├── helloworld ------------  具体的组件
        ├── helloworld2 -----------  具体的组件
├── index.hml ---------------------  页面入口

打包

• 运行 npm run build 来打包
• bundle的入口在vite.build.config.ts的entry字段中配置
• 打包以后生成lib/bundle.es.js和lib/bundle.umd.js

发布

• 通过npm来发布
• npm login --registry=http://101.68.79.42:4873/ 登录npm系统
• npm publish --registry=http://101.68.79.42:4873/ 发布到npm上
• 在浏览器中输入 http://101.68.79.42:4873/ 查看发布的包
• 参考资料： https://hu379y.yuque.com/docs/share/ad90b7ff-e70d-4b46-bd5a-34db014884e0