Skip to content

Commit 9e499e2

Browse files
tangjinzhoutangjinzhou
committed
docs: site add progress status
1 parent fd07906 commit 9e499e2

File tree

6 files changed

+67
-3
lines changed

6 files changed

+67
-3
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@
120120
"mkdirp": "^0.5.1",
121121
"mockdate": "^2.0.2",
122122
"moment-timezone": "^0.5.17",
123+
"nprogress": "^0.2.0",
123124
"postcss": "^6.0.20",
124125
"postcss-loader": "^2.1.2",
125126
"pre-commit": "^1.2.2",

‎site/components/layout.vue

+28-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import enUS from 'antd/locale-provider/default'
66
import sortBy from 'lodash/sortBy'
77
import { isZhCN } from '../util'
88
import { Provider, create } from '../../components/_util/store'
9+
import NProgress from 'nprogress'
910
1011
const docsList = [
1112
{ key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
@@ -40,9 +41,16 @@ export default {
4041
if (this.unsubscribe) {
4142
this.unsubscribe()
4243
}
44+
clearTimeout(this.timer)
4345
},
4446
mounted () {
4547
this.addSubMenu()
48+
const nprogressHiddenStyle = document.getElementById('nprogress-style')
49+
if (nprogressHiddenStyle) {
50+
this.timer = setTimeout(() => {
51+
nprogressHiddenStyle.parentNode.removeChild(nprogressHiddenStyle)
52+
}, 0)
53+
}
4654
},
4755
watch: {
4856
'$route.path': function () {
@@ -113,6 +121,9 @@ export default {
113121
}
114122
document.title = titleStr
115123
},
124+
mountedCallback () {
125+
NProgress.done()
126+
},
116127
},
117128
118129
render () {
@@ -199,10 +210,25 @@ export default {
199210
{this.getSubMenu(isCN)}
200211
</div>
201212
{this.showDemo ? <Provider store={this.store} key={isCN ? 'cn' : 'en'}>
202-
<router-view class={`demo-cols-${config.cols || 2}`}></router-view>
213+
<router-view
214+
class={`demo-cols-${config.cols || 2}`}
215+
{...{ directives: [
216+
{
217+
name: 'mountedCallback',
218+
value: this.mountedCallback,
219+
},
220+
] }}
221+
></router-view>
203222
</Provider> : ''}
204223
{this.showApi ? <div class='markdown api-container' ref='doc'>
205-
<router-view></router-view>
224+
<router-view
225+
{...{ directives: [
226+
{
227+
name: 'mountedCallback',
228+
value: this.mountedCallback,
229+
},
230+
] }}
231+
></router-view>
206232
</div> : ''}
207233
</div>
208234
</a-col>

‎site/index.html

+5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
<meta http-equiv="Pragma" content="no-cache" />
1010
<meta http-equiv="Expires" content="0" />
1111
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
12+
<style id="nprogress-style">
13+
#nprogress {
14+
display: none
15+
}
16+
</style>
1217
</head>
1318

1419
<body>

‎site/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,17 @@ import './components'
1212
import demoBox from './components/demoBox'
1313
import demoContainer from './components/demoContainer'
1414

15+
const mountedCallback = {
16+
install: (Vue, options) => {
17+
Vue.directive('mountedCallback', {
18+
inserted: function (el, binding, vnode) {
19+
binding.value(vnode)
20+
},
21+
})
22+
},
23+
}
24+
25+
Vue.use(mountedCallback)
1526
Vue.use(VueClipboard)
1627
Vue.use(VueRouter)
1728
Vue.component(Md.name, Md)

‎site/routes.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import Layout from './components/layout.vue'
22
import Iframe from './components/iframe.vue'
33
import demoRoutes from './demoRoutes'
4+
import NProgress from 'nprogress'
45

6+
const beforeEnter = (to, from, next) => {
7+
NProgress.start()
8+
next()
9+
}
510
export default [
611
{ path: '/ant-design/components',
712
component: Layout,
813
props: (route) => {
914
const name = route.path.split('/ant-design/components/')[1].split('/')[0]
1015
return { name, showDemo: true }
1116
},
12-
children: demoRoutes,
17+
children: demoRoutes.map((item) => ({
18+
...item,
19+
beforeEnter,
20+
})),
1321
},
1422
{ path: '/ant-design/iframe',
1523
component: Iframe,
@@ -32,50 +40,62 @@ export default [
3240
{
3341
path: 'docs/vue/customize-theme',
3442
component: () => import('../docs/vue/customize-theme.en-US.md'),
43+
beforeEnter,
3544
},
3645
{
3746
path: 'docs/vue/customize-theme-cn',
3847
component: () => import('../docs/vue/customize-theme.zh-CN.md'),
48+
beforeEnter,
3949
},
4050
{
4151
path: 'docs/vue/getting-started',
4252
component: () => import('../docs/vue/getting-started.en-US.md'),
53+
beforeEnter,
4354
},
4455
{
4556
path: 'docs/vue/getting-started-cn',
4657
component: () => import('../docs/vue/getting-started.zh-CN.md'),
58+
beforeEnter,
4759
},
4860
{
4961
path: 'docs/vue/i18n',
5062
component: () => import('../docs/vue/i18n.en-US.md'),
63+
beforeEnter,
5164
},
5265
{
5366
path: 'docs/vue/i18n-cn',
5467
component: () => import('../docs/vue/i18n.zh-CN.md'),
68+
beforeEnter,
5569
},
5670
{
5771
path: 'docs/vue/introduce',
5872
component: () => import('../docs/vue/introduce.en-US.md'),
73+
beforeEnter,
5974
},
6075
{
6176
path: 'docs/vue/introduce-cn',
6277
component: () => import('../docs/vue/introduce.zh-CN.md'),
78+
beforeEnter,
6379
},
6480
{
6581
path: 'docs/vue/use-with-vue-cli',
6682
component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
83+
beforeEnter,
6784
},
6885
{
6986
path: 'docs/vue/use-with-vue-cli-cn',
7087
component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
88+
beforeEnter,
7189
},
7290
{
7391
path: 'docs/vue/changelog',
7492
component: () => import('../CHANGELOG.en-US.md'),
93+
beforeEnter,
7594
},
7695
{
7796
path: 'docs/vue/changelog-cn',
7897
component: () => import('../CHANGELOG.zh-CN.md'),
98+
beforeEnter,
7999
},
80100
{ path: '', redirect: '/ant-design/vue/docs/introduce/' },
81101
],

‎site/theme/static/index.less

+1
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@
2020
@import './responsive';
2121
@import './theme';
2222
@import './docsearch';
23+
@import './nprogress';

0 commit comments

Comments
 (0)