feat(docs): add bulletin feature on site (#1010)
* feat(docs): add bulletin feature on site * fix: fix description
This commit is contained in:
申君健
GitHub
parent
c291a143da
commit
e2793efac8
|
|
@ -47,9 +47,14 @@ export default defineConfig({
|
|||
})
|
||||
```
|
||||
|
||||
<div class="tip custom-block">
|
||||
<br>
|
||||
<p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
|
||||
For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
|
||||
</div>
|
||||
### Import through CDN
|
||||
|
||||
In order to experience TinyVue components faster, you can also import TinyVue directly into the HTML page through CDN.
|
||||
In order to experience TinyVue components faster, you can also import TinyVue directly into the HTML page through CDN,you are advised to write two valid version numbers as follows.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -57,11 +62,11 @@ In order to experience TinyVue components faster, you can also import TinyVue di
|
|||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"vue": "https://unpkg.com/vue@3.2.45/dist/vue.esm-browser.js",
|
||||
"@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue.mjs",
|
||||
"@opentiny/vue-common": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue-common.mjs",
|
||||
"@opentiny/vue-icon": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue-icon.mjs",
|
||||
"@opentiny/vue-locale": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue-locale.mjs"
|
||||
"vue": "https://unpkg.com/vue@3.3/dist/vue.esm-browser.js",
|
||||
"@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue.mjs",
|
||||
"@opentiny/vue-common": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-common.mjs",
|
||||
"@opentiny/vue-icon": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-icon.mjs",
|
||||
"@opentiny/vue-locale": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-locale.mjs"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
| Vue2.x | @opentiny/vue@2.x |
|
||||
| Vue3.x | @opentiny/vue@3.x |
|
||||
|
||||
**Vue2工程说明**
|
||||
**Vue2 工程说明**
|
||||
|
||||
长期以来，TinyVue 都是只支持 Vue 2.6.14 版本。 从 TinyVue 2.11.0 开始，也支持 Vue 2.7+的工程了，请确保你安装了正确的Vue 2.x的依赖。
|
||||
长期以来，TinyVue 都是只支持 Vue 2.6.14 版本。 从 TinyVue 2.11.0 开始，也支持 Vue 2.7+的工程了，请确保你安装了正确的 Vue 2.x 的依赖。
|
||||
|
||||
### 全新项目配置
|
||||
|
||||
|
|
@ -47,9 +47,15 @@ export default defineConfig({
|
|||
})
|
||||
```
|
||||
|
||||
<div class="tip custom-block">
|
||||
<br>
|
||||
<p>为了避免<code> @opentiny/vue </code> 的月度版本(minor)升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
|
||||
比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
|
||||
</div>
|
||||
|
||||
### 通过 CDN 方式引入
|
||||
|
||||
为了更快地体验 TinyVue 的组件，你也可以通过 CDN 方式直接在 HTML 页面中引入 TinyVue。
|
||||
为了更快地体验 TinyVue 的组件，你也可以通过 CDN 方式直接在 HTML 页面中引入 TinyVue, 建议版本号写 2 个有效版本数字即可，具体配置如下:
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -57,11 +63,11 @@ export default defineConfig({
|
|||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"vue": "https://unpkg.com/vue@3.2.45/dist/vue.esm-browser.js",
|
||||
"@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue.mjs",
|
||||
"@opentiny/vue-common": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue-common.mjs",
|
||||
"@opentiny/vue-icon": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue-icon.mjs",
|
||||
"@opentiny/vue-locale": "https://unpkg.com/@opentiny/vue@3.9.1/runtime/tiny-vue-locale.mjs"
|
||||
"vue": "https://unpkg.com/vue@3.3/dist/vue.esm-browser.js",
|
||||
"@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue.mjs",
|
||||
"@opentiny/vue-common": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-common.mjs",
|
||||
"@opentiny/vue-icon": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-icon.mjs",
|
||||
"@opentiny/vue-locale": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-locale.mjs"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { ConfigProvider, Modal } from '@opentiny/vue'
|
|||
import { iconClose } from '@opentiny/vue-icon'
|
||||
import { appData } from './tools'
|
||||
import useTheme from './tools/useTheme'
|
||||
import { useBulletin } from './tools/useBulletin.jsx'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AppVue',
|
||||
|
|
@ -42,6 +43,7 @@ export default defineComponent({
|
|||
common.renderHeader()
|
||||
})
|
||||
const { designConfig } = useTheme()
|
||||
useBulletin()
|
||||
|
||||
provide('showPreview', (url) => {
|
||||
previewUrl.value = url
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import { $local } from './storage'
|
||||
import { onMounted } from 'vue'
|
||||
import { Modal } from '@opentiny/vue'
|
||||
|
||||
const bulletins = [
|
||||
{
|
||||
id: 'version-tip',
|
||||
content: `为了避免 @opentiny/vue 的月度版本(minor)升级带来的不确定因素，所以推荐在您的工程中的 package.json 中依赖包的版本号前使用 ~，
|
||||
比如 "@opentiny/vue": "~3.12.0。`,
|
||||
time: '2023-12-04'
|
||||
}
|
||||
]
|
||||
const bulletinKey = 'openttiny-last-bulletin'
|
||||
/**
|
||||
* 公告通知管理
|
||||
* 1、记录历史所有的公告，以备记录，每次只显示第一条公告即可！
|
||||
* 2、用户点击确认之后，不再弹出该公告
|
||||
*/
|
||||
export function useBulletin() {
|
||||
const lastBulletin = bulletins[0]
|
||||
if (lastBulletin.id !== $local[bulletinKey]) {
|
||||
onMounted(() => {
|
||||
Modal.confirm({
|
||||
title: '公告',
|
||||
message: (<div style="font-size:16px;line-height:1.5;">
|
||||
<div>尊敬的 TinyVue 用户：</div>
|
||||
<p style="text-indent: 2em;" v-html={lastBulletin.content}>
|
||||
</p>
|
||||
<div style="text-align:right;margin-top:20px">TinyVue 团队</div>
|
||||
<div style="text-align:right;">{ lastBulletin.time }</div>
|
||||
</div>),
|
||||
status: null,
|
||||
width:'760',
|
||||
confirmContent: '我知道了',
|
||||
cancelContent: '关闭'
|
||||
}).then((res) => {
|
||||
if (res === 'confirm') {
|
||||
$local[bulletinKey] = lastBulletin.id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue