docs: simplify seciton name (#4961)

docs/site/mobile/App.vue

@@ -38,8 +38,7 @@ function getQueryString(name) {
 export default {
   computed: {
     title() {
-      const { name } = this.$route.meta;
-      return name ? name.replace(/-/g, '') : '';
+      return this.$route.meta.title || '';
     },
 
     showNav() {

docs/site/mobile/demo-common.js

@@ -4,7 +4,7 @@
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import VantDoc, { DemoBlock, DemoSection } from '@vant/doc';
+import VantDoc from '@vant/doc';
 import i18n from '../utils/i18n';
 import Vant, { Lazyload, Locale } from '../../../src';
 import { camelize } from '../../../src/utils/format/string';
@@ -18,8 +18,6 @@ Vue
   });
 
 Vue.mixin(i18n);
-Vue.component('demo-block', DemoBlock);
-Vue.component('demo-section', DemoSection);
 
 Locale.add({
   'zh-CN': {

docs/site/router.js

@@ -57,13 +57,13 @@ const registerRoute = ({ mobile, componentMap }) => {
         }
 
         route.push({
-          name: lang + '/' + path,
           component,
+          name: `${lang}/${path}`,
           path: `/${lang}/${path}`,
           meta: {
             lang,
-            path,
-            name: page.title
+            name: path,
+            title: page.title
           }
         });
       }

package.json

@@ -72,7 +72,7 @@
     "@babel/preset-typescript": "^7.6.0",
     "@types/jest": "^24.0.16",
     "@vant/cli": "^1.0.6",
-    "@vant/doc": "^2.5.7",
+    "@vant/doc": "^2.6.1",
     "@vant/eslint-config": "^1.4.0",
     "@vant/markdown-loader": "^2.2.0",
     "@vant/markdown-vetur": "^1.0.0",

packages/vant-doc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/doc",
-  "version": "2.5.7",
+  "version": "2.6.1",
   "description": "vant document template",
   "main": "./lib/index.js",
   "publishConfig": {
@@ -14,5 +14,8 @@
     "release": "npm run build && npm publish"
   },
   "license": "MIT",
-  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-doc"
+  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-doc",
+  "devDependencies": {
+    "decamelize": "^3.2.0"
+  }
 }

packages/vant-doc/src/component/Block.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="van-doc-block">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'van-doc-block'
-};
-</script>
-
-<style lang="less">
-@import '../style/variable';
-
-.van-doc-block {
-  display: flex;
-  margin-bottom: 20px;
-
-  .highlight {
-    flex: 1;
-    box-sizing: border-box;
-
-    pre {
-      word-wrap: break-word;
-    }
-  }
-}
-</style>

packages/vant-doc/src/component/DemoBlock.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  name: 'van-doc-demo-block',
+  name: 'demo-block',
 
   props: {
     title: String

packages/vant-doc/src/component/DemoSection.vue

@@ -1,62 +1,32 @@
 <template>
-  <section class="van-doc-demo-section" :class="`demo-${demoName}`" :style="style">
+  <section class="van-doc-demo-section" :class="demoName">
     <slot />
   </section>
 </template>
 
 <script>
-export default {
-  name: 'van-doc-demo-section',
+import decamelize from 'decamelize';
 
-  props: {
-    name: String,
-    title: String,
-    background: String
-  },
+export default {
+  name: 'demo-section',
 
   computed: {
     demoName() {
-      return this.name || this.getParentName();
-    },
-    style() {
-      return {
-        background: this.background
-      };
-    }
-  },
-
-  methods: {
-    getParentName() {
-      const { $parent } = this;
-      if ($parent && $parent.$options.name) {
-        return $parent.$options.name.replace('demo-', '');
+      const { meta } = this.$route;
+      if (meta && meta.name) {
+        return `demo-${decamelize(meta.name, '-')}`;
       }
+
+      return '';
     }
   }
 };
 </script>
 
 <style lang="less">
-@import '../style/variable';
-
 .van-doc-demo-section {
   box-sizing: border-box;
   min-height: 100vh;
   padding-bottom: 20px;
-
-  &__title {
-    margin: 0;
-    padding: 15px;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 1.5;
-    text-transform: capitalize;
-
-    + .van-doc-demo-block {
-      .van-doc-demo-block__title {
-        padding-top: 0;
-      }
-    }
-  }
 }
 </style>

packages/vant-doc/src/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VanDoc from './VanDoc';
 import Nav from './component/Nav';
-import Block from './component/Block';
 import Header from './component/Header';
 import Content from './component/Content';
 import Container from './component/Container';
@@ -13,7 +12,6 @@ const components = [
   Nav,
   Header,
   VanDoc,
-  Block,
   Content,
   Container,
   Simulator,
@@ -31,7 +29,6 @@ export {
   Nav,
   Header,
   VanDoc,
-  Block,
   Content,
   Container,
   Simulator,

packages/vant-doc/yarn.lock

@@ -0,0 +1,35 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/runtime-corejs2@^7.2.0":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.7.2.tgz#5a8c4e2f8688ce58adc9eb1d8320b6e7341f96ce"
+  integrity sha512-GfVnHchOBvIMsweQ13l4jd9lT4brkevnavnVOej5g2y7PpTRY+R4pcQlCjWMZoUla5rMLFzaS/Ll2s59cB1TqQ==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
+core-js@^2.6.5:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
+  integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
+
+decamelize@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-3.2.0.tgz#84b8e8f4f8c579f938e35e2cc7024907e0090851"
+  integrity sha512-4TgkVUsmmu7oCSyGBm5FvfMoACuoh9EOidm7V5/J2X2djAwwt57qb3F2KMP2ITqODTCSwb+YRV+0Zqrv18k/hw==
+  dependencies:
+    xregexp "^4.2.4"
+
+regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+
+xregexp@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.2.4.tgz#02a4aea056d65a42632c02f0233eab8e4d7e57ed"
+  integrity sha512-sO0bYdYeJAJBcJA8g7MJJX7UrOZIfJPd8U2SC7B2Dd/J24U0aQNoGp33shCaBSWeb0rD5rh6VBUIXOkGal1TZA==
+  dependencies:
+    "@babel/runtime-corejs2" "^7.2.0"

src/card/demo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <demo-section background="white">
+  <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-card
         num="2"
@@ -90,3 +90,11 @@ export default {
   }
 };
 </script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-card {
+  background-color: @white;
+}
+</style>

yarn.lock

@@ -1306,10 +1306,10 @@
     shelljs "^0.8.2"
     signale "^1.4.0"
 
-"@vant/doc@^2.5.7":
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.5.7.tgz#67ae6bedcdb7caccb73ff43d0d13b626e9d4d622"
-  integrity sha512-1n0/YEFB0QvnNKzzjJAzZIJIInyn3y3UFFr31K3pjb17qdPUPuhg42wEXyFWSLQrOHc9jcUtmcEihD3aQIeL/Q==
+"@vant/doc@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.6.1.tgz#667db2ca32cd86f3def452a03c66076c1b97c969"
+  integrity sha512-4e0EraSRqxFtHZj0vsmYywjPGTNGKjOA7fLKrovDpnLDMdkUmMUAWRTiJ1MUtlXYHJOI4C6vHj6pW57NLMd45A==
 
 "@vant/eslint-config@^1.4.0":
   version "1.4.0"