@binlun/manage-components

v1.1.8

Published

a year ago

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

0High
0Medium
0Low

a364378948

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

概述

基于规范的后台业务组件

组件安装

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

使用示例

全局使用

// 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>

非全局使用


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

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

...

<hello-world></hello-world>

script setup


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

...

<hello-world></hello-world>

SearchForm组件接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | |-------------------------|---------|----------|-------|------------------------------| | columns | Array | required | [] | 表单项数组 | | span | Number | option | 8 | 栅格占位格数 | | defaultValue | Object | option | {} | 设置整个表单初始值，权重高于column中单独设置的 | | defaultCollapsed | Boolean | option | true | 默认是否收起 | | isCollapsed | Boolean | option | true | 是否开启收起功能 | | linesCntToStartCollapse | Number | option | 3 | 第几行开始收起 | | searchText | String | option | '查询' | 搜索按钮文案 | | resetText | String | option | '重置' | 重置按钮文案 | | hideResetBtn | Boolean | option | false | 隐藏重置按钮 | | extraBtn | VNode | option | - | 额外按钮（延期增加） | | extraBtnSpan | Number | option | - | 设置额外按钮，必须传入占位值，否则会影响布局（延期增加） |

column属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | |---------------|--------------|----------|-----|------------| | title | String/Vnode | required | - | 表单项的 label | | dataIndex | String | required | - | 表单的 name | | formItemProps | Object | option | - | 表单项的属性 | | order | Number | option | - | 字段排序 |

formItemProps属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | |--------------|--------|--------|-------|-----------------| | defaultValue | String | option | - | 表单项的初始值 | | type | String | option | input | 表单项类型，支持select、 |

方法

注：以下方法需在获取到实例后，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 组件接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | |-----------------|--------------------------|--------|--------------|------------------| | theme | light|dark | option | light | 主题颜色 | | routers | any[] | option | [] | 路由信息 | | collapsed | boolean | option | false | 当前收缩状态, 默认为false | | handleClickItem | (path: string) => void | option | (path) => {} | 点击菜单项时的回调方法 | 其他未覆盖的属性和方法可直接传入并且参考ant-design-vue/menu的文档

插槽(slot)

beforeMenu 在菜单上方的操作

LocationSelect 组件接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | |--------------------|------------|----------|--------------------------|:-----------------------------------------------| | value(v-model) | string | required | - | 纬度信息, 格式(经度,纬度)(longitude,latitude)例如 120,30 | | address(v-model) | string | option | - | 地址信息 | | aMapKey | string | option | - | 高德地图应用的 key | | aMapSecurity | string | option | - | 高德地图应用的 securityJsCode, 需要与key配套使用 | | aMapInstance | any | option | null | 高德地图实例传入此项后无需传入key和密钥 初始化时需要AMap.AutoComplete,AMap.PlaceSearch,AMap.Geocoder plugin | | modelOptions | Object | option | {width: 80%} | modal弹窗的属性 | | locationStorageKey | string | option | - | 保存上一次选择的经纬度数据的的键（存储在localStorage中）,若置空则为不使用此功能 | | showSearch | boolean | option | false | 是否隐藏左上角搜索框 | | mapHeight | string | option | 600px | 地图高度 | | defaultCenter | number[] | option | [116.397428, 39.90923] | 默认中心位置 |

事件

| 名称 | 说明 | 回调参数 | |--------|----------------|-----------------------------------------------| | change | 点击确定触发change事件 | ({location: string, address: string}) => void |

MapSelect 组件接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | |--------------------|------------|----------|--------------------------|:--------------------------------------------------------------------------------------| | value(v-model) | string | required | - | 经纬度信息, 格式(经度,纬度)(longitude,latitude)例如 120,30 | | address | string | option | - | 地址信息 | | aMapKey | string | option | - | 高德地图应用的 key | | aMapSecurity | string | option | - | 高德地图应用的 securityJsCode, 需要与key配套使用 | | aMapInstance | any | option | null | 高德地图实例传入此项后无需传入key和密钥 初始化时需要AMap.AutoComplete,AMap.PlaceSearch,AMap.Geocoder plugin | | locationStorageKey | string | option | - | 保存上一次选择的经纬度数据的的键（存储在localStorage中）, 若置空则为不使用此功能 | | showSearch | boolean | option | false | 是否隐藏左上角搜索框 | | mapHeight | string | option | 600px | 地图高度 | | mapWidth | string | option | 600px | 地图宽度 | | defaultCenter | number[] | option | [116.397428, 39.90923] | 默认中心位置 |

事件

| 名称 | 说明 | 回调参数 | |--------|-----------------|------------------------------------------------------------------| | change | 点击地图时触发change事件 | ({latitude: number,longitude: number , address: string}) => void |

方法

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

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

| 名称 | 说明 | |-------|-------------------------------------------------| | init | 初始化地图, 重新初始化地图的中心点以及缩放比例(在执行此逻辑前内部会执行一次reset方法) | | reset | 重置地图数据(包括搜索数据, 定位数据) |

NavTop 组件接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能备注 | | --------------- | ---------------- | -------- | ------------ | -------------- | | logoSrc | String | false | 默认公司logo | 后台logo | | subTitle | String | false | "" | 副标题 | | menu | IMenu[] | false | [] | | | active | String | Number | false | '' | 高亮的key | | commandList | array | true | [] | 用户操作如登出 | | userName | String | required | '' | 用户名称 | | avatar | String | false | 占位图片 | 用户头像 | | count | Number | false | | 待办消息数量 | | backgroundColor | String | false | #1890FF; | 背景色 | | backgroundImage | String | false | '' | 背景图片 |

menus属性

| 属性 | 类型 | 必填 | 功能 | |----------------|--------------------|----------|------------------------------| | key | String|number | required | 唯一key | | name | String | required | 菜单标题 | | path | String | false | 路径 | | onActiveChange | | | active值改变的时候, 会执行里面的action函数 |

commandList属性

| 属性 | 类型 | 必填 | 功能 | |--------|----------|----------|-------------| | key | string | required | 唯一key | | name | string | required | 显示的名称 | | action | Function | required | 点击对应名称触发的函数 |

事件

| 名称 | 说明 | 回调参数 | |--------------|---------|------| | onBadgeChick | 点击徽标的事件 | 无 |

开发与调试

运行 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