0.2.5 • Published 1 year ago
topnet-components v0.2.5
topnet-components
基于 vue2 + ElementUI 封装的常用的业务组件
简介
topnet-components 项目是基于 Vue2 + ElementUI 技术栈打造的组件库,它搜集的是拓普项目中经常使用的业务组件。业务组件不同于 基础组件,基础组件可能考虑的更全面、使用范围更广、功能比较单一;而业务组件恰恰相反,业务组件是在基础组件的基础上进行的二 次开发,更加贴合实际开发的需要。
使用
只支持在 vue 项目中使用。可以选择全局安装使用,也可以选择按需引入。
安装:
npm i topnet-components -S
全局引入:
import topnetComponent from 'topnet-components';
Vue.use(topnetComponent);
按需引入:
import { TnTabs } from 'topnet-components'
export default {
components: {
TnTabs,
},
}
项目的启动
- 安装项目的依赖:npm install
- 开发环境热启动:npm run serve | npm run dev | npm run start
历史版本
- 0.1.0 添加 TnTabs 组件
- 0.1.1 更新 TnTabs 组件
- 0.2.1 添加 TnConditionFilter 组件,md 文档增加组件使用说明
- 0.2.2 删除开发代码,只引入打包文件
- 0.2.3 修改 md 文档、包 package.json 文件
- 0.2.4 修改 md 文档,增加 TnModuleList 组件
- 0.2.5 修改 md 文档,增加 TnTextEllipsis 组件
相关业务组件
- TnTabs
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
tabs | Array | 页签数据源 | - | - |
v-model/value | String | 绑定值,选中选项卡的 key | - | 第一个选项卡的 key |
type | String | 页签样式,默认选项卡样式, 还有经典样式 | classic | - |
disabled | Boolean | 是否禁用页签 | true | false |
tabBgc | String | 页签背景色 | - | #f2f2f2 |
textColor | String | 默认页签的字体颜色 | - | #666666 |
activeTextColor | String | 选中页签的字体颜色 | - | #333333 |
Eventtab-change | Function | 页签切换事件,参数是当前页签数据 | - | - |
- TnConditionFilter
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
source | Object, Array | 过滤条件的数据源 | - | - |
v-model/value | String | 绑定值,选中过滤条件的 key | - | 所有项的全部 |
disabled | Boolean | 是否禁止选中过滤条件 | true | false |
title | String | 过滤条件的标题 | - | 所选条件: |
isMulti | Boolean | 每项的过滤条件能否多选 | false | true |
showTags | Boolean | 是否展示已选中的条件标签 | false | true |
Eventchange | Function | 监听过滤条件的选择 | - | - |
- TnModuleList 的属性及方法
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
source | Object, Array | 模块列表的数据源 | - | - |
v-model/value | String | 绑定值,选中模块列表的 key | - | - |
title | String | 模块列表的标题 | - | 模块管理 |
column | Number | 模块列表的列数 | 1,2,4... | 3 |
height | Number, String | 模块的高度 | - | 64px |
gutter | Number | 模块之间的间距 | - | 10 |
Eventchange | Function | 监听模块的选择 | - | - |
- TnTextEllipsis 的属性及方法
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
content | String | 要展示的文本内容 | - | - |
fill | String | 文本省略填充符号 | - | ... |
rows | Number | 文本展示行数,与 words 同时设置时此设置失效 | - | 1 |
words | Number | 文本展示字符数,与 rows 同时设置时此设置生效 | - | - |
position | String | 文本省略符号的位置 | start | end |
showTooltip | Boolean | 文本提示框位置 | false | bottom |
placement | String | 监听模块的选择 | 同 ElementUI 组件 Tooltip 的值 | - |
effect | String | 文本提示框主题 | dark | light |