mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
chore: remove unused files of site
This commit is contained in:
陈嘉涵
parent
dc6cc6c5af
commit
83d5d0982e
2
.gitignore
vendored
2
.gitignore
vendored
@ -12,7 +12,7 @@ package-lock.json
|
|||||||
es
|
es
|
||||||
lib
|
lib
|
||||||
dist
|
dist
|
||||||
docs/dist
|
./site
|
||||||
changelog.generated.md
|
changelog.generated.md
|
||||||
test/coverage
|
test/coverage
|
||||||
vetur
|
vetur
|
||||||
|
|||||||
@ -1,149 +0,0 @@
|
|||||||
<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%;
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 46px 20px 20px;
|
|
||||||
background: @white;
|
|
||||||
|
|
||||||
.vant-title,
|
|
||||||
.vant-desc {
|
|
||||||
padding-left: @padding-md;
|
|
||||||
font-weight: normal;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vant-title {
|
|
||||||
margin: 0 0 @padding-md;
|
|
||||||
|
|
||||||
img,
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: @padding-md;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vant-desc {
|
|
||||||
margin: 0 0 40px;
|
|
||||||
color: #7d7e80;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-switch-lang {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
color: @blue;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
width: 48px;
|
|
||||||
color: @text-color;
|
|
||||||
line-height: 22px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid @border-color;
|
|
||||||
|
|
||||||
&: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>
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<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;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 1px 5px #ebedf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__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>
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<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;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<!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">
|
|
||||||
<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>
|
|
||||||
var _hmt = _hmt || [];
|
|
||||||
(function() {
|
|
||||||
var hm = document.createElement("script");
|
|
||||||
hm.src = "https://hm.baidu.com/hm.js?ad6b5732c36321f2dafed737ac2da92f";
|
|
||||||
var s = document.getElementsByTagName("script")[0];
|
|
||||||
s.parentNode.insertBefore(hm, s);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body ontouchstart>
|
|
||||||
|
|
||||||
<div id="app"></div>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
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 }),
|
|
||||||
scrollBehavior(to) {
|
|
||||||
if (to.hash) {
|
|
||||||
return { selector: to.hash };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { x: 0, y: 0 };
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.afterEach(() => {
|
|
||||||
Vue.nextTick(() => window.syncPath());
|
|
||||||
});
|
|
||||||
|
|
||||||
window.vueRouter = router;
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
|
||||||
Vue.config.productionTip = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
new Vue({
|
|
||||||
el: '#app',
|
|
||||||
mounted() {
|
|
||||||
if (this.$route.hash) {
|
|
||||||
// wait page init
|
|
||||||
setTimeout(() => {
|
|
||||||
const el = document.querySelector(this.$route.hash);
|
|
||||||
if (el) {
|
|
||||||
el.scrollIntoView({
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render: h => h(App),
|
|
||||||
router
|
|
||||||
});
|
|
||||||
@ -1,717 +0,0 @@
|
|||||||
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://b.yzcdn.cn/vant/logo-white.png',
|
|
||||||
title: 'Vant',
|
|
||||||
href: '#/'
|
|
||||||
},
|
|
||||||
nav: {
|
|
||||||
lang: {
|
|
||||||
text: 'En',
|
|
||||||
from: 'zh-CN',
|
|
||||||
to: 'en-US'
|
|
||||||
},
|
|
||||||
logoLink: [
|
|
||||||
{
|
|
||||||
image: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
|
|
||||||
url: '/vant-weapp'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: 'https://b.yzcdn.cn/vant/logo/github.svg',
|
|
||||||
url: github
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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: '/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: 'orders-o',
|
|
||||||
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: 'gift-card-o',
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
path: '/action-sheet',
|
|
||||||
title: 'ActionSheet 上拉菜单'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/dialog',
|
|
||||||
title: 'Dialog 弹出框'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/dropdown-menu',
|
|
||||||
title: 'DropdownMenu 下拉菜单'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/loading',
|
|
||||||
title: 'Loading 加载'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/notify',
|
|
||||||
title: 'Notify 消息通知'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/overlay',
|
|
||||||
title: 'Overlay 遮罩层'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: '/count-down',
|
|
||||||
title: 'CountDown 倒计时'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/divider',
|
|
||||||
title: 'Divider 分割线'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: '/sticky',
|
|
||||||
title: 'Sticky 粘性布局'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/swipe',
|
|
||||||
title: 'Swipe 轮播'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/tag',
|
|
||||||
title: 'Tag 标记'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
groupName: '导航组件',
|
|
||||||
icon: 'peer-pay',
|
|
||||||
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: 'other-pay',
|
|
||||||
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://b.yzcdn.cn/vant/logo-white.png',
|
|
||||||
title: 'Vant',
|
|
||||||
href: '#/'
|
|
||||||
},
|
|
||||||
nav: {
|
|
||||||
lang: {
|
|
||||||
text: '中文',
|
|
||||||
from: 'en-US',
|
|
||||||
to: 'zh-CN'
|
|
||||||
},
|
|
||||||
logoLink: [
|
|
||||||
{
|
|
||||||
image: 'https://b.yzcdn.cn/vant/logo/github.svg',
|
|
||||||
url: github
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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: '/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: 'orders-o',
|
|
||||||
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: 'gift-card-o',
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
path: '/action-sheet',
|
|
||||||
title: 'ActionSheet'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/dialog',
|
|
||||||
title: 'Dialog'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/dropdown-menu',
|
|
||||||
title: 'DropdownMenu'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/loading',
|
|
||||||
title: 'Loading'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/notify',
|
|
||||||
title: 'Notify'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/overlay',
|
|
||||||
title: 'Overlay'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: '/count-down',
|
|
||||||
title: 'CountDown'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/divider',
|
|
||||||
title: 'Divider'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: '/sticky',
|
|
||||||
title: 'Sticky'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/swipe',
|
|
||||||
title: 'Swipe'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/tag',
|
|
||||||
title: 'Tag'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
groupName: 'Navigation Components',
|
|
||||||
icon: 'peer-pay',
|
|
||||||
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: 'other-pay',
|
|
||||||
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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,23 +1,22 @@
|
|||||||
/**
|
|
||||||
* Demo Common Mixin && i18n
|
|
||||||
*/
|
|
||||||
|
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import VueRouter from 'vue-router';
|
import Locale from '../../src/locale';
|
||||||
import VantDoc from '@vant/doc';
|
import { get } from '../../src/utils';
|
||||||
import i18n from '../utils/i18n';
|
import { camelize } from '../../src/utils/format/string';
|
||||||
import Vant, { Lazyload, Locale } from '../../../src';
|
|
||||||
import { camelize } from '../../../src/utils/format/string';
|
|
||||||
|
|
||||||
Vue
|
Vue.mixin({
|
||||||
.use(Vant)
|
computed: {
|
||||||
.use(VantDoc)
|
$t() {
|
||||||
.use(VueRouter)
|
const { name } = this.$options;
|
||||||
.use(Lazyload, {
|
const prefix = name ? camelize(name) + '.' : '';
|
||||||
lazyComponent: true
|
const messages = this.$vantMessages[this.$vantLang];
|
||||||
});
|
|
||||||
|
|
||||||
Vue.mixin(i18n);
|
return (path, ...args) => {
|
||||||
|
const message = get(messages, prefix + path) || get(messages, path);
|
||||||
|
return typeof message === 'function' ? message(...args) : message;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
Locale.add({
|
Locale.add({
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
@ -77,21 +76,3 @@ Locale.add({
|
|||||||
passwordPlaceholder: 'Password'
|
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;
|
|
||||||
}
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<van-nav-bar
|
|
||||||
v-show="title"
|
|
||||||
class="van-doc-nav-bar"
|
|
||||||
:title="title"
|
|
||||||
:border="false"
|
|
||||||
:left-arrow="showNav"
|
|
||||||
@click-left="onBack"
|
|
||||||
/>
|
|
||||||
<van-notice-bar
|
|
||||||
v-if="weapp"
|
|
||||||
v-show="title"
|
|
||||||
wrapable
|
|
||||||
:text="tips"
|
|
||||||
background="#ecf9ff"
|
|
||||||
color="rgba(52, 73, 94, 0.8)"
|
|
||||||
style="font-size: 12px;"
|
|
||||||
/>
|
|
||||||
<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() {
|
|
||||||
return this.$route.meta.title || '';
|
|
||||||
},
|
|
||||||
|
|
||||||
showNav() {
|
|
||||||
return getQueryString('hide_nav') !== '1';
|
|
||||||
},
|
|
||||||
|
|
||||||
weapp() {
|
|
||||||
return getQueryString('weapp') === '1';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeCreate() {
|
|
||||||
this.tips = 'Tips: 当前预览的是 Vue 版 Vant 的示例，少部分功能可能与小程序版有出入，请以文档描述和实际效果为准。';
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onBack() {
|
|
||||||
history.back();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../../src/style/var';
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-width: 100vw;
|
|
||||||
color: @text-color;
|
|
||||||
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
|
|
||||||
line-height: 1;
|
|
||||||
background-color: #f7f8fa;
|
|
||||||
-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-6;
|
|
||||||
font-size: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-doc-demo-section {
|
|
||||||
margin-top: -56px;
|
|
||||||
padding-top: 56px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<script>
|
|
||||||
// avoid to load analytics in iframe
|
|
||||||
if (window.top === window) {
|
|
||||||
var _hmt = _hmt || [];
|
|
||||||
(function() {
|
|
||||||
var hm = document.createElement("script");
|
|
||||||
hm.src = "https://hm.baidu.com/hm.js?ad6b5732c36321f2dafed737ac2da92f";
|
|
||||||
var s = document.getElementsByTagName("script")[0];
|
|
||||||
s.parentNode.insertBefore(hm, s);
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body ontouchstart>
|
|
||||||
|
|
||||||
<div id="app"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
import '../../../src/index.less';
|
|
||||||
import Vue from 'vue';
|
|
||||||
import VueRouter from 'vue-router';
|
|
||||||
import routes from '../router';
|
|
||||||
import App from './App';
|
|
||||||
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
|
|
||||||
});
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import Vue from 'vue';
|
|
||||||
import docConfig from './doc.config';
|
|
||||||
import DemoList from './components/DemoList';
|
|
||||||
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 (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({
|
|
||||||
component,
|
|
||||||
name: `${lang}/${path}`,
|
|
||||||
path: `/${lang}/${path}`,
|
|
||||||
meta: {
|
|
||||||
lang,
|
|
||||||
name: path,
|
|
||||||
title: 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;
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
// 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;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/**
|
|
||||||
* 同步父窗口和 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);
|
|
||||||
|
|
||||||
// should preserve hash for anchor
|
|
||||||
if (window.vueRouter.currentRoute.path !== path) {
|
|
||||||
window.vueRouter.replace(path).catch(() => {});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
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
|
|
||||||
};
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
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());
|
|
||||||
@ -58,7 +58,6 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
console.log(this.config);
|
|
||||||
return {
|
return {
|
||||||
showVersionPop: false
|
showVersionPop: false
|
||||||
};
|
};
|
||||||
|
|||||||
@ -12,8 +12,10 @@ if (process.env.NODE_ENV !== 'production') {
|
|||||||
Vue.component(DemoBlock.name, DemoBlock);
|
Vue.component(DemoBlock.name, DemoBlock);
|
||||||
Vue.component(DemoSection.name, DemoSection);
|
Vue.component(DemoSection.name, DemoSection);
|
||||||
|
|
||||||
new Vue({
|
setTimeout(() => {
|
||||||
el: '#app',
|
new Vue({
|
||||||
render: h => h(App),
|
el: '#app',
|
||||||
router
|
render: h => h(App),
|
||||||
});
|
router
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
|||||||
5
webpack.config.js
Normal file
5
webpack.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
entry: {
|
||||||
|
'site-mobile': ['./docs/site/mobile']
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user