build: add files of vant-cli 2

2019-11-18 16:40:43 +08:00
parent 28e2849087
commit 6514b650d0
46 changed files with 12125 additions and 249 deletions
@@ -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;