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

151 lines
5.3 KiB
Vue
Raw Normal View History

2018-04-04 18:39:21 +08:00
<script>
2019-01-12 11:33:27 +08:00
import { isZhCN } from '../util';
import sortBy from 'lodash/sortBy';
import packageInfo from '../../package.json';
2019-02-16 14:32:46 +08:00
import logo from '../logo.svg';
import antDesignVue from '../ant-design-vue.svg';
2018-09-22 21:28:36 +08:00
2018-04-04 18:39:21 +08:00
export default {
props: {
2018-04-09 22:49:58 +08:00
name: String,
2018-04-11 13:32:18 +08:00
searchData: Array,
2018-04-04 18:39:21 +08:00
},
2019-09-28 20:45:07 +08:00
data() {
2018-04-04 18:39:21 +08:00
return {
2018-04-11 13:32:18 +08:00
value: null,
2019-01-12 11:33:27 +08:00
};
2018-04-04 18:39:21 +08:00
},
methods: {
2019-09-28 20:45:07 +08:00
handleClick() {
2019-01-12 11:33:27 +08:00
const name = this.name;
const path = this.$route.path;
const newName = isZhCN(name) ? name.replace(/-cn\/?$/, '') : `${name}-cn`;
2018-04-04 18:39:21 +08:00
this.$router.push({
2018-04-09 22:49:58 +08:00
path: path.replace(name, newName),
2019-01-12 11:33:27 +08:00
});
this.$i18n.locale = isZhCN(name) ? 'en-US' : 'zh-CN';
2018-04-04 18:39:21 +08:00
},
2019-09-28 20:45:07 +08:00
onSelect(val) {
2019-01-12 11:33:27 +08:00
this.$router.push(val);
this.value = val;
2018-04-11 13:32:18 +08:00
},
2018-04-04 18:39:21 +08:00
},
2019-09-28 20:45:07 +08:00
render() {
2019-01-12 11:33:27 +08:00
const name = this.name;
const searchData = sortBy(this.searchData, ['title']);
const isCN = isZhCN(name);
2018-04-04 18:39:21 +08:00
return (
2019-09-28 20:45:07 +08:00
<header id="header">
2018-04-04 18:39:21 +08:00
<a-row>
2019-09-28 20:45:07 +08:00
<a-col class="header-left" xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
<router-link to={{ path: '/' }} id="logo">
<img alt="logo" height="32" src={logo} />
<img alt="logo" height="16" src={antDesignVue} />
2018-04-04 18:39:21 +08:00
</router-link>
2019-09-28 20:45:07 +08:00
<a-button
ghost
size="small"
onClick={this.handleClick}
class="header-lang-button"
key="lang-button"
>
2018-08-05 22:25:51 +08:00
{isCN ? 'English' : '中文'}
</a-button>
2018-04-04 18:39:21 +08:00
</a-col>
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
2019-09-28 20:45:07 +08:00
<div id="search-box">
<a-icon type="search" />
2018-04-11 13:32:18 +08:00
<a-select
2019-09-28 20:45:07 +08:00
ref="selectBox"
2018-04-11 13:32:18 +08:00
placeholder={isCN ? '搜索组件...' : 'input search text'}
2019-09-28 20:45:07 +08:00
style="width: 200px"
2018-04-11 13:32:18 +08:00
defaultActiveFirstOption={false}
showArrow={false}
showSearch
onSelect={this.onSelect}
2019-09-28 20:45:07 +08:00
optionFilterProp="children"
2018-04-11 13:32:18 +08:00
key={this.value}
>
2019-09-28 20:45:07 +08:00
{searchData.map(({ title, subtitle, url }) => (
<a-select-option key={url}>
{title} {isCN && subtitle}
</a-select-option>
))}
2018-04-11 13:32:18 +08:00
</a-select>
2018-04-04 18:39:21 +08:00
</div>
2019-09-28 20:45:07 +08:00
<a-button
ghost
size="small"
onClick={this.handleClick}
class="header-lang-button"
key="lang-button"
>
2018-04-04 18:39:21 +08:00
{isCN ? 'English' : '中文'}
</a-button>
2019-09-28 20:45:07 +08:00
<a-select size="small" defaultValue={packageInfo.version} class="version">
2018-09-22 21:28:36 +08:00
<a-select-option value={packageInfo.version}>{packageInfo.version}</a-select-option>
</a-select>
2019-09-28 20:45:07 +08:00
<a-menu selectedKeys={['components']} mode="horizontal" class="menu-site" id="nav">
<a-menu-item key="components">{isCN ? '组件' : 'Components'}</a-menu-item>
2019-01-12 17:19:57 +08:00
<a-sub-menu key="Ecosystem" title={isCN ? '生态系统' : 'Ecosystem'}>
<a-menu-item key="design">
2019-09-28 20:45:07 +08:00
<router-link
to={{ path: isCN ? '/docs/vue/download-cn/' : '/docs/vue/download/' }}
>
2019-01-12 17:19:57 +08:00
{isCN ? '设计资源' : 'Design Resources'}
</router-link>
</a-menu-item>
<a-menu-item key="vscode">
2019-09-28 20:45:07 +08:00
<a
target="_blank"
href="https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper"
>
2019-01-12 17:19:57 +08:00
VS Code Extension
2018-12-16 14:22:18 +08:00
</a>
2019-01-12 17:19:57 +08:00
</a-menu-item>
<a-menu-item key="awesome">
2019-09-28 20:45:07 +08:00
<a target="_blank" href="https://github.com/vueComponent/ant-design-vue-awesome">
2019-01-12 17:19:57 +08:00
Awesome
</a>
</a-menu-item>
2019-01-26 16:04:32 +08:00
<a-menu-item key="github">
2019-09-28 20:45:07 +08:00
<a target="_blank" href="https://github.com/vueComponent/ant-design-vue">
GitHub
</a>
2019-01-26 16:04:32 +08:00
</a-menu-item>
2019-09-28 20:45:07 +08:00
<a-menu-item key="wechat">
<a-popover placement="right">
<template slot="content">
2019-01-26 16:04:32 +08:00
<img
2019-09-28 20:45:07 +08:00
width="160"
height="160"
alt="wechat"
src="https://qn.antdv.com/wechat.jpeg"
2019-01-26 16:04:32 +08:00
/>
</template>
2019-09-28 20:45:07 +08:00
<a>{isCN ? '微信' : 'WeChat'}</a>
2019-01-26 16:04:32 +08:00
</a-popover>
</a-menu-item>
2019-09-28 20:45:07 +08:00
<a-menu-item key="qq">
<a-popover placement="right">
<template slot="content">
<img width="160" height="160" alt="qq" src="https://qn.antdv.com/qq.png" />
2019-01-12 17:19:57 +08:00
</template>
2019-09-28 20:45:07 +08:00
<a>{isCN ? 'QQ(217490093)' : 'QQ(217490093)'}</a>
2019-01-12 17:19:57 +08:00
</a-popover>
</a-menu-item>
</a-sub-menu>
<a-menu-item key="sponsor">
2019-09-28 20:45:07 +08:00
<router-link to={{ path: isCN ? '/docs/vue/sponsor-cn/' : '/docs/vue/sponsor/' }}>
2019-01-12 17:19:57 +08:00
{isCN ? '支持我们' : 'Support us'}
</router-link>
2018-12-14 21:35:19 +08:00
</a-menu-item>
2018-04-04 18:39:21 +08:00
</a-menu>
</a-col>
</a-row>
</header>
2019-01-12 11:33:27 +08:00
);
2018-04-04 18:39:21 +08:00
},
2019-01-12 11:33:27 +08:00
};
2018-04-04 18:39:21 +08:00
</script>