build: add files of vant-cli 2
This commit is contained in:
陈嘉涵
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 同步父窗口和 iframe 的 vue-router 状态
|
||||
*/
|
||||
|
||||
import { iframeReady, isMobile } from '.';
|
||||
|
||||
window.syncPath = function () {
|
||||
const router = window.vueRouter;
|
||||
const isInIframe = window !== window.top;
|
||||
const currentDir = router.history.current.path;
|
||||
|
||||
if (isInIframe) {
|
||||
window.top.changePath(currentDir);
|
||||
} else if (!isMobile) {
|
||||
const iframe = document.querySelector('iframe');
|
||||
if (iframe) {
|
||||
iframeReady(iframe, () => {
|
||||
iframe.contentWindow.changePath(currentDir);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.changePath = function (path = '') {
|
||||
// should preserve hash for anchor
|
||||
if (window.vueRouter.currentRoute.path !== path) {
|
||||
window.vueRouter.replace(path).catch(() => {});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
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);
|
||||
|
||||
export {
|
||||
isMobile,
|
||||
iframeReady
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<van-doc :config="config" :simulator="simulator">
|
||||
<router-view />
|
||||
</van-doc>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { config } from '../../dist/desktop-config';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
simulator: `mobile.html${location.hash}`
|
||||
};
|
||||
}
|
||||
};
|
||||
</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>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!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" />
|
||||
</head>
|
||||
<body ontouchstart>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import VantDoc from '@vant/doc';
|
||||
import App from './App';
|
||||
import routes from './router';
|
||||
import { isMobile } from '../common';
|
||||
import '../common/iframe-router';
|
||||
|
||||
Vue.use(VantDoc);
|
||||
Vue.use(VueRouter);
|
||||
|
||||
if (isMobile) {
|
||||
location.replace('mobile.html' + location.hash);
|
||||
}
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
routes,
|
||||
scrollBehavior(to) {
|
||||
if (to.hash) {
|
||||
return { selector: to.hash };
|
||||
}
|
||||
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
Vue.nextTick(() => window.syncPath());
|
||||
});
|
||||
|
||||
window.vueRouter = router;
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
router
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
import { documents } from '../../dist/desktop-config';
|
||||
|
||||
const routes = [];
|
||||
const names = Object.keys(documents);
|
||||
|
||||
Object.keys(documents).forEach((name, index) => {
|
||||
if (index === 0) {
|
||||
routes.push({
|
||||
path: '*',
|
||||
redirect: () => `/${names[0]}`
|
||||
});
|
||||
}
|
||||
|
||||
routes.push({
|
||||
name,
|
||||
component: documents[name],
|
||||
path: `/${name}`,
|
||||
meta: {
|
||||
name
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
export default routes;
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<nav-bar />
|
||||
<keep-alive>
|
||||
<router-view />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DemoNav from './components/DemoNav';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DemoNav
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
body {
|
||||
min-width: 100vw;
|
||||
color: #323233;
|
||||
font-family: 'PingFang SC', Helvetica, Tohoma, Arial, sans-serif;
|
||||
line-height: 1;
|
||||
background-color: #f8f8f8;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section class="van-doc-demo-block">
|
||||
<h2 class="van-doc-demo-block__title">{{ title }}</h2>
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'demo-block',
|
||||
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../style/variable';
|
||||
|
||||
.van-doc-demo-block {
|
||||
&__title {
|
||||
margin: 0;
|
||||
padding: 32px 16px 16px;
|
||||
color: @van-doc-text-light-blue;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div v-show="title" class="van-doc-demo-nav">
|
||||
<div class="van-doc-demo-nav__title">{{ title }}</div>
|
||||
<svg class="van-doc-demo-nav__back" viewBox="0 0 1000 1000" @click="onBack">
|
||||
<path fill="#969799" fill-rule="evenodd" :d="path" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable max-len */
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
path:
|
||||
'M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z'
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
title() {
|
||||
const { name } = this.$route.meta || {};
|
||||
return name ? name.replace(/-/g, '') : '';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBack() {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.van-doc-demo-nav {
|
||||
position: relative;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__back {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<section class="van-doc-demo-section" :class="demoName">
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import decamelize from 'decamelize';
|
||||
|
||||
export default {
|
||||
name: 'demo-section',
|
||||
|
||||
computed: {
|
||||
demoName() {
|
||||
const { meta } = this.$route;
|
||||
if (meta && meta.name) {
|
||||
return `demo-${decamelize(meta.name, '-')}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.van-doc-demo-section {
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!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" />
|
||||
</head>
|
||||
<body ontouchstart>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import DemoBlock from './components/DemoBlock';
|
||||
import DemoSection from './components/DemoSection';
|
||||
import routes from './router';
|
||||
import App from './App';
|
||||
import '@vant/touch-emulator';
|
||||
import '../common/iframe-router';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.component(DemoBlock.name, DemoBlock);
|
||||
Vue.component(DemoSection.name, DemoSection);
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
routes,
|
||||
scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 }
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
Vue.nextTick(window.syncPath);
|
||||
});
|
||||
|
||||
window.vueRouter = router;
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
router
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
import { demos } from '../../dist/mobile-config';
|
||||
|
||||
const routes = [];
|
||||
const names = Object.keys(demos);
|
||||
|
||||
Object.keys(demos).forEach((name, index) => {
|
||||
if (index === 0) {
|
||||
routes.push({
|
||||
path: '*',
|
||||
redirect: () => `/${names[0]}`
|
||||
});
|
||||
}
|
||||
|
||||
routes.push({
|
||||
name,
|
||||
component: demos[name],
|
||||
path: `/${name}`,
|
||||
meta: {
|
||||
name
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
export default routes;
|
||||
Reference in New Issue
Block a user