蓝鲸版本日志组件
npm install @blueking/release-note用于呈现产品版本更新明细的组件,同时支持vue2和vue3的项目使用。
#### 安装
``bash`
npm i @blueking/release-note
#### 使用
#### 在 vue2/3 中引用的区别
- vue2 的引入方式
`javascript`
import ReleaseNote from '@blueking/release-note/vue2'; // 如果构建工具为webpack,版本要求为webpack5
import '@blueking/release-note/vue2/vue2.css';
- vue3 的引入方式
`javascript`
import ReleaseNote from '@blueking/release-note';
import '@blueking/release-note/vue3/vue3.css';
##### 1. 基础用法(vue3)
`javascript`
##### 2. 动态加载日志详情(vue3)
`javascript`
:list="syncReleaseList"
:detail="releaseNoteDetail"
:loading="syncReleaseNoteLoading"
@selected="handleSelectRelease" />
##### 3. 使用插槽(vue3)
vue2版本不支持使用插槽。有插槽需求,可以使用bkui-vue2组件库中的VersionLog组件。
`javascript``
左侧版本列表区域
右侧日志详情区域
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- | -------- |
| show | 是否显示版本日志 | Boolean | Boolean | false |
| list | 版本日志列表,默认格式为[{ title: "v1.0.0", date: "2021-01-01", detail: "### 新增 \n - 增加xxx功能" }, ...], 其中属性都支持自定义key名称 | Array | - | - |
| title-key | list属性传入数据中主标题对应key,默认值为title,在list数据中主标题的值需要保证唯一性 | String | - | title |
| sub-title-key | list属性传入数据中副标题对应key,默认值为date | String | - | date |
| detail-key | list属性传入数据中日志详情对应key,默认值为detail | String | - | detail |
| detail | 右侧版本详情区域展示的内容,需要为合法的markdown字符串 | String | - | - |
| active | 当前选中的版本,值可设置范围为list属性数据中的主标题 | String | - | - |
| current | 当前最新版本,值可设置范围为list属性数据中的主标题 | String | - | - |
| current-version-text | 用于标识当前版本的tag文案 | String | - | 当前版本 |
| loading | 右侧版本详情区域是否展示loading状态 | Boolean | Boolean | false |
| min-left-width | 左侧版本列表区域最小宽度 | Number | - | 180 |
| min-left-width | 左侧版本列表区域最大宽度 | Number | - | 580 |
| 方法名 | 说明 | 参数 |
| ---------- | -------------------------- | ------------------------- |
| showChange | 日志弹窗打开、关闭时触发 | 打开时为true,隐藏为false |
| selected | 左侧版本列表选中版本时触发 | 版本详情 |
| name | 说明 |
| ------ | ---------------- |
| list | 左侧版本列表区域 |
| detail | 右侧日志详情区域 |