docs: simplify seciton name (#4961)

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>