[Build] revert site to webpack config (#3747)
This commit is contained in:
neverland
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="side-nav">
|
||||
<div class="mobile-switch-lang">
|
||||
<span
|
||||
:class="{ active: $vantLang === 'zh-CN' }"
|
||||
@click="switchLang('zh-CN')"
|
||||
>
|
||||
中文
|
||||
</span>
|
||||
<span
|
||||
:class="{ active: $vantLang === 'en-US' }"
|
||||
@click="switchLang('en-US')"
|
||||
>
|
||||
EN
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="vant-title">
|
||||
<img src="https://img.yzcdn.cn/vant/logo.png">
|
||||
<span>Vant</span>
|
||||
</h1>
|
||||
<h2 class="vant-desc">{{ description }}</h2>
|
||||
<template v-for="item in navList">
|
||||
<mobile-nav
|
||||
v-for="(group, index) in item.groups"
|
||||
:group="group"
|
||||
:base="$vantLang"
|
||||
:key="index"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import docConfig from '../doc.config';
|
||||
import MobileNav from './MobileNav';
|
||||
import { setLang } from '../utils/lang';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MobileNav
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
docConfig
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
navList() {
|
||||
return (this.docConfig[this.$vantLang].nav || []).filter(item => item.showInMobile);
|
||||
},
|
||||
|
||||
description() {
|
||||
return this.$vantLang === 'zh-CN' ? '轻量、可靠的移动端 Vue 组件库' : 'Mobile UI Components built on Vue';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
switchLang(lang) {
|
||||
const from = lang === 'zh-CN' ? 'en-US' : 'zh-CN';
|
||||
this.$router.push(this.$route.path.replace(from, lang));
|
||||
setLang(lang);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../src/style/var';
|
||||
|
||||
.side-nav {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 64px 20px 20px;
|
||||
|
||||
.vant-title,
|
||||
.vant-desc {
|
||||
padding-left: 15px;
|
||||
font-weight: normal;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vant-title {
|
||||
margin: 0 0 15px;
|
||||
|
||||
img,
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 15px;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.vant-desc {
|
||||
margin: 0 0 40px;
|
||||
color: #7d7e80;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-switch-lang {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
overflow: hidden;
|
||||
color: @blue;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
color: @gray-dark;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
background-color: #f7f8fa;
|
||||
border: 1px solid #dcdee0;
|
||||
|
||||
&:first-child {
|
||||
border-right: none;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-left: none;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @white;
|
||||
background-color: @blue;
|
||||
border-color: @blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<section class="van-doc-demo-pages">
|
||||
<h1>{{ $t('title') }}</h1>
|
||||
<div class="card">
|
||||
<p>{{ $t('description') }}</p>
|
||||
<div class="van-doc-demo-pages__gallery">
|
||||
<div
|
||||
:class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
|
||||
v-for="(demo, index) in demos"
|
||||
>
|
||||
<h4>{{ demo.title }}</h4>
|
||||
<a
|
||||
:href="demo.source"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('source') }}
|
||||
</a>
|
||||
<img
|
||||
:src="demo.preview"
|
||||
@click="onChangeDemo(demo, index)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Locale } from '../../../src';
|
||||
|
||||
Locale.add({
|
||||
'zh-CN': {
|
||||
vanDocDemoPages: {
|
||||
title: '示例',
|
||||
source: '源代码',
|
||||
description: '下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。',
|
||||
goodsDetail: '商品详情',
|
||||
userCenter: '会员中心',
|
||||
shoppingCart: '购物车'
|
||||
}
|
||||
},
|
||||
'en-US': {
|
||||
vanDocDemoPages: {
|
||||
title: 'Demo Pages',
|
||||
source: 'Source code',
|
||||
description: 'Here are some of the demo pages built using Vant, click on the picture to switch to the corresponding demo.',
|
||||
goodsDetail: 'Goods Detail',
|
||||
userCenter: 'User Center',
|
||||
shoppingCart: 'Shopping Cart'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'van-doc-demo-pages',
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentDemo: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
demos() {
|
||||
return [{
|
||||
title: this.$t('goodsDetail'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
|
||||
url: 'https://youzan.github.io/vant-demo/#/goods',
|
||||
source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue'
|
||||
}, {
|
||||
title: this.$t('userCenter'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
|
||||
url: 'https://youzan.github.io/vant-demo/#/user',
|
||||
source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/user/index.vue'
|
||||
}, {
|
||||
title: this.$t('shoppingCart'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
|
||||
url: 'https://youzan.github.io/vant-demo/#/cart',
|
||||
source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue'
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.$emit('changeDemoURL', this.demos[0].url);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChangeDemo(demo, index) {
|
||||
this.currentDemo = index;
|
||||
this.$emit('changeDemoURL', demo.url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.van-doc-demo-pages {
|
||||
&__gallery {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
width: 28%;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(3n+1),
|
||||
&:nth-child(3n+2) {
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 4px 0 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--active {
|
||||
img {
|
||||
box-shadow: 0 1px 4px rgba(51, 136, 255, .4), 0 0 0 1px rgba(51, 136, 255, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<van-collapse
|
||||
v-model="active"
|
||||
:border="false"
|
||||
class="mobile-nav"
|
||||
>
|
||||
<van-collapse-item
|
||||
class="mobile-nav__item"
|
||||
:title="group.groupName"
|
||||
:name="group.groupName"
|
||||
>
|
||||
<van-icon
|
||||
:name="group.icon"
|
||||
slot="right-icon"
|
||||
class="mobile-nav__icon"
|
||||
/>
|
||||
<template v-for="(navItem, index) in group.list">
|
||||
<van-cell
|
||||
v-if="!navItem.disabled"
|
||||
:key="index"
|
||||
:to="'/' + base + navItem.path"
|
||||
:title="navItem.title"
|
||||
is-link
|
||||
/>
|
||||
</template>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
base: String,
|
||||
group: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.mobile-nav {
|
||||
&__item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 24px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.van-collapse-item__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.van-collapse-item__title {
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<van-doc
|
||||
:base="base"
|
||||
:config="config"
|
||||
:lang="$vantLang"
|
||||
:github="github"
|
||||
:versions="versions"
|
||||
:simulators="simulators"
|
||||
:search-config="searchConfig"
|
||||
:current-simulator="currentSimulator"
|
||||
@switch-version="onSwitchVersion"
|
||||
>
|
||||
<router-view @changeDemoURL="onChangeDemoURL" />
|
||||
</van-doc>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pkgJson from '../../../package.json';
|
||||
import docConfig, { github, versions, searchConfig } from '../doc.config';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
this.github = github;
|
||||
this.versions = versions;
|
||||
this.searchConfig = searchConfig;
|
||||
|
||||
return {
|
||||
simulators: [`mobile.html${location.hash}`],
|
||||
demoURL: ''
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
base() {
|
||||
return `/${this.$vantLang}`;
|
||||
},
|
||||
|
||||
config() {
|
||||
return docConfig[this.$vantLang];
|
||||
},
|
||||
|
||||
currentSimulator() {
|
||||
const { name } = this.$route;
|
||||
return name && name.indexOf('demo') !== -1 ? 1 : 0;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.showVersionTip();
|
||||
},
|
||||
|
||||
methods: {
|
||||
showVersionTip() {
|
||||
const tip = window.localStorage.getItem('vantVersionTip');
|
||||
|
||||
if (!tip && this.$vantLang === 'zh-CN') {
|
||||
const version = document.querySelector('.van-doc-header__version');
|
||||
version.insertAdjacentHTML('beforeend', `
|
||||
<div class="doc-version-tip">
|
||||
提示：你当前访问的是 Vant 2.0 版本文档，点此切换至旧版文档
|
||||
<div style="text-align: right;">
|
||||
<button class="doc-version-tip__button">好哒</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const tip = document.querySelector('.doc-version-tip');
|
||||
const removeTip = event => {
|
||||
event.stopPropagation();
|
||||
tip.parentNode.removeChild(tip);
|
||||
};
|
||||
|
||||
tip.addEventListener('click', removeTip);
|
||||
version.addEventListener('click', removeTip);
|
||||
|
||||
window.localStorage.setItem('vantVersionTip', 1);
|
||||
}
|
||||
},
|
||||
|
||||
onChangeDemoURL(url) {
|
||||
this.simulators = [this.simulators[0], url];
|
||||
},
|
||||
|
||||
onSwitchVersion(version) {
|
||||
if (version !== pkgJson.version) {
|
||||
location.href = `https://youzan.github.io/vant/${version}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.van-doc-intro {
|
||||
padding-top: 20px;
|
||||
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-version-tip {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
z-index: 100;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
margin-left: -150px;
|
||||
padding: 15px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px #ebedf0;
|
||||
transform-origin: top;
|
||||
cursor: default;
|
||||
animation: version-tip .25s cubic-bezier(0.175, 0.885, 0.32, 1.375);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
border: 6px solid;
|
||||
border-color: transparent transparent white white;
|
||||
transform: rotate(135deg);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 60px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
background: #1889f9;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: darken(#1889f9, 10%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes version-tip {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
|
||||
<meta http-Equiv="Cache-Control" Content="no-cache" />
|
||||
<meta http-Equiv="Pragma" Content="no-cache" />
|
||||
<meta http-Equiv="Expires" Content="0" />
|
||||
<link rel="shortcut icon" href="https://img.yzcdn.cn/zanui/vant/vant-2017-12-18.ico">
|
||||
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet" />
|
||||
<title>Vant - 轻量、可靠的移动端 Vue 组件库</title>
|
||||
<script>window.Promise || document.write('<script src="//img.yzcdn.cn/huiyi/build/h5/js/pinkie.min.js"><\/script>');</script>
|
||||
</head>
|
||||
<body ontouchstart>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import VantDoc from '@vant/doc';
|
||||
import App from './App';
|
||||
import routes from '../router';
|
||||
import { isMobile, importAll } from '../utils';
|
||||
|
||||
if (isMobile) {
|
||||
location.replace('mobile.html' + location.hash);
|
||||
}
|
||||
|
||||
Vue.use(VueRouter).use(VantDoc);
|
||||
|
||||
const docs = {};
|
||||
const docsFromMarkdown = require.context('../../markdown', false, /(en-US|zh-CN)\.md$/);
|
||||
const docsFromPackages = require.context('../../../src', true, /README(\.zh-CN)?\.md$/);
|
||||
|
||||
importAll(docs, docsFromMarkdown);
|
||||
importAll(docs, docsFromPackages);
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
routes: routes({ componentMap: docs })
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
window.scrollTo(0, 0);
|
||||
Vue.nextTick(() => window.syncPath());
|
||||
});
|
||||
|
||||
window.vueRouter = router;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Vue.config.productionTip = false;
|
||||
}
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
router
|
||||
});
|
||||
@@ -0,0 +1,678 @@
|
||||
import pkgJson from '../../package.json';
|
||||
|
||||
const { version } = pkgJson;
|
||||
|
||||
export const searchConfig = {
|
||||
apiKey: '90067aecdaa2c85220e2783cd305caac',
|
||||
indexName: 'vant'
|
||||
};
|
||||
|
||||
export const versions = [version, '1.x'];
|
||||
|
||||
export const github = 'https://github.com/youzan/vant';
|
||||
|
||||
export default {
|
||||
'zh-CN': {
|
||||
header: {
|
||||
logo: {
|
||||
image: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
title: 'Vant',
|
||||
href: '#/'
|
||||
},
|
||||
nav: {
|
||||
lang: {
|
||||
text: 'En',
|
||||
from: 'zh-CN',
|
||||
to: 'en-US'
|
||||
}
|
||||
}
|
||||
},
|
||||
nav: [
|
||||
{
|
||||
name: '开发指南',
|
||||
groups: [
|
||||
{
|
||||
list: [
|
||||
{
|
||||
path: '/intro',
|
||||
title: '介绍'
|
||||
},
|
||||
{
|
||||
path: '/quickstart',
|
||||
title: '快速上手'
|
||||
},
|
||||
{
|
||||
path: '/changelog',
|
||||
title: '更新日志'
|
||||
},
|
||||
{
|
||||
path: '/style',
|
||||
title: '内置样式'
|
||||
},
|
||||
{
|
||||
path: '/theme',
|
||||
title: '定制主题'
|
||||
},
|
||||
{
|
||||
path: '/contribution',
|
||||
title: '开发指南'
|
||||
},
|
||||
{
|
||||
path: '/design',
|
||||
title: '设计资源'
|
||||
},
|
||||
{
|
||||
path: '/style-guide',
|
||||
title: '风格指南'
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '示例页面'
|
||||
},
|
||||
{
|
||||
path: '/locale',
|
||||
title: '国际化'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '组件',
|
||||
showInMobile: true,
|
||||
groups: [
|
||||
{
|
||||
groupName: '基础组件',
|
||||
icon: 'https://img.yzcdn.cn/vant/basic-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/button',
|
||||
title: 'Button 按钮'
|
||||
},
|
||||
{
|
||||
path: '/cell',
|
||||
title: 'Cell 单元格'
|
||||
},
|
||||
{
|
||||
path: '/icon',
|
||||
title: 'Icon 图标'
|
||||
},
|
||||
{
|
||||
path: '/image',
|
||||
title: 'Image 图片'
|
||||
},
|
||||
{
|
||||
path: '/col',
|
||||
title: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
path: '/popup',
|
||||
title: 'Popup 弹出层'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '表单组件',
|
||||
icon: 'https://img.yzcdn.cn/vant/form-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/checkbox',
|
||||
title: 'Checkbox 复选框'
|
||||
},
|
||||
{
|
||||
path: '/datetime-picker',
|
||||
title: 'DatetimePicker 时间选择'
|
||||
},
|
||||
{
|
||||
path: '/field',
|
||||
title: 'Field 输入框'
|
||||
},
|
||||
{
|
||||
path: '/number-keyboard',
|
||||
title: 'NumberKeyboard 数字键盘'
|
||||
},
|
||||
{
|
||||
path: '/password-input',
|
||||
title: 'PasswordInput 密码输入框'
|
||||
},
|
||||
{
|
||||
path: '/picker',
|
||||
title: 'Picker 选择器'
|
||||
},
|
||||
{
|
||||
path: '/radio',
|
||||
title: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
path: '/rate',
|
||||
title: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
title: 'Search 搜索'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
title: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
path: '/stepper',
|
||||
title: 'Stepper 步进器'
|
||||
},
|
||||
{
|
||||
path: '/switch',
|
||||
title: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
path: '/switch-cell',
|
||||
title: 'SwitchCell 开关单元格'
|
||||
},
|
||||
{
|
||||
path: '/uploader',
|
||||
title: 'Uploader 文件上传'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '反馈组件',
|
||||
icon: 'passed',
|
||||
list: [
|
||||
{
|
||||
path: '/action-sheet',
|
||||
title: 'ActionSheet 上拉菜单'
|
||||
},
|
||||
{
|
||||
path: '/dialog',
|
||||
title: 'Dialog 弹出框'
|
||||
},
|
||||
{
|
||||
path: '/dropdown-menu',
|
||||
title: 'DropdownMenu 下拉菜单'
|
||||
},
|
||||
{
|
||||
path: '/loading',
|
||||
title: 'Loading 加载'
|
||||
},
|
||||
{
|
||||
path: '/notify',
|
||||
title: 'Notify 消息通知'
|
||||
},
|
||||
{
|
||||
path: '/pull-refresh',
|
||||
title: 'PullRefresh 下拉刷新'
|
||||
},
|
||||
{
|
||||
path: '/swipe-cell',
|
||||
title: 'SwipeCell 滑动单元格'
|
||||
},
|
||||
{
|
||||
path: '/toast',
|
||||
title: 'Toast 轻提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '展示组件',
|
||||
icon: 'photo-o',
|
||||
list: [
|
||||
{
|
||||
path: '/circle',
|
||||
title: 'Circle 环形进度条'
|
||||
},
|
||||
{
|
||||
path: '/collapse',
|
||||
title: 'Collapse 折叠面板'
|
||||
},
|
||||
{
|
||||
path: '/image-preview',
|
||||
title: 'ImagePreview 图片预览'
|
||||
},
|
||||
{
|
||||
path: '/lazyload',
|
||||
title: 'Lazyload 图片懒加载'
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
title: 'List 列表'
|
||||
},
|
||||
{
|
||||
path: '/notice-bar',
|
||||
title: 'NoticeBar 通知栏'
|
||||
},
|
||||
{
|
||||
path: '/panel',
|
||||
title: 'Panel 面板'
|
||||
},
|
||||
{
|
||||
path: '/progress',
|
||||
title: 'Progress 进度条'
|
||||
},
|
||||
{
|
||||
path: '/skeleton',
|
||||
title: 'Skeleton 骨架屏'
|
||||
},
|
||||
{
|
||||
path: '/steps',
|
||||
title: 'Steps 步骤条'
|
||||
},
|
||||
{
|
||||
path: '/swipe',
|
||||
title: 'Swipe 轮播'
|
||||
},
|
||||
{
|
||||
path: '/tag',
|
||||
title: 'Tag 标记'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '导航组件',
|
||||
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/grid',
|
||||
title: 'Grid 宫格'
|
||||
},
|
||||
{
|
||||
path: '/index-bar',
|
||||
title: 'IndexBar 索引栏'
|
||||
},
|
||||
{
|
||||
path: '/nav-bar',
|
||||
title: 'NavBar 导航栏'
|
||||
},
|
||||
{
|
||||
path: '/pagination',
|
||||
title: 'Pagination 分页'
|
||||
},
|
||||
{
|
||||
path: '/sidebar',
|
||||
title: 'Sidebar 侧边导航'
|
||||
},
|
||||
{
|
||||
path: '/tab',
|
||||
title: 'Tab 标签页'
|
||||
},
|
||||
{
|
||||
path: '/tabbar',
|
||||
title: 'Tabbar 标签栏'
|
||||
},
|
||||
{
|
||||
path: '/tree-select',
|
||||
title: 'TreeSelect 分类选择'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '业务组件',
|
||||
icon: 'ellipsis',
|
||||
list: [
|
||||
{
|
||||
path: '/address-edit',
|
||||
title: 'AddressEdit 地址编辑'
|
||||
},
|
||||
{
|
||||
path: '/address-list',
|
||||
title: 'AddressList 地址列表'
|
||||
},
|
||||
{
|
||||
path: '/area',
|
||||
title: 'Area 省市区选择'
|
||||
},
|
||||
{
|
||||
path: '/card',
|
||||
title: 'Card 商品卡片'
|
||||
},
|
||||
{
|
||||
path: '/contact-card',
|
||||
title: 'Contact 联系人'
|
||||
},
|
||||
{
|
||||
path: '/coupon-list',
|
||||
title: 'Coupon 优惠券'
|
||||
},
|
||||
{
|
||||
path: '/goods-action',
|
||||
title: 'GoodsAction 商品导航'
|
||||
},
|
||||
{
|
||||
path: '/submit-bar',
|
||||
title: 'SubmitBar 提交订单栏'
|
||||
},
|
||||
{
|
||||
path: '/sku',
|
||||
title: 'Sku 商品规格'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
'en-US': {
|
||||
header: {
|
||||
logo: {
|
||||
image:
|
||||
'https://img.yzcdn.cn/vant/logo.png',
|
||||
title: 'Vant',
|
||||
href: '#/'
|
||||
},
|
||||
nav: {
|
||||
lang: {
|
||||
text: '中文',
|
||||
from: 'en-US',
|
||||
to: 'zh-CN'
|
||||
}
|
||||
}
|
||||
},
|
||||
nav: [
|
||||
{
|
||||
name: 'Essentials',
|
||||
groups: [
|
||||
{
|
||||
list: [
|
||||
{
|
||||
path: '/intro',
|
||||
title: 'Introduction'
|
||||
},
|
||||
{
|
||||
path: '/quickstart',
|
||||
title: 'Quickstart'
|
||||
},
|
||||
{
|
||||
path: '/changelog',
|
||||
title: 'Changelog'
|
||||
},
|
||||
{
|
||||
path: '/style',
|
||||
title: 'Built-in style'
|
||||
},
|
||||
{
|
||||
path: '/theme',
|
||||
title: 'Custom Theme'
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: 'Demo pages'
|
||||
},
|
||||
{
|
||||
path: '/locale',
|
||||
title: 'Internationalization'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Components',
|
||||
showInMobile: true,
|
||||
groups: [
|
||||
{
|
||||
groupName: 'Basic Components',
|
||||
icon: 'https://img.yzcdn.cn/vant/basic-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/button',
|
||||
title: 'Button'
|
||||
},
|
||||
{
|
||||
path: '/cell',
|
||||
title: 'Cell'
|
||||
},
|
||||
{
|
||||
path: '/icon',
|
||||
title: 'Icon'
|
||||
},
|
||||
{
|
||||
path: '/image',
|
||||
title: 'Image'
|
||||
},
|
||||
{
|
||||
path: '/col',
|
||||
title: 'Layout'
|
||||
},
|
||||
{
|
||||
path: '/popup',
|
||||
title: 'Popup'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'Form Components',
|
||||
icon: 'https://img.yzcdn.cn/vant/form-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/checkbox',
|
||||
title: 'Checkbox'
|
||||
},
|
||||
{
|
||||
path: '/datetime-picker',
|
||||
title: 'DatetimePicker'
|
||||
},
|
||||
{
|
||||
path: '/field',
|
||||
title: 'Field'
|
||||
},
|
||||
{
|
||||
path: '/number-keyboard',
|
||||
title: 'NumberKeyboard'
|
||||
},
|
||||
{
|
||||
path: '/password-input',
|
||||
title: 'PasswordInput'
|
||||
},
|
||||
{
|
||||
path: '/picker',
|
||||
title: 'Picker'
|
||||
},
|
||||
{
|
||||
path: '/radio',
|
||||
title: 'Radio'
|
||||
},
|
||||
{
|
||||
path: '/rate',
|
||||
title: 'Rate'
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
title: 'Search'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
title: 'Slider'
|
||||
},
|
||||
{
|
||||
path: '/stepper',
|
||||
title: 'Stepper'
|
||||
},
|
||||
{
|
||||
path: '/switch',
|
||||
title: 'Switch'
|
||||
},
|
||||
{
|
||||
path: '/switch-cell',
|
||||
title: 'SwitchCell'
|
||||
},
|
||||
{
|
||||
path: '/uploader',
|
||||
title: 'Uploader'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'Action Components',
|
||||
icon: 'passed',
|
||||
list: [
|
||||
{
|
||||
path: '/action-sheet',
|
||||
title: 'ActionSheet'
|
||||
},
|
||||
{
|
||||
path: '/dialog',
|
||||
title: 'Dialog'
|
||||
},
|
||||
{
|
||||
path: '/dropdown-menu',
|
||||
title: 'DropdownMenu'
|
||||
},
|
||||
{
|
||||
path: '/loading',
|
||||
title: 'Loading'
|
||||
},
|
||||
{
|
||||
path: '/notify',
|
||||
title: 'Notify'
|
||||
},
|
||||
{
|
||||
path: '/pull-refresh',
|
||||
title: 'PullRefresh'
|
||||
},
|
||||
{
|
||||
path: '/swipe-cell',
|
||||
title: 'SwipeCell'
|
||||
},
|
||||
{
|
||||
path: '/toast',
|
||||
title: 'Toast'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'Display Components',
|
||||
icon: 'photo-o',
|
||||
list: [
|
||||
{
|
||||
path: '/circle',
|
||||
title: 'Circle'
|
||||
},
|
||||
{
|
||||
path: '/collapse',
|
||||
title: 'Collapse'
|
||||
},
|
||||
{
|
||||
path: '/image-preview',
|
||||
title: 'ImagePreview'
|
||||
},
|
||||
{
|
||||
path: '/lazyload',
|
||||
title: 'Lazyload'
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
title: 'List'
|
||||
},
|
||||
{
|
||||
path: '/notice-bar',
|
||||
title: 'NoticeBar'
|
||||
},
|
||||
{
|
||||
path: '/panel',
|
||||
title: 'Panel'
|
||||
},
|
||||
{
|
||||
path: '/progress',
|
||||
title: 'Progress'
|
||||
},
|
||||
{
|
||||
path: '/skeleton',
|
||||
title: 'Skeleton'
|
||||
},
|
||||
{
|
||||
path: '/steps',
|
||||
title: 'Steps'
|
||||
},
|
||||
{
|
||||
path: '/swipe',
|
||||
title: 'Swipe'
|
||||
},
|
||||
{
|
||||
path: '/tag',
|
||||
title: 'Tag'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'Navigation Components',
|
||||
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/grid',
|
||||
title: 'Grid'
|
||||
},
|
||||
{
|
||||
path: '/index-bar',
|
||||
title: 'IndexBar'
|
||||
},
|
||||
{
|
||||
path: '/nav-bar',
|
||||
title: 'NavBar'
|
||||
},
|
||||
{
|
||||
path: '/pagination',
|
||||
title: 'Pagination'
|
||||
},
|
||||
{
|
||||
path: '/sidebar',
|
||||
title: 'Sidebar'
|
||||
},
|
||||
{
|
||||
path: '/tab',
|
||||
title: 'Tab'
|
||||
},
|
||||
{
|
||||
path: '/tabbar',
|
||||
title: 'Tabbar'
|
||||
},
|
||||
{
|
||||
path: '/tree-select',
|
||||
title: 'TreeSelect'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: 'Business Components',
|
||||
icon: 'ellipsis',
|
||||
list: [
|
||||
{
|
||||
path: '/address-edit',
|
||||
title: 'AddressEdit'
|
||||
},
|
||||
{
|
||||
path: '/address-list',
|
||||
title: 'AddressList'
|
||||
},
|
||||
{
|
||||
path: '/area',
|
||||
title: 'Area'
|
||||
},
|
||||
{
|
||||
path: '/card',
|
||||
title: 'Card'
|
||||
},
|
||||
{
|
||||
path: '/contact-card',
|
||||
title: 'Contact'
|
||||
},
|
||||
{
|
||||
path: '/coupon-list',
|
||||
title: 'Coupon'
|
||||
},
|
||||
{
|
||||
path: '/goods-action',
|
||||
title: 'GoodsAction'
|
||||
},
|
||||
{
|
||||
path: '/submit-bar',
|
||||
title: 'SubmitBar'
|
||||
},
|
||||
{
|
||||
path: '/sku',
|
||||
title: 'Sku'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-nav-bar
|
||||
v-show="title"
|
||||
class="van-doc-nav-bar"
|
||||
:title="title"
|
||||
:left-arrow="showNav"
|
||||
@click-left="onBack"
|
||||
/>
|
||||
<keep-alive>
|
||||
<router-view :weapp="weapp" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function getQueryString(name) {
|
||||
const arr = location.search.substr(1).split('&');
|
||||
for (let i = 0, l = arr.length; i < l; i++) {
|
||||
const item = arr[i].split('=');
|
||||
if (item.shift() === name) {
|
||||
return decodeURIComponent(item.join('='));
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
title() {
|
||||
const { name } = this.$route.meta;
|
||||
return name ? name.replace(/-/g, '') : '';
|
||||
},
|
||||
|
||||
showNav() {
|
||||
return getQueryString('hide_nav') !== '1';
|
||||
},
|
||||
|
||||
weapp() {
|
||||
return getQueryString('weapp') === '1';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBack() {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../src/style/var';
|
||||
|
||||
body {
|
||||
color: @text-color;
|
||||
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
|
||||
line-height: 1;
|
||||
background-color: #f8f8f8;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.van-doc-nav-bar {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
|
||||
.van-nav-bar__title {
|
||||
font-size: 17px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
color: @gray-dark;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-section {
|
||||
margin-top: -56px;
|
||||
padding-top: 56px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* Demo Common Mixin && i18n
|
||||
*/
|
||||
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import VantDoc, { DemoBlock, DemoSection } from '@vant/doc';
|
||||
import i18n from '../utils/i18n';
|
||||
import Vant, { Lazyload, Locale } from '../../../src';
|
||||
import { camelize } from '../../../src/utils/format/string';
|
||||
|
||||
Vue
|
||||
.use(Vant)
|
||||
.use(VantDoc)
|
||||
.use(VueRouter)
|
||||
.use(Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
|
||||
Vue.mixin(i18n);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('demo-section', DemoSection);
|
||||
|
||||
Locale.add({
|
||||
'zh-CN': {
|
||||
add: '增加',
|
||||
decrease: '减少',
|
||||
red: '红色',
|
||||
orange: '橙色',
|
||||
yellow: '黄色',
|
||||
purple: '紫色',
|
||||
tab: '标签',
|
||||
tag: '标签',
|
||||
desc: '描述信息',
|
||||
back: '返回',
|
||||
title: '标题',
|
||||
status: '状态',
|
||||
button: '按钮',
|
||||
option: '选项',
|
||||
search: '搜索',
|
||||
content: '内容',
|
||||
custom: '自定义',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
disabled: '禁用状态',
|
||||
uneditable: '不可编辑',
|
||||
basicUsage: '基础用法',
|
||||
advancedUsage: '高级用法',
|
||||
loadingStatus: '加载状态',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
passwordPlaceholder: '请输入密码'
|
||||
},
|
||||
'en-US': {
|
||||
add: 'Add',
|
||||
decrease: 'Decrease',
|
||||
red: 'Red',
|
||||
orange: 'Orange',
|
||||
yellow: 'Yellow',
|
||||
purple: 'Purple',
|
||||
tab: 'Tab',
|
||||
tag: 'Tag',
|
||||
desc: 'Description',
|
||||
back: 'Back',
|
||||
title: 'Title',
|
||||
status: 'Status',
|
||||
button: 'Button',
|
||||
option: 'Option',
|
||||
search: 'Search',
|
||||
content: 'Content',
|
||||
custom: 'Custom',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
loadingStatus: 'Loading',
|
||||
disabled: 'Disabled',
|
||||
uneditable: 'Uneditable',
|
||||
basicUsage: 'Basic Usage',
|
||||
advancedUsage: 'Advanced Usage',
|
||||
usernamePlaceholder: 'Username',
|
||||
passwordPlaceholder: 'Password'
|
||||
}
|
||||
});
|
||||
|
||||
export function demoWrapper(module, name) {
|
||||
const component = module.default;
|
||||
name = 'demo-' + name;
|
||||
component.name = name;
|
||||
|
||||
const { i18n: config } = component;
|
||||
if (config) {
|
||||
const formattedI18n = {};
|
||||
const camelizedName = camelize(name);
|
||||
Object.keys(config).forEach(key => {
|
||||
formattedI18n[key] = { [camelizedName]: config[key] };
|
||||
});
|
||||
Locale.add(formattedI18n);
|
||||
}
|
||||
|
||||
return component;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
|
||||
<meta http-Equiv="Cache-Control" Content="no-cache" />
|
||||
<meta http-Equiv="Pragma" Content="no-cache" />
|
||||
<meta http-Equiv="Expires" Content="0" />
|
||||
<link rel="shortcut icon" href="https://img.yzcdn.cn/zanui/vant/vant-2017-12-18.ico">
|
||||
<title>Vant - 轻量、可靠的移动端 Vue 组件库</title>
|
||||
<script>window.Promise || document.write('<script src="//img.yzcdn.cn/huiyi/build/h5/js/pinkie.min.js"><\/script>');</script>
|
||||
</head>
|
||||
<body ontouchstart>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
import '../../../src/index.less';
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './App';
|
||||
import routes from '../router';
|
||||
import { importAll } from '../utils';
|
||||
import '@vant/touch-emulator';
|
||||
|
||||
const componentMap = {};
|
||||
const context = require.context('../../../src', true, /demo\/index.vue$/);
|
||||
|
||||
importAll(componentMap, context);
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
routes: routes({ mobile: true, componentMap }),
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return savedPosition || { x: 0, y: 0 };
|
||||
}
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
if (!router.currentRoute.redirectedFrom) {
|
||||
Vue.nextTick(() => window.syncPath());
|
||||
}
|
||||
});
|
||||
|
||||
window.vueRouter = router;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Vue.config.productionTip = false;
|
||||
}
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
router
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
import Vue from 'vue';
|
||||
import docConfig from './doc.config';
|
||||
import DemoList from './components/DemoList';
|
||||
import DemoPages from './components/DemoPages';
|
||||
import { demoWrapper } from './mobile/demo-common';
|
||||
import { initIframeRouter } from './utils/iframe-router';
|
||||
|
||||
initIframeRouter();
|
||||
|
||||
const registerRoute = ({ mobile, componentMap }) => {
|
||||
const route = [
|
||||
{
|
||||
path: '*',
|
||||
redirect: () => `/${Vue.prototype.$vantLang}/`
|
||||
}
|
||||
];
|
||||
|
||||
Object.keys(docConfig).forEach(lang => {
|
||||
if (mobile) {
|
||||
route.push({
|
||||
path: `/${lang}`,
|
||||
component: DemoList,
|
||||
meta: { lang }
|
||||
});
|
||||
} else {
|
||||
route.push({
|
||||
path: `/${lang}`,
|
||||
redirect: `/${lang}/intro`
|
||||
});
|
||||
}
|
||||
|
||||
function addRoute(page, lang) {
|
||||
let { path } = page;
|
||||
if (path) {
|
||||
path = path.replace('/', '');
|
||||
|
||||
let component;
|
||||
if (path === 'demo') {
|
||||
component = DemoPages;
|
||||
} else if (mobile) {
|
||||
const module = componentMap[`./${path}/demo/index.vue`];
|
||||
if (module) {
|
||||
component = demoWrapper(module, path);
|
||||
}
|
||||
} else {
|
||||
const module =
|
||||
componentMap[`./${path}/README.${lang}.md`] ||
|
||||
componentMap[`./${path}/README.md`] ||
|
||||
componentMap[`./${path}.${lang}.md`];
|
||||
|
||||
component = module.default;
|
||||
}
|
||||
|
||||
if (!component) {
|
||||
return;
|
||||
}
|
||||
|
||||
route.push({
|
||||
name: lang + '/' + path,
|
||||
component,
|
||||
path: `/${lang}/${path}`,
|
||||
meta: {
|
||||
lang,
|
||||
path,
|
||||
name: page.title
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const navs = docConfig[lang].nav || [];
|
||||
navs.forEach(nav => {
|
||||
if (nav.groups) {
|
||||
nav.groups.forEach(group => {
|
||||
group.list.forEach(page => addRoute(page, lang));
|
||||
});
|
||||
} else {
|
||||
addRoute(nav, lang);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return route;
|
||||
};
|
||||
|
||||
export default registerRoute;
|
||||
@@ -0,0 +1,18 @@
|
||||
// component mixin
|
||||
import { get } from '../../../src/utils';
|
||||
import { camelize } from '../../../src/utils/format/string';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
$t() {
|
||||
const { name } = this.$options;
|
||||
const prefix = name ? camelize(name) + '.' : '';
|
||||
const messages = this.$vantMessages[this.$vantLang];
|
||||
|
||||
return (path, ...args) => {
|
||||
const message = get(messages, prefix + path) || get(messages, path);
|
||||
return typeof message === 'function' ? message(...args) : message;
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* 同步父窗口和 iframe 的 vue-router 状态
|
||||
*/
|
||||
|
||||
import { setLang } from './lang';
|
||||
import { iframeReady, isMobile } from '.';
|
||||
|
||||
export function initIframeRouter() {
|
||||
window.syncPath = function () {
|
||||
const router = window.vueRouter;
|
||||
const isInIframe = window !== window.top;
|
||||
const currentDir = router.history.current.path;
|
||||
const pathParts = currentDir.split('/');
|
||||
let lang = pathParts[0];
|
||||
if (currentDir[0] === '/') {
|
||||
lang = pathParts[1];
|
||||
}
|
||||
|
||||
if (!isInIframe && !isMobile) {
|
||||
const iframe = document.querySelector('iframe');
|
||||
if (iframe) {
|
||||
iframeReady(iframe, () => {
|
||||
iframe.contentWindow.changePath(lang, currentDir);
|
||||
});
|
||||
}
|
||||
setLang(lang);
|
||||
} else if (isInIframe) {
|
||||
window.top.changePath(lang, currentDir);
|
||||
}
|
||||
};
|
||||
|
||||
window.changePath = function (lang, path = '') {
|
||||
setLang(lang);
|
||||
window.vueRouter.replace(path);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
function iframeReady(iframe, callback) {
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
const interval = () => {
|
||||
if (iframe.contentWindow.changePath) {
|
||||
callback();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
interval();
|
||||
}, 50);
|
||||
}
|
||||
};
|
||||
|
||||
if (doc.readyState === 'complete') {
|
||||
interval();
|
||||
} else {
|
||||
iframe.onload = interval;
|
||||
}
|
||||
}
|
||||
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
const isMobile = /ios|iphone|ipod|ipad|android/.test(ua);
|
||||
|
||||
function importAll(map, r) {
|
||||
r.keys().forEach(key => {
|
||||
map[key] = r(key);
|
||||
});
|
||||
}
|
||||
|
||||
export {
|
||||
isMobile,
|
||||
importAll,
|
||||
iframeReady
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
import Locale from '../../../src/locale';
|
||||
import zhCN from '../../../src/locale/lang/zh-CN';
|
||||
import enUS from '../../../src/locale/lang/en-US';
|
||||
|
||||
const langMap = {
|
||||
'en-US': {
|
||||
title: 'Vant - Mobile UI Components built on Vue',
|
||||
messages: enUS
|
||||
},
|
||||
'zh-CN': {
|
||||
title: 'Vant - 轻量、可靠的移动端 Vue 组件库',
|
||||
messages: zhCN
|
||||
}
|
||||
};
|
||||
|
||||
let currentLang = '';
|
||||
|
||||
function getDefaultLang() {
|
||||
const langs = Object.keys(langMap);
|
||||
const { hash } = location;
|
||||
|
||||
for (let i = 0; i < langs.length; i++) {
|
||||
if (hash.indexOf(langs[i]) !== -1) {
|
||||
return langs[i];
|
||||
}
|
||||
}
|
||||
|
||||
const userLang = localStorage.getItem('VANT_LANGUAGE') || navigator.language || 'en-US';
|
||||
return userLang.indexOf('zh-') !== -1 ? 'zh-CN' : 'en-US';
|
||||
}
|
||||
|
||||
export function setLang(lang) {
|
||||
if (currentLang === lang) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentLang = lang;
|
||||
if (window.localStorage) {
|
||||
localStorage.setItem('VANT_LANGUAGE', lang);
|
||||
}
|
||||
Locale.use(lang, langMap[lang].messages);
|
||||
document.title = langMap[lang].title;
|
||||
}
|
||||
|
||||
setLang(getDefaultLang());
|
||||
Reference in New Issue
Block a user