ant-design-vue/site/components/header.vue

54 lines
1.6 KiB
Vue
Raw Normal View History

2018-04-04 18:39:21 +08:00
<script>
import { isZhCN } from '../util'
export default {
props: {
num: Number,
},
data () {
return {
}
},
methods: {
handleClick () {
const { name } = this.$route.params
const newName = isZhCN(name) ? name.replace('-cn', '') : `${name}-cn`
this.$router.push({
2018-04-04 23:59:38 +08:00
path: `/ant-design/components/${newName}/`,
2018-04-04 18:39:21 +08:00
})
},
},
render () {
const { name } = this.$route.params
const isCN = isZhCN(name)
return (
<header id='header'>
<a-row>
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
<router-link to={{ path: '/ant-design' }} id='logo'>
<img alt='logo' src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
<span> VUE-ANTD</span>
</router-link>
</a-col>
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
<div id='search-box'>
进度{this.num} / 52
</div>
<a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
{isCN ? 'English' : '中文'}
</a-button>
<a-menu selectedKeys={['components']} mode='horizontal' class='menu-site' id='nav'>
<a-menu-item key='components'>
{isCN ? '组件' : 'Components'}
</a-menu-item>
<a-menu-item key='github'>
<a href='https://github.com/vueComponent/ant-design'>GitHub</a>
</a-menu-item>
</a-menu>
</a-col>
</a-row>
</header>
)
},
}
</script>