@blueking/release-note

$3

用于呈现产品版本更新明细的组件，同时支持vue2和vue3的项目使用。

!Alt text

#### 安装

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


`

##### 3. 使用插槽(vue3)

vue2版本不支持使用插槽。有插槽需求，可以使用bkui-vue2组件库中的VersionLog组件。

`javascript


``

$3

| 名称 | 说明 | 类型 | 可选值 | 默认值 |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- | -------- |
| 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 |

$3

| 方法名 | 说明 | 参数 |
| ---------- | -------------------------- | ------------------------- |
| showChange | 日志弹窗打开、关闭时触发 | 打开时为true，隐藏为false |
| selected | 左侧版本列表选中版本时触发 | 版本详情 |

$3

| name | 说明 |
| ------ | ---------------- |
| list | 左侧版本列表区域 |
| detail | 右侧日志详情区域 |