docs: site add progress status

pull/77/merge
tjz 2018-07-14 17:59:25 +08:00
parent fd0790695f
commit 9e499e2cc6
6 changed files with 67 additions and 3 deletions

View File

@ -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",

View File

@ -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>

View File

@ -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>

View File

@ -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)

View File

@ -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/' },
],

View File

@ -20,3 +20,4 @@
@import './responsive';
@import './theme';
@import './docsearch';
@import './nprogress';