fix docs
tjz
parent
2bea54c4fa
commit
4b06ad0e94
|
|
@ -6,7 +6,7 @@ If you want to use other languages, you can follow the instructions below.
|
|||
|
||||
## LocaleProvider
|
||||
|
||||
vue-antd-ui provides a React Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
|
||||
vue-antd-ui provides a Vue Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
|
||||
|
||||
````html
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -26,12 +26,12 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
|
|||
## Features
|
||||
|
||||
- An enterprise-class UI design language for web applications.
|
||||
- A set of high-quality React components out of the box.
|
||||
- A set of high-quality Vue components out of the box.
|
||||
- Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
|
||||
|
||||
## Environment Support
|
||||
|
||||
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性))
|
||||
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性))
|
||||
* Server-side Rendering
|
||||
|
||||
## Version
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
## 支持环境
|
||||
|
||||
* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)）。
|
||||
* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性)）。
|
||||
* 支持服务端渲染。
|
||||
|
||||
## 版本
|
||||
|
|
@ -118,7 +118,7 @@ import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
|||
|
||||
- [首页](https://vuecomponent.github.io/ant-design/)
|
||||
- [Ant Design React](https://ant.design/)
|
||||
- [组件库](https://vuecomponent.github.io/ant-design/docs/react/introduce-cn)
|
||||
- [组件库](https://vuecomponent.github.io/ant-design/docs/vue/introduce-cn)
|
||||
- [更新日志](/ant-design/changelog-cn)
|
||||
- [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
|
||||
- [定制主题](/ant-design/docs/vue/customize-theme-cn)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
[vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
|
||||
|
||||
---
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
|
|
@ -100,7 +99,7 @@ Now we need to customize the default webpack config.
|
|||
|
||||
### Use babel-plugin-import
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started#Import-on-Demand)).
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started/#Import-on-Demand)).
|
||||
|
||||
```bash
|
||||
$ yarn add babel-plugin-import --dev
|
||||
|
|
@ -150,7 +149,7 @@ Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because
|
|||
})
|
||||
```
|
||||
|
||||
Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started#Import-on-Demand).
|
||||
Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started/#Import-on-Demand).
|
||||
|
||||
### Customize Theme
|
||||
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ new Vue({
|
|||
|
||||
### 使用 babel-plugin-import
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started#按需加载)）。
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started-cn/#按需加载)）。
|
||||
|
||||
```bash
|
||||
$ yarn add babel-plugin-import --dev
|
||||
|
|
@ -147,7 +147,7 @@ $ yarn add babel-plugin-import --dev
|
|||
})
|
||||
```
|
||||
|
||||
最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn#按需加载)。
|
||||
最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn/#按需加载)。
|
||||
|
||||
### 自定义主题
|
||||
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
<script>
|
||||
import * as AllDemo from '../demo'
|
||||
import Header from './header'
|
||||
import zhCN from 'antd/locale-provider/zh_CN'
|
||||
import enUS from 'antd/locale-provider/default'
|
||||
import _ from 'lodash'
|
||||
import { isZhCN } from '../util'
|
||||
import { Provider, create } from '../../components/_util/store'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
this.store = create({
|
||||
currentSubMenu: [],
|
||||
})
|
||||
this.subscribe()
|
||||
return {
|
||||
currentSubMenu: [],
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.params.name': function () {
|
||||
this.store.setState({ currentSubMenu: [] })
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
subscribe () {
|
||||
const { store } = this
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
this.currentSubMenu = this.store.getState().currentSubMenu
|
||||
})
|
||||
},
|
||||
getSubMenu (isCN) {
|
||||
const currentSubMenu = this.currentSubMenu
|
||||
const lis = []
|
||||
currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
|
||||
const title = isCN ? cnTitle : usTitle
|
||||
const className = window.location.hash === `#${id}` ? 'current' : ''
|
||||
lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
|
||||
})
|
||||
return (
|
||||
<a-affix>
|
||||
<ul id='demo-toc' class='toc'>
|
||||
{lis}
|
||||
<li title='API' key='API'>
|
||||
<a
|
||||
href='#api'
|
||||
class={{
|
||||
current: window.location.hash === '#api',
|
||||
}}
|
||||
>API</a>
|
||||
</li>
|
||||
</ul>
|
||||
</a-affix>
|
||||
)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { name } = this.$route.params
|
||||
const isCN = isZhCN(name)
|
||||
const lang = isCN ? 'cn' : 'us'
|
||||
// name = name.replace(/-cn\/?$/, '')
|
||||
const titleMap = {}
|
||||
const menuConfig = {
|
||||
General: [],
|
||||
Layout: [],
|
||||
Navigation: [],
|
||||
'Data Entry': [],
|
||||
'Data Display': [],
|
||||
Feedback: [],
|
||||
Other: [],
|
||||
}
|
||||
for (const [title, d] of Object.entries(AllDemo)) {
|
||||
const type = d.type || 'Other'
|
||||
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
titleMap[key] = title
|
||||
menuConfig[type] = menuConfig[type] || []
|
||||
menuConfig[type].push(d)
|
||||
}
|
||||
const Demo = AllDemo[titleMap[name.replace(/-cn\/?$/, '')]]
|
||||
const MenuGroup = []
|
||||
for (const [type, menus] of Object.entries(menuConfig)) {
|
||||
const MenuItems = []
|
||||
_.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
|
||||
const linkValue = lang === 'cn'
|
||||
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
|
||||
: [<span>{title}</span>]
|
||||
let key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
if (lang === 'cn') {
|
||||
key = `${key}-cn`
|
||||
}
|
||||
MenuItems.push(<a-menu-item key={key}>
|
||||
<router-link to={{ path: `/ant-design/components/${key}/` }}>{linkValue}</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
|
||||
}
|
||||
let locale = zhCN
|
||||
if (lang !== 'cn') {
|
||||
locale = enUS
|
||||
}
|
||||
return (
|
||||
<div class='page-wrapper'>
|
||||
<Header num={Object.keys(AllDemo).length}/>
|
||||
|
||||
<a-locale-provider locale={locale}>
|
||||
<div class='main-wrapper'>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
<a-menu
|
||||
class='aside-container menu-site'
|
||||
selectedKeys={[name]}
|
||||
defaultOpenKeys={['Components']}
|
||||
inlineIndent={40}
|
||||
mode='inline'>
|
||||
<a-sub-menu title='Components' key='Components'>
|
||||
{MenuGroup}
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div class='content main-container'>
|
||||
<div class='toc-affix' style='width: 110px;'>
|
||||
{this.getSubMenu(isCN)}
|
||||
</div>
|
||||
{Demo ? <Provider store={this.store}><Demo key={lang}/></Provider> : '正在紧急开发中...'}
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -25,12 +25,31 @@ export default {
|
|||
this.unsubscribe()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.addSubMenu()
|
||||
},
|
||||
watch: {
|
||||
'$route': function () {
|
||||
'$route.path': function () {
|
||||
this.store.setState({ currentSubMenu: [] })
|
||||
this.addSubMenu()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addSubMenu () {
|
||||
if (this.$route.path.indexOf('/docs/vue/') !== -1) {
|
||||
this.$nextTick(() => {
|
||||
const menus = []
|
||||
this.$refs.doc.querySelectorAll(['h2', 'h3']).forEach(dom => {
|
||||
const id = dom.id
|
||||
if (id) {
|
||||
const title = dom.textContent.split('#')[0].trim()
|
||||
menus.push({ cnTitle: title, usTitle: title, id })
|
||||
}
|
||||
})
|
||||
this.currentSubMenu = menus
|
||||
})
|
||||
}
|
||||
},
|
||||
subscribe () {
|
||||
const { store } = this
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
|
|
@ -42,21 +61,22 @@ export default {
|
|||
const lis = []
|
||||
currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
|
||||
const title = isCN ? cnTitle : usTitle
|
||||
const className = window.location.hash === `#${id}` ? 'current' : ''
|
||||
const className = decodeURIComponent(window.location.hash) === `#${id}` ? 'current' : ''
|
||||
lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
|
||||
})
|
||||
const showApi = this.$route.path.indexOf('/components/') !== -1
|
||||
return (
|
||||
<a-affix>
|
||||
<ul id='demo-toc' class='toc'>
|
||||
{lis}
|
||||
<li title='API' key='API'>
|
||||
{showApi ? <li title='API' key='API'>
|
||||
<a
|
||||
href='#api'
|
||||
href='#API'
|
||||
class={{
|
||||
current: window.location.hash === '#api',
|
||||
current: window.location.hash === '#API',
|
||||
}}
|
||||
>API</a>
|
||||
</li>
|
||||
</li> : ''}
|
||||
</ul>
|
||||
</a-affix>
|
||||
)
|
||||
|
|
@ -144,12 +164,12 @@ export default {
|
|||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div class='content main-container'>
|
||||
<div class='toc-affix' style='width: 110px;'>
|
||||
{Demo ? this.getSubMenu(isCN) : ''}
|
||||
{this.getSubMenu(isCN)}
|
||||
</div>
|
||||
{Demo ? <Provider store={this.store}>
|
||||
<Demo key={isCN ? 'cn' : 'en'}/>
|
||||
</Provider> : ''}
|
||||
<div class='markdown api-container'>
|
||||
<div class='markdown api-container' ref='doc'>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const md = require('markdown-it')('default', {
|
|||
highlight: renderHighlight,
|
||||
}).use(require('markdown-it-anchor'), {
|
||||
level: 2,
|
||||
// slugify: string => string,
|
||||
slugify: string => string.trim().split(' ').join('-'),
|
||||
permalink: true,
|
||||
// renderPermalink: (slug, opts, state, permalink) => {},
|
||||
permalinkClass: 'anchor',
|
||||
|
|
|
|||
Loading…
Reference in New Issue