@blueking/release-note

release-note 版本日志组件

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

安装

npm i @blueking/release-note

使用

在 vue2/3 中引用的区别

• vue2 的引入方式

import ReleaseNote from '@blueking/release-note/vue2'; // 如果构建工具为webpack，版本要求为webpack5
import '@blueking/release-note/vue2/vue2.css';

• vue3 的引入方式

import ReleaseNote from '@blueking/release-note';
import '@blueking/release-note/vue3/vue3.css';

1. 基础用法(vue3)

	<template>
		<ReleaseNote v-model:show="showReleaseNote" :list="releaseList" />
		<Button theme="primary" @click="showReleaseNote = true">查看版本日志</Button>
	</template>
	<script lang="ts" setup>
		import { Button } from 'bkui-vue';
		import { ref } from 'vue';
		import ReleaseNote from '@blueking/release-note';
		import '@blueking/release-note/vue3/vue3.css';

		const showReleaseNote = ref(false);
		const releaseList = (() => {
			const versions = [];
			for(let i = 0; i < 10; i++) {
				versions.push({
					title: `v1.0.${10 - i}`,
					date: `2024-${12 - i}-01`,
					detail: `## v1.0.${10 - i} 版本更新日志 \n ### 新增\n\n- [新增] 内置\` ES6+\` 语言转义能力增强\n- [新增] 任务通知中心\n- [新增] 控制台新增命令 cleanAppCache\n### 优化\n- [优化] 上传时版本号推荐\n- [优化] 云开发云调用快速启动模板\n- [优化] 插件增加工具回退时的保护机制\n- [优化] 素材管理，不再维护的提示\n- [优化] 体验评分支持“iPhone X兼容”检验规则\n### 修复\n- [修复] sitemap，控制台显示当前页面是否索引\n- [优化] project.config.json 中新增设置 uploadWithSourceMap\n- [优化] createUDPSocket bindUDPSocket 改为同步接口\n`
				});
			}
			return versions;
		})();
	</script>

2. 动态加载日志详情(vue3)

	<template>
		<Button style="margin-left: 8px" theme="primary" @click="showSyncReleaseNote = true">查看版本日志（动态加载日志详情）</Button>
		<ReleaseNote
			v-model:show="showSyncReleaseNote"
			:list="syncReleaseList"
			:detail="releaseNoteDetail"
			:loading="syncReleaseNoteLoading"
			@selected="handleSelectRelease" />
	</template>
	<script lang="ts" setup>
		import { Button } from 'bkui-vue';
		import { ref } from 'vue';
		import ReleaseNote from '@blueking/release-note';
		import '@blueking/release-note/vue3/vue3.css';

		const showSyncReleaseNote = ref(false);
		const syncReleaseNoteLoading = ref(false);
		const syncReleaseList = (() => {
			const versions = [];
			for(let i = 0; i < 10; i++) {
				versions.push({
					title: `v1.0.${i}`,
					date: `2024-${i + 1}-01`
				});
			}
			return versions;
		})();
		const releaseNoteDetail = ref('');

		const handleSelectRelease = (version) => {
			syncReleaseNoteLoading.value = true;
			setTimeout(() => {
				releaseNoteDetail.value = `## ${version.title} 版本更新日志 \n ### 新增\n\n- [新增] 内置\` ES6+\` 语言转义能力增强\n- [新增] 任务通知中心\n- [新增] 控制台新增命令 cleanAppCache\n### 优化\n- [优化] 上传时版本号推荐\n- [优化] 云开发云调用快速启动模板\n- [优化] 插件增加工具回退时的保护机制\n- [优化] 素材管理，不再维护的提示\n- [优化] 体验评分支持“iPhone X兼容”检验规则\n### 修复\n- [修复] sitemap，控制台显示当前页面是否索引\n- [优化] project.config.json 中新增设置 uploadWithSourceMap\n- [优化] createUDPSocket bindUDPSocket 改为同步接口\n`
				syncReleaseNoteLoading.value = false;
			}, 1000);
		}
	</script>

3. 使用插槽(vue3)

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

	<template>
		<Button style="margin-left: 8px" theme="primary" @click="showSlotReleaseNote = true">查看版本日志（使用插槽）</Button>
		<ReleaseNote v-model:show="showSlotReleaseNote">
			<template #list>
				<div>左侧版本列表区域</div>
			</template>
			<template #detail>
				<div>右侧日志详情区域</div>
			</template>
		</ReleaseNote>
	</template>
	<script lang="ts" setup>
		import { Button } from 'bkui-vue';
		import { ref } from 'vue';
		import ReleaseNote from '@blueking/release-note';
		import '@blueking/release-note/vue3/vue3.css';

		const showSlotReleaseNote = ref(false);

	</script>

Props

事件

插槽