docs: site add progress status
parent
fd0790695f
commit
9e499e2cc6
|
@ -120,6 +120,7 @@
|
|||
"mkdirp": "^0.5.1",
|
||||
"mockdate": "^2.0.2",
|
||||
"moment-timezone": "^0.5.17",
|
||||
"nprogress": "^0.2.0",
|
||||
"postcss": "^6.0.20",
|
||||
"postcss-loader": "^2.1.2",
|
||||
"pre-commit": "^1.2.2",
|
||||
|
|
|
@ -6,6 +6,7 @@ import enUS from 'antd/locale-provider/default'
|
|||
import sortBy from 'lodash/sortBy'
|
||||
import { isZhCN } from '../util'
|
||||
import { Provider, create } from '../../components/_util/store'
|
||||
import NProgress from 'nprogress'
|
||||
|
||||
const docsList = [
|
||||
{ key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
|
||||
|
@ -40,9 +41,16 @@ export default {
|
|||
if (this.unsubscribe) {
|
||||
this.unsubscribe()
|
||||
}
|
||||
clearTimeout(this.timer)
|
||||
},
|
||||
mounted () {
|
||||
this.addSubMenu()
|
||||
const nprogressHiddenStyle = document.getElementById('nprogress-style')
|
||||
if (nprogressHiddenStyle) {
|
||||
this.timer = setTimeout(() => {
|
||||
nprogressHiddenStyle.parentNode.removeChild(nprogressHiddenStyle)
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.path': function () {
|
||||
|
@ -113,6 +121,9 @@ export default {
|
|||
}
|
||||
document.title = titleStr
|
||||
},
|
||||
mountedCallback () {
|
||||
NProgress.done()
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
|
@ -199,10 +210,25 @@ export default {
|
|||
{this.getSubMenu(isCN)}
|
||||
</div>
|
||||
{this.showDemo ? <Provider store={this.store} key={isCN ? 'cn' : 'en'}>
|
||||
<router-view class={`demo-cols-${config.cols || 2}`}></router-view>
|
||||
<router-view
|
||||
class={`demo-cols-${config.cols || 2}`}
|
||||
{...{ directives: [
|
||||
{
|
||||
name: 'mountedCallback',
|
||||
value: this.mountedCallback,
|
||||
},
|
||||
] }}
|
||||
></router-view>
|
||||
</Provider> : ''}
|
||||
{this.showApi ? <div class='markdown api-container' ref='doc'>
|
||||
<router-view></router-view>
|
||||
<router-view
|
||||
{...{ directives: [
|
||||
{
|
||||
name: 'mountedCallback',
|
||||
value: this.mountedCallback,
|
||||
},
|
||||
] }}
|
||||
></router-view>
|
||||
</div> : ''}
|
||||
</div>
|
||||
</a-col>
|
||||
|
|
|
@ -9,6 +9,11 @@
|
|||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
|
||||
<style id="nprogress-style">
|
||||
#nprogress {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -12,6 +12,17 @@ import './components'
|
|||
import demoBox from './components/demoBox'
|
||||
import demoContainer from './components/demoContainer'
|
||||
|
||||
const mountedCallback = {
|
||||
install: (Vue, options) => {
|
||||
Vue.directive('mountedCallback', {
|
||||
inserted: function (el, binding, vnode) {
|
||||
binding.value(vnode)
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
Vue.use(mountedCallback)
|
||||
Vue.use(VueClipboard)
|
||||
Vue.use(VueRouter)
|
||||
Vue.component(Md.name, Md)
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
import Layout from './components/layout.vue'
|
||||
import Iframe from './components/iframe.vue'
|
||||
import demoRoutes from './demoRoutes'
|
||||
import NProgress from 'nprogress'
|
||||
|
||||
const beforeEnter = (to, from, next) => {
|
||||
NProgress.start()
|
||||
next()
|
||||
}
|
||||
export default [
|
||||
{ path: '/ant-design/components',
|
||||
component: Layout,
|
||||
|
@ -9,7 +14,10 @@ export default [
|
|||
const name = route.path.split('/ant-design/components/')[1].split('/')[0]
|
||||
return { name, showDemo: true }
|
||||
},
|
||||
children: demoRoutes,
|
||||
children: demoRoutes.map((item) => ({
|
||||
...item,
|
||||
beforeEnter,
|
||||
})),
|
||||
},
|
||||
{ path: '/ant-design/iframe',
|
||||
component: Iframe,
|
||||
|
@ -32,50 +40,62 @@ export default [
|
|||
{
|
||||
path: 'docs/vue/customize-theme',
|
||||
component: () => import('../docs/vue/customize-theme.en-US.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/customize-theme-cn',
|
||||
component: () => import('../docs/vue/customize-theme.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/getting-started',
|
||||
component: () => import('../docs/vue/getting-started.en-US.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/getting-started-cn',
|
||||
component: () => import('../docs/vue/getting-started.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/i18n',
|
||||
component: () => import('../docs/vue/i18n.en-US.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/i18n-cn',
|
||||
component: () => import('../docs/vue/i18n.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/introduce',
|
||||
component: () => import('../docs/vue/introduce.en-US.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/introduce-cn',
|
||||
component: () => import('../docs/vue/introduce.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/use-with-vue-cli',
|
||||
component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/use-with-vue-cli-cn',
|
||||
component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/changelog',
|
||||
component: () => import('../CHANGELOG.en-US.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/changelog-cn',
|
||||
component: () => import('../CHANGELOG.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{ path: '', redirect: '/ant-design/vue/docs/introduce/' },
|
||||
],
|
||||
|
|
|
@ -20,3 +20,4 @@
|
|||
@import './responsive';
|
||||
@import './theme';
|
||||
@import './docsearch';
|
||||
@import './nprogress';
|
||||
|
|
Loading…
Reference in New Issue