From cb2b424cb167f9857d377de4f9c9b24d16aecb25 Mon Sep 17 00:00:00 2001 From: bhuh12 Date: Thu, 23 Jul 2020 09:57:08 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20beforePageLeave=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=20beforeunload=20=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/README.md | 14 ++++- docs/guide/advanced/dynamic-tab-info.md | 2 +- docs/guide/advanced/initial-tabs.md | 2 +- docs/guide/advanced/page-leave.md | 68 ++++++++++++---------- docs/guide/advanced/restore.md | 2 +- docs/guide/advanced/slot.md | 2 +- docs/guide/advanced/transition.md | 5 +- docs/guide/essentials/i18n.md | 4 +- docs/guide/essentials/iframe.md | 4 +- docs/guide/essentials/operate.md | 6 +- docs/guide/installation.md | 20 ------- docs/zh/api/README.md | 14 ++++- docs/zh/guide/advanced/dynamic-tab-info.md | 2 +- docs/zh/guide/advanced/initial-tabs.md | 2 +- docs/zh/guide/advanced/page-leave.md | 63 +++++++++++--------- docs/zh/guide/advanced/restore.md | 2 +- docs/zh/guide/advanced/slot.md | 2 +- docs/zh/guide/advanced/transition.md | 5 +- docs/zh/guide/essentials/i18n.md | 4 +- docs/zh/guide/essentials/iframe.md | 4 +- docs/zh/guide/essentials/operate.md | 6 +- docs/zh/guide/installation.md | 20 ------- 22 files changed, 122 insertions(+), 131 deletions(-) diff --git a/docs/api/README.md b/docs/api/README.md index 9e86a61b..3a052c2e 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -361,10 +361,18 @@ RouterAlive 组件就绪 页面组件选项，与 `data`, `methods` 等选项并列配置 - 参数: - - `{Function} resolve` 执行后允许离开页签 - - `{Function} reject` 执行后阻止离开页签 + - `{Object} tab` 页签信息 - - `{String} type` 离开类型: `close`: '关闭', `refresh`: '刷新', `replace`: '替换' + - `{String} type` 离开类型: + - `close`: 页签关闭 + - `refresh`: 页签刷新 + - `replace`: 页签被替换 + - `leave`: 路由离开 + - `unload`: 浏览器刷新或者关闭 + +- 返回值类型： + - `{String}` 离开类型为 `unload` 时，浏览器离开提示消息 + - `{Promise}` 其他类型，`resolve` 离开，`reject` 阻止离开 ### vm.\$routerTab diff --git a/docs/guide/advanced/dynamic-tab-info.md b/docs/guide/advanced/dynamic-tab-info.md index 44f5deb7..ac6875a1 100644 --- a/docs/guide/advanced/dynamic-tab-info.md +++ b/docs/guide/advanced/dynamic-tab-info.md @@ -2,7 +2,7 @@ RouterTab will listen to the component `this.routeTab` to dynamically update the tab info. You can change the title, icon, and tips of the tab by setting `this.routeTab`. - + ### Computed (recommend) diff --git a/docs/guide/advanced/initial-tabs.md b/docs/guide/advanced/initial-tabs.md index 6750f9e8..9ecb0769 100644 --- a/docs/guide/advanced/initial-tabs.md +++ b/docs/guide/advanced/initial-tabs.md @@ -2,7 +2,7 @@ You can configure your RouterTab to open default tabs. You do this by using the `tabs` property. - + **Example:** diff --git a/docs/guide/advanced/page-leave.md b/docs/guide/advanced/page-leave.md index acb3d5f0..d97c6a56 100644 --- a/docs/guide/advanced/page-leave.md +++ b/docs/guide/advanced/page-leave.md @@ -1,54 +1,60 @@ # Leave Confirm -`BeforePageLeave` is triggered when the tab is **closed**, **refreshed**, or **replaced**, the Promise resolve and reject are used to allow or prevent the tab page from leaving. +When the tab **close**, **refresh**, **replace**, **leave** the current route, or the browser window **close**, **refresh**, `beforePageLeave` will be triggered, allow or prevent the tab page to leave by returning a `Promise`. ::: warning +`beforePageLeave` is at the outermost level of the component, not in `methods` +::: -- `beforePageLeave` is at the outermost level of the component, not in`methods` - -- If you also need to block before the browser page closes or refreshes, please use - [`onbeforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) - ::: - - + **Example:** -```javascript {3,15,21,23,28,29} +```javascript {13,15,18,23,33,44} export default { - // confirm before leaving - beforePageLeave(resolve, reject, tab, type) { - // types + /** + * confirm before leaving + * @param {Object} tab tab info + * @param {String} type leaving type + * close: tab close + * refresh: tab refresh + * replace: tab replace + * leave: leave the route + * unload: browser window close or refresh + * @returns {String|Promise} + */ + beforePageLeave(tab, type) { + //If the value has not changed, just leave the tab + if (this.editValue === this.value) return + + // When the browser window is refreshed or closed, supported browsers will display a confirmation message + if (type === 'unload') { + return `Your changes on the tab "${tab.title}" have not been completed, Do you want to leave?` + } + + // leaving type const action = { - close: 'shut down', + close: 'close', refresh: 'refresh', replace: 'replace', leave: 'leave' }[type] - const msg = `Are you sure you want to ${action} tab “${tab.title}”？` + const msg = `Are you sure to ${action} the tab “${tab.title}”?` - //If the value has not changed, just leave the tab - if (this.editValue === this.value) { - resolve() - return - } - - // Confirm the prompt when the value changes - if (confirm(msg)) { - resolve() - } else { - reject('Refuse to leave the page') - } + // Promise resolve to allow the page to leave + return new Promise((resolve, reject) => { + if (confirm(msg)) { + resolve() + } else { + reject(`Refuse to ${action} the page`) + } + }) - /* // The confirm component of Element is used here // You need to configure closeOnHashChange to false // to avoid the route switching causing the confirmation box to close - this.$confirm(msg, 'prompt', { closeOnHashChange: false }) - .then(resolve) - .catch(reject) - */ + // this.$confirm(msg, 'prompt', { closeOnHashChange: false }) } } ``` diff --git a/docs/guide/advanced/restore.md b/docs/guide/advanced/restore.md index 735ac162..076ee488 100644 --- a/docs/guide/advanced/restore.md +++ b/docs/guide/advanced/restore.md @@ -4,7 +4,7 @@ You can `restore` tabs after refreshing the page or logging in from another comp RouterTab uses sessionStorage to store the cache information of the tabs - + **Default mode** diff --git a/docs/guide/advanced/slot.md b/docs/guide/advanced/slot.md index f1121b7d..36b047d8 100644 --- a/docs/guide/advanced/slot.md +++ b/docs/guide/advanced/slot.md @@ -25,7 +25,7 @@ You can customize your tabs using the available slot `default`. Inside the slot | index | Number | tab index | | close | Function | tab closing method | - + **Example:** diff --git a/docs/guide/advanced/transition.md b/docs/guide/advanced/transition.md index b7a8a0bc..7a797146 100644 --- a/docs/guide/advanced/transition.md +++ b/docs/guide/advanced/transition.md @@ -7,9 +7,10 @@ You can change the default page and tab transitions by adding the `tab-transitio - If the scope of the CSS component (configured `scoped`), you need to add `>>>` / `/deep/` or `::v-deep` before the selectors - The .router-tab-item sets the `transition` and `transform-origin` styles by default, you may need to override it to avoid affecting the custom transition effect - ::: - +::: + + **Example:** diff --git a/docs/guide/essentials/i18n.md b/docs/guide/essentials/i18n.md index 6e6fc0ea..82684f92 100644 --- a/docs/guide/essentials/i18n.md +++ b/docs/guide/essentials/i18n.md @@ -6,7 +6,7 @@ Property `i18n` of RouterTab takes custom method for internationalization. - + **Example:** @@ -68,7 +68,7 @@ By specifying property `language` on RouterTab, you could set component's displa RouterTab has `zh-CN` and `en` as built-in languages, and `zh-CN` is the default option. - + **Specify language** diff --git a/docs/guide/essentials/iframe.md b/docs/guide/essentials/iframe.md index 2b9b118e..87e1b198 100644 --- a/docs/guide/essentials/iframe.md +++ b/docs/guide/essentials/iframe.md @@ -8,7 +8,7 @@ This feature requires RouterTabRoutes from RouterTab. See [Essentials - Route Co ## Iframe Tab Operation - + #### Open iframe Tab @@ -39,7 +39,7 @@ Supported iframe tab events are listed below: Note that url jumping within iframe will also trigger `iframe-loaded` event. - + **Example：** diff --git a/docs/guide/essentials/operate.md b/docs/guide/essentials/operate.md index 7318e527..fbec6750 100644 --- a/docs/guide/essentials/operate.md +++ b/docs/guide/essentials/operate.md @@ -28,7 +28,7 @@ this.$router.push('/page/1') This method will reload the existing cached tab by default, which might be usefule if you intend to **force-new-open** a tab. - + **Force-new-open** @@ -42,7 +42,7 @@ this.$routerTab.open('/page/2') You can close a tab with [`routerTab.close`](../../api/README.md#routertab-close) - + **Current tab** @@ -96,7 +96,7 @@ this.$routerTab.close({ You can refresh a tab with [`routerTab.refresh`](../../api/README.md#routertab-refresh) - + **Current tab** diff --git a/docs/guide/installation.md b/docs/guide/installation.md index 8432a71f..fefc142f 100644 --- a/docs/guide/installation.md +++ b/docs/guide/installation.md @@ -29,26 +29,6 @@ yarn yarn lib:build ``` - - ### Polyfill Vue Router Tab uses [**Vue CLI**](https://cli.vuejs.org) to build as library, so there's no polyfills. diff --git a/docs/zh/api/README.md b/docs/zh/api/README.md index 9e86a61b..3a052c2e 100644 --- a/docs/zh/api/README.md +++ b/docs/zh/api/README.md @@ -361,10 +361,18 @@ RouterAlive 组件就绪 页面组件选项，与 `data`, `methods` 等选项并列配置 - 参数: - - `{Function} resolve` 执行后允许离开页签 - - `{Function} reject` 执行后阻止离开页签 + - `{Object} tab` 页签信息 - - `{String} type` 离开类型: `close`: '关闭', `refresh`: '刷新', `replace`: '替换' + - `{String} type` 离开类型: + - `close`: 页签关闭 + - `refresh`: 页签刷新 + - `replace`: 页签被替换 + - `leave`: 路由离开 + - `unload`: 浏览器刷新或者关闭 + +- 返回值类型： + - `{String}` 离开类型为 `unload` 时，浏览器离开提示消息 + - `{Promise}` 其他类型，`resolve` 离开，`reject` 阻止离开 ### vm.\$routerTab diff --git a/docs/zh/guide/advanced/dynamic-tab-info.md b/docs/zh/guide/advanced/dynamic-tab-info.md index d37a0753..4eb063d9 100644 --- a/docs/zh/guide/advanced/dynamic-tab-info.md +++ b/docs/zh/guide/advanced/dynamic-tab-info.md @@ -2,7 +2,7 @@ RouterTab 会监听组件 `this.routeTab` 来动态更新页签信息。您可以通过设置 `this.routeTab` 来更改页签的标题、图标、提示。 - + ### 通过 computed 计算属性（推荐） diff --git a/docs/zh/guide/advanced/initial-tabs.md b/docs/zh/guide/advanced/initial-tabs.md index c62948b1..26ad33f1 100644 --- a/docs/zh/guide/advanced/initial-tabs.md +++ b/docs/zh/guide/advanced/initial-tabs.md @@ -2,7 +2,7 @@ 通过配置 RouterTab 组件的 `tabs` 属性，可以设置进入页面时默认显示的页签。 - + **示例：** diff --git a/docs/zh/guide/advanced/page-leave.md b/docs/zh/guide/advanced/page-leave.md index 6f01ad05..631de466 100644 --- a/docs/zh/guide/advanced/page-leave.md +++ b/docs/zh/guide/advanced/page-leave.md @@ -1,23 +1,37 @@ # 页面离开确认 -当页签**关闭**、**刷新**或**替换**时会触发 `beforePageLeave`，通过 `Promise` 的 `resolve` 和 `reject` 来允许或者阻止页签页面的离开。 +当页签**关闭**、**刷新**、**替换**，**离开**当前路由，或浏览器窗口**关闭**、**刷新**时，会触发 `beforePageLeave`，通过 `Promise` 来允许或者阻止页签页面的离开。 ::: warning +`beforePageLeave` 在组件的最外层，不是放在 `methods` 里 +::: -- `beforePageLeave` 在组件的最外层，不是放在 `methods` 里 - -- 如果还需要在浏览器页面关闭或刷新前阻止，请使用 - [`onbeforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) - ::: - - + **示例：** -```javascript {3,15,21,23,28} +```javascript {13,15,18,23,33,44} export default { - // 页面离开前确认 - beforePageLeave(resolve, reject, tab, type) { + /** + * 页面离开前确认 + * @param {Object} tab 页签信息 + * @param {String} type 离开类型： + * close: 页签关闭 + * refresh: 页签刷新 + * replace: 页签被替换 + * leave: 路由离开 + * unload: 浏览器刷新或者关闭 + * @returns {String|Promise} + */ + beforePageLeave(tab, type) { + // 值未改变，则直接离开页签 + if (this.editValue === this.value) return + + // 浏览器窗口刷新或者关闭时，支持的浏览器会展示确认消息 + if (type === 'unload') { + return `您在“${tab.title}”页签的更改尚未完成，是否要离开？` + } + // 离开类型 const action = { close: '关闭', @@ -28,26 +42,19 @@ export default { const msg = `您确认要${action}页签“${tab.title}”吗？` - // 值未改变，则直接离开页签 - if (this.editValue === this.value) { - resolve() - return - } - - // 值改变则确认提示 - if (confirm(msg)) { - resolve() - } else { - reject('拒绝了页面离开') - } + // 返回 promise，resolve 离开，reject 阻止离开 + return new Promise((resolve, reject) => { + // 值改变则确认提示 + if (confirm(msg)) { + resolve() + } else { + reject(`您拒绝了${action}页签`) + } + }) - /* // 此处使用了 Element 的 confirm 组件 // 需将 closeOnHashChange 配置为 false，以避免路由切换导致确认框关闭 - this.$confirm(msg, '提示', { closeOnHashChange: false }) - .then(resolve) - .catch(reject) - */ + // return this.$confirm(msg, '提示', { closeOnHashChange: false }) } } ``` diff --git a/docs/zh/guide/advanced/restore.md b/docs/zh/guide/advanced/restore.md index e23e6208..83c6b5a1 100644 --- a/docs/zh/guide/advanced/restore.md +++ b/docs/zh/guide/advanced/restore.md @@ -4,7 +4,7 @@ RouterTab 通过 sessionStorage 来存储页签缓存信息 - + **默认方式** diff --git a/docs/zh/guide/advanced/slot.md b/docs/zh/guide/advanced/slot.md index 12c7da61..234c1be2 100644 --- a/docs/zh/guide/advanced/slot.md +++ b/docs/zh/guide/advanced/slot.md @@ -27,7 +27,7 @@ RouterTab 支持通过以下插槽个性化页签组件： | index | Number | 页签索引 | | close | Function | 页签关闭方法 | - + **示例：** diff --git a/docs/zh/guide/advanced/transition.md b/docs/zh/guide/advanced/transition.md index 2ee3f90c..59746586 100644 --- a/docs/zh/guide/advanced/transition.md +++ b/docs/zh/guide/advanced/transition.md @@ -7,9 +7,10 @@ - 如果是组件作用域内的 CSS(配置了 `scoped`)，需要在选择器前添加 `>>>`、 `/deep/` 或 `::v-deep` 才能生效 - 页签项 `.router-tab-item` 默认设置了 `transition` 和 `transform-origin` 的样式，您可能需要覆盖它已避免影响到自定义的过渡效果 - ::: - +::: + + **示例：** diff --git a/docs/zh/guide/essentials/i18n.md b/docs/zh/guide/essentials/i18n.md index e276635d..e46bd282 100644 --- a/docs/zh/guide/essentials/i18n.md +++ b/docs/zh/guide/essentials/i18n.md @@ -6,7 +6,7 @@ RouterTab 组件提供了 `i18n` 属性，用以配置自定义的国际化转换方法，从而实现路由页签的多语言展示。 - + **示例：** @@ -68,7 +68,7 @@ const routes = [ RouterTab 默认语言是 `zh-CN`，另外内置了 `en`。 - + **指定组件显示为英文** diff --git a/docs/zh/guide/essentials/iframe.md b/docs/zh/guide/essentials/iframe.md index 0faa733c..4fe8d891 100644 --- a/docs/zh/guide/essentials/iframe.md +++ b/docs/zh/guide/essentials/iframe.md @@ -8,7 +8,7 @@ RouterTab 支持通过 iframe 页签嵌入外部网站。 ## iframe 页签操作 - + #### 打开 iframe 页签 @@ -39,7 +39,7 @@ RouterTab 支持以下的 iframe 页签事件： 需要注意的是，iframe 内部链接跳转也会触发 `iframe-loaded` 事件 - + **示例：** diff --git a/docs/zh/guide/essentials/operate.md b/docs/zh/guide/essentials/operate.md index cbe34d3b..9d194690 100644 --- a/docs/zh/guide/essentials/operate.md +++ b/docs/zh/guide/essentials/operate.md @@ -28,7 +28,7 @@ this.$router.push('/page/1') 此方法默认会刷新已有页签，如果希望**全新打开页签**，您可以尝试此方法。 - + **全新打开页签** @@ -42,7 +42,7 @@ this.$routerTab.open('/page/2') 您可以通过 RouterTab 的实例方法 [`routerTab.close`](../../api/README.md#routertab-close) 来关闭指定页签 - + **关闭当前页签** @@ -96,7 +96,7 @@ this.$routerTab.close({ 您可以通过 RouterTab 的实例方法 [`routerTab.refresh`](../../api/README.md#routertab-refresh) 来刷新指定页签 - + **刷新当前页签** diff --git a/docs/zh/guide/installation.md b/docs/zh/guide/installation.md index fa3dfc15..5d50d0b3 100644 --- a/docs/zh/guide/installation.md +++ b/docs/zh/guide/installation.md @@ -29,26 +29,6 @@ yarn yarn lib:build ``` - - ### Polyfill Vue Router Tab 使用 [**Vue CLI**](https://cli.vuejs.org) 来构建库，没有内置 Polyfills。