From e8244c44e1e06b68371c7691895e6ebafd379126 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 22 Oct 2020 16:44:19 +0800
Subject: [PATCH] docs: remove demo-section

---
 .../templates/src/demo-button/demo/index.vue  |  14 +-
 src/action-bar/demo/index.vue                 | 122 +++++----
 src/action-sheet/demo/index.vue               |  96 ++++---
 src/address-edit/demo/index.vue               |  30 ++-
 src/address-list/demo/index.vue               |  24 +-
 src/area/demo/index.vue                       |  38 ++-
 src/badge/demo/index.vue                      |  56 ++---
 src/button/demo/index.vue                     | 128 +++++-----
 src/calendar/demo/index.vue                   | 234 +++++++++---------
 src/card/demo/index.vue                       | 102 ++++----
 src/cell/demo/index.vue                       | 130 +++++-----
 src/checkbox/demo/index.vue                   | 182 +++++++-------
 src/circle/demo/index.vue                     | 122 +++++----
 src/col/demo/index.vue                        |  96 ++++---
 src/collapse/demo/index.vue                   | 114 +++++----
 src/contact-card/demo/index.vue               |  74 +++---
 src/count-down/demo/index.vue                 |  76 +++---
 src/coupon-list/demo/index.vue                |  40 ++-
 src/datetime-picker/demo/index.vue            | 152 ++++++------
 src/dialog/demo/index.vue                     |  48 ++--
 src/divider/demo/index.vue                    |  56 ++---
 src/dropdown-menu/demo/index.vue              | 106 ++++----
 src/empty/demo/index.vue                      |  62 +++--
 src/field/demo/index.vue                      |  22 +-
 src/form/demo/FieldTypeArea.vue               |  24 +-
 src/form/demo/FieldTypeCalendar.vue           |  17 +-
 src/form/demo/FieldTypeDatetimePicker.vue     |  20 +-
 src/form/demo/FieldTypePicker.vue             |  24 +-
 src/form/demo/index.vue                       |   8 +-
 src/grid/demo/index.vue                       | 143 +++++------
 src/icon/demo/index.vue                       | 164 ++++++------
 src/image-preview/demo/index.vue              |  64 +++--
 src/image/demo/index.vue                      | 104 ++++----
 src/index-bar/demo/index.vue                  |  50 ++--
 src/lazyload/demo/index.vue                   |  32 ++-
 src/list/demo/index.vue                       |  68 +++--
 src/loading/demo/index.vue                    |  46 ++--
 src/nav-bar/demo/index.vue                    |  36 ++-
 src/notice-bar/demo/index.vue                 |  74 +++---
 src/notify/demo/index.vue                     |  54 ++--
 src/number-keyboard/demo/index.vue            | 142 ++++++-----
 src/overlay/demo/index.vue                    |  48 ++--
 src/pagination/demo/index.vue                 |  90 ++++---
 src/password-input/demo/index.vue             | 102 ++++----
 src/picker/demo/index.vue                     | 124 +++++-----
 src/popup/demo/index.vue                      | 178 +++++++------
 src/progress/demo/index.vue                   |  44 ++--
 src/pull-refresh/demo/index.vue               |  78 +++---
 src/radio/demo/index.vue                      | 174 +++++++------
 src/rate/demo/index.vue                       |  74 +++---
 src/search/demo/index.vue                     |  92 ++++---
 src/share-sheet/demo/index.vue                |  82 +++---
 src/sidebar/demo/index.vue                    |  70 +++---
 src/skeleton/demo/index.vue                   |  36 ++-
 src/slider/demo/index.vue                     |  84 +++----
 src/stepper/demo/index.vue                    |  72 +++---
 src/steps/demo/index.vue                      |  78 +++---
 src/sticky/demo/index.vue                     |  48 ++--
 src/style/demo/index.vue                      |  40 ++-
 src/submit-bar/demo/index.vue                 |  82 +++---
 src/swipe-cell/demo/index.vue                 |  88 ++++---
 src/swipe/demo/index.vue                      | 118 +++++----
 src/switch/demo/index.vue                     |  60 +++--
 src/tab/demo/index.vue                        | 182 +++++++-------
 src/tabbar/demo/index.vue                     | 134 +++++-----
 src/tag/demo/index.vue                        | 118 +++++----
 src/toast/demo/index.vue                      |  54 ++--
 src/tree-select/demo/index.vue                |  86 ++++---
 src/uploader/demo/index.vue                   |  82 +++---
 69 files changed, 2732 insertions(+), 2980 deletions(-)

diff --git a/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue b/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
index c367d40fd..8e4c835c4 100644
--- a/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
+++ b/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
@@ -1,11 +1,9 @@
 <template>
-  <demo-section>
-    <demo-block title="基础用法">
-      <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
-    </demo-block>
+  <demo-block title="基础用法">
+    <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
+  </demo-block>
 
-    <demo-block title="自定义颜色">
-      <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
-    </demo-block>
-  </demo-section>
+  <demo-block title="自定义颜色">
+    <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
+  </demo-block>
 </template>
diff --git a/src/action-bar/demo/index.vue b/src/action-bar/demo/index.vue
index 96cd4ab28..b09aa0b00 100644
--- a/src/action-bar/demo/index.vue
+++ b/src/action-bar/demo/index.vue
@@ -1,71 +1,65 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-action-bar>
-        <van-action-bar-icon
-          icon="chat-o"
-          :text="t('icon1')"
-          @click="onClickIcon"
-        />
-        <van-action-bar-icon
-          icon="cart-o"
-          :text="t('icon2')"
-          @click="onClickIcon"
-        />
-        <van-action-bar-icon
-          icon="shop-o"
-          :text="t('icon3')"
-          @click="onClickIcon"
-        />
-        <van-action-bar-button
-          type="danger"
-          :text="t('button2')"
-          @click="onClickButton"
-        />
-      </van-action-bar>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-action-bar>
+      <van-action-bar-icon
+        icon="chat-o"
+        :text="t('icon1')"
+        @click="onClickIcon"
+      />
+      <van-action-bar-icon
+        icon="cart-o"
+        :text="t('icon2')"
+        @click="onClickIcon"
+      />
+      <van-action-bar-icon
+        icon="shop-o"
+        :text="t('icon3')"
+        @click="onClickIcon"
+      />
+      <van-action-bar-button
+        type="danger"
+        :text="t('button2')"
+        @click="onClickButton"
+      />
+    </van-action-bar>
+  </demo-block>
 
-    <demo-block :title="t('iconBadge')">
-      <van-action-bar>
-        <van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
-        <van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
-        <van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
-        <van-action-bar-button type="warning" :text="t('button1')" />
-        <van-action-bar-button type="danger" :text="t('button2')" />
-      </van-action-bar>
-    </demo-block>
+  <demo-block :title="t('iconBadge')">
+    <van-action-bar>
+      <van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
+      <van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
+      <van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
+      <van-action-bar-button type="warning" :text="t('button1')" />
+      <van-action-bar-button type="danger" :text="t('button2')" />
+    </van-action-bar>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('customIconColor')">
-      <van-action-bar>
-        <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
-        <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
-        <van-action-bar-icon
-          icon="star"
-          :text="t('collected')"
-          color="#ff5000"
-        />
-        <van-action-bar-button type="warning" :text="t('button1')" />
-        <van-action-bar-button type="danger" :text="t('button2')" />
-      </van-action-bar>
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('customIconColor')">
+    <van-action-bar>
+      <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
+      <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+      <van-action-bar-icon icon="star" :text="t('collected')" color="#ff5000" />
+      <van-action-bar-button type="warning" :text="t('button1')" />
+      <van-action-bar-button type="danger" :text="t('button2')" />
+    </van-action-bar>
+  </demo-block>
 
-    <demo-block :title="t('customButtonColor')">
-      <van-action-bar>
-        <van-action-bar-icon icon="chat-o" :text="t('icon1')" />
-        <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
-        <van-action-bar-button
-          color="#be99ff"
-          type="warning"
-          :text="t('button1')"
-        />
-        <van-action-bar-button
-          color="#7232dd"
-          type="danger"
-          :text="t('button2')"
-        />
-      </van-action-bar>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('customButtonColor')">
+    <van-action-bar>
+      <van-action-bar-icon icon="chat-o" :text="t('icon1')" />
+      <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+      <van-action-bar-button
+        color="#be99ff"
+        type="warning"
+        :text="t('button1')"
+      />
+      <van-action-bar-button
+        color="#7232dd"
+        type="danger"
+        :text="t('button2')"
+      />
+    </van-action-bar>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index ed6f85807..98f240d46 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -1,60 +1,54 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
-      <van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
-      <van-cell
-        is-link
-        :title="t('showDescription')"
-        @click="show.description = true"
-      />
-    </demo-block>
-
-    <demo-block card :title="t('optionStatus')">
-      <van-cell
-        is-link
-        :title="t('optionStatus')"
-        @click="show.status = true"
-      />
-    </demo-block>
-
-    <demo-block card :title="t('customPanel')">
-      <van-cell is-link :title="t('customPanel')" @click="show.title = true" />
-    </demo-block>
-
-    <van-action-sheet
-      v-model:show="show.basic"
-      :actions="simpleActions"
-      @select="onSelect"
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
+    <van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
+    <van-cell
+      is-link
+      :title="t('showDescription')"
+      @click="show.description = true"
     />
+  </demo-block>
 
-    <van-action-sheet
-      v-model:show="show.cancel"
-      :actions="simpleActions"
-      close-on-click-action
-      :cancel-text="t('cancel')"
-      @cancel="onCancel"
-    />
+  <demo-block card :title="t('optionStatus')">
+    <van-cell is-link :title="t('optionStatus')" @click="show.status = true" />
+  </demo-block>
 
-    <van-action-sheet
-      v-model:show="show.description"
-      :actions="actionsWithDescription"
-      close-on-click-action
-      :cancel-text="t('cancel')"
-      :description="t('description')"
-    />
+  <demo-block card :title="t('customPanel')">
+    <van-cell is-link :title="t('customPanel')" @click="show.title = true" />
+  </demo-block>
 
-    <van-action-sheet
-      v-model:show="show.status"
-      close-on-click-action
-      :actions="statusActions"
-      :cancel-text="t('cancel')"
-    />
+  <van-action-sheet
+    v-model:show="show.basic"
+    :actions="simpleActions"
+    @select="onSelect"
+  />
 
-    <van-action-sheet v-model:show="show.title" :title="t('title')">
-      <div class="demo-action-sheet-content">{{ t('content') }}</div>
-    </van-action-sheet>
-  </demo-section>
+  <van-action-sheet
+    v-model:show="show.cancel"
+    :actions="simpleActions"
+    close-on-click-action
+    :cancel-text="t('cancel')"
+    @cancel="onCancel"
+  />
+
+  <van-action-sheet
+    v-model:show="show.description"
+    :actions="actionsWithDescription"
+    close-on-click-action
+    :cancel-text="t('cancel')"
+    :description="t('description')"
+  />
+
+  <van-action-sheet
+    v-model:show="show.status"
+    close-on-click-action
+    :actions="statusActions"
+    :cancel-text="t('cancel')"
+  />
+
+  <van-action-sheet v-model:show="show.title" :title="t('title')">
+    <div class="demo-action-sheet-content">{{ t('content') }}</div>
+  </van-action-sheet>
 </template>
 
 <script>
diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue
index a9eed0f0a..308ae2733 100644
--- a/src/address-edit/demo/index.vue
+++ b/src/address-edit/demo/index.vue
@@ -1,20 +1,18 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-address-edit
-        :area-list="areaList"
-        show-postal
-        show-delete
-        show-set-default
-        show-search-result
-        :search-result="searchResult"
-        :area-columns-placeholder="t('areaColumnsPlaceholder')"
-        @save="onSave"
-        @delete="onDelete"
-        @change-detail="onChangeDetail"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('basicUsage')">
+    <van-address-edit
+      :area-list="areaList"
+      show-postal
+      show-delete
+      show-set-default
+      show-search-result
+      :search-result="searchResult"
+      :area-columns-placeholder="t('areaColumnsPlaceholder')"
+      @save="onSave"
+      @delete="onDelete"
+      @change-detail="onChangeDetail"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue
index 60d74b2f6..3a8826e65 100644
--- a/src/address-list/demo/index.vue
+++ b/src/address-list/demo/index.vue
@@ -1,17 +1,15 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-address-list
-        v-model="chosenAddressId"
-        :list="t('list')"
-        :disabled-list="t('disabledList')"
-        :disabled-text="t('disabledText')"
-        :default-tag-text="t('defaultTagText')"
-        @add="onAdd"
-        @edit="onEdit"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('basicUsage')">
+    <van-address-list
+      v-model="chosenAddressId"
+      :list="t('list')"
+      :disabled-list="t('disabledList')"
+      :disabled-text="t('disabledText')"
+      :default-tag-text="t('defaultTagText')"
+      @add="onAdd"
+      @edit="onEdit"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue
index d88fc3e12..1d8d89a8d 100644
--- a/src/area/demo/index.vue
+++ b/src/area/demo/index.vue
@@ -1,29 +1,23 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-area :title="t('title')" :area-list="t('areaList')" />
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-area :title="t('title')" :area-list="t('areaList')" />
+  </demo-block>
 
-    <demo-block card :title="t('title2')">
-      <van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
-    </demo-block>
+  <demo-block card :title="t('title2')">
+    <van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
+  </demo-block>
 
-    <demo-block card :title="t('title3')">
-      <van-area
-        :title="t('title')"
-        :area-list="t('areaList')"
-        :columns-num="2"
-      />
-    </demo-block>
+  <demo-block card :title="t('title3')">
+    <van-area :title="t('title')" :area-list="t('areaList')" :columns-num="2" />
+  </demo-block>
 
-    <demo-block card :title="t('title4')">
-      <van-area
-        :title="t('title')"
-        :area-list="t('areaList')"
-        :columns-placeholder="t('columnsPlaceholder')"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block card :title="t('title4')">
+    <van-area
+      :title="t('title')"
+      :area-list="t('areaList')"
+      :columns-placeholder="t('columnsPlaceholder')"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index c7558afc4..235008996 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -1,36 +1,34 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-badge content="5">
-        <div class="child" />
-      </van-badge>
-      <van-badge dot>
-        <div class="child" />
-      </van-badge>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-badge content="5">
+      <div class="child" />
+    </van-badge>
+    <van-badge dot>
+      <div class="child" />
+    </van-badge>
+  </demo-block>
 
-    <demo-block :title="t('max')">
-      <van-badge content="20" max="9">
-        <div class="child" />
-      </van-badge>
-      <van-badge content="200" max="99">
-        <div class="child" />
-      </van-badge>
-    </demo-block>
+  <demo-block :title="t('max')">
+    <van-badge content="20" max="9">
+      <div class="child" />
+    </van-badge>
+    <van-badge content="200" max="99">
+      <div class="child" />
+    </van-badge>
+  </demo-block>
 
-    <demo-block :title="t('customColor')">
-      <van-badge content="5" :color="BLUE">
-        <div class="child" />
-      </van-badge>
-      <van-badge dot :color="BLUE">
-        <div class="child" />
-      </van-badge>
-    </demo-block>
+  <demo-block :title="t('customColor')">
+    <van-badge content="5" :color="BLUE">
+      <div class="child" />
+    </van-badge>
+    <van-badge dot :color="BLUE">
+      <div class="child" />
+    </van-badge>
+  </demo-block>
 
-    <demo-block :title="t('standalone')">
-      <van-badge content="200" max="99" style="margin-left: 16px;" />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('standalone')">
+    <van-badge content="200" max="99" style="margin-left: 16px;" />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 7e44aab2c..8b59cd48b 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -1,81 +1,75 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('type')">
-      <div class="demo-button-row">
-        <van-button type="primary">{{ t('primary') }}</van-button>
-        <van-button type="success">{{ t('success') }}</van-button>
-        <van-button type="default">{{ t('default') }}</van-button>
-      </div>
-      <van-button type="danger">{{ t('danger') }}</van-button>
-      <van-button type="warning">{{ t('warning') }}</van-button>
-    </demo-block>
+  <demo-block :title="t('type')">
+    <div class="demo-button-row">
+      <van-button type="primary">{{ t('primary') }}</van-button>
+      <van-button type="success">{{ t('success') }}</van-button>
+      <van-button type="default">{{ t('default') }}</van-button>
+    </div>
+    <van-button type="danger">{{ t('danger') }}</van-button>
+    <van-button type="warning">{{ t('warning') }}</van-button>
+  </demo-block>
 
-    <demo-block :title="t('plain')">
-      <van-button plain type="primary" :text="t('plain')" />
-      <van-button plain type="success" :text="t('plain')" />
-    </demo-block>
+  <demo-block :title="t('plain')">
+    <van-button plain type="primary" :text="t('plain')" />
+    <van-button plain type="success" :text="t('plain')" />
+  </demo-block>
 
-    <demo-block :title="t('hairline')">
-      <van-button plain hairline type="primary" :text="t('hairlineButton')" />
-      <van-button plain hairline type="success" :text="t('hairlineButton')" />
-    </demo-block>
+  <demo-block :title="t('hairline')">
+    <van-button plain hairline type="primary" :text="t('hairlineButton')" />
+    <van-button plain hairline type="success" :text="t('hairlineButton')" />
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-button disabled type="primary" :text="t('disabled')" />
-      <van-button disabled type="success" :text="t('disabled')" />
-    </demo-block>
+  <demo-block :title="t('disabled')">
+    <van-button disabled type="primary" :text="t('disabled')" />
+    <van-button disabled type="success" :text="t('disabled')" />
+  </demo-block>
 
-    <demo-block :title="t('loadingStatus')">
-      <van-button loading type="primary" />
-      <van-button loading type="primary" loading-type="spinner" />
-      <van-button loading :loading-text="t('loadingText')" type="success" />
-    </demo-block>
+  <demo-block :title="t('loadingStatus')">
+    <van-button loading type="primary" />
+    <van-button loading type="primary" loading-type="spinner" />
+    <van-button loading :loading-text="t('loadingText')" type="success" />
+  </demo-block>
 
-    <demo-block :title="t('shape')">
-      <van-button type="primary" square :text="t('square')" />
-      <van-button type="success" round :text="t('round')" />
-    </demo-block>
+  <demo-block :title="t('shape')">
+    <van-button type="primary" square :text="t('square')" />
+    <van-button type="success" round :text="t('round')" />
+  </demo-block>
 
-    <demo-block :title="t('icon')">
-      <van-button type="primary" icon="plus" />
-      <van-button type="primary" icon="plus" :text="t('button')" />
-      <van-button
-        plain
-        type="primary"
-        icon="https://img.yzcdn.cn/vant/user-active.png"
-        :text="t('button')"
-      />
-    </demo-block>
+  <demo-block :title="t('icon')">
+    <van-button type="primary" icon="plus" />
+    <van-button type="primary" icon="plus" :text="t('button')" />
+    <van-button
+      plain
+      type="primary"
+      icon="https://img.yzcdn.cn/vant/user-active.png"
+      :text="t('button')"
+    />
+  </demo-block>
 
-    <demo-block :title="t('size')">
-      <van-button type="primary" size="large">{{ t('large') }}</van-button>
-      <van-button type="primary" size="normal">{{ t('normal') }}</van-button>
-      <van-button type="primary" size="small">{{ t('small') }}</van-button>
-      <van-button type="primary" size="mini">{{ t('mini') }}</van-button>
-    </demo-block>
+  <demo-block :title="t('size')">
+    <van-button type="primary" size="large">{{ t('large') }}</van-button>
+    <van-button type="primary" size="normal">{{ t('normal') }}</van-button>
+    <van-button type="primary" size="small">{{ t('small') }}</van-button>
+    <van-button type="primary" size="mini">{{ t('mini') }}</van-button>
+  </demo-block>
 
-    <demo-block :title="t('blockElement')">
-      <van-button type="primary" block>{{ t('blockElement') }}</van-button>
-    </demo-block>
+  <demo-block :title="t('blockElement')">
+    <van-button type="primary" block>{{ t('blockElement') }}</van-button>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('router')">
-      <van-button
-        :text="t('urlRoute')"
-        type="primary"
-        url="/vant/mobile.html"
-      />
-      <van-button :text="t('vueRoute')" type="primary" to="index" />
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('router')">
+    <van-button :text="t('urlRoute')" type="primary" url="/vant/mobile.html" />
+    <van-button :text="t('vueRoute')" type="primary" to="index" />
+  </demo-block>
 
-    <demo-block :title="t('customColor')">
-      <van-button color="#7232dd" :text="t('pure')" />
-      <van-button plain color="#7232dd" :text="t('pure')" />
-      <van-button
-        color="linear-gradient(to right, #ff6034, #ee0a24)"
-        :text="t('gradient')"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('customColor')">
+    <van-button color="#7232dd" :text="t('pure')" />
+    <van-button plain color="#7232dd" :text="t('pure')" />
+    <van-button
+      color="linear-gradient(to right, #ff6034, #ee0a24)"
+      :text="t('gradient')"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index 1dfb3476c..752478427 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -1,123 +1,121 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell
-        is-link
-        :title="t('selectSingle')"
-        :value="formatFullDate(date.selectSingle)"
-        @click="show('single', 'selectSingle')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('selectMultiple')"
-        :value="formatMultiple(date.selectMultiple)"
-        @click="show('multiple', 'selectMultiple')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('selectRange')"
-        :value="formatRange(date.selectRange)"
-        @click="show('range', 'selectRange')"
-      />
-    </demo-block>
-
-    <demo-block card :title="t('quickSelect')">
-      <van-cell
-        is-link
-        :title="t('selectSingle')"
-        :value="formatFullDate(date.quickSelect1)"
-        @click="show('single', 'quickSelect1')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('selectRange')"
-        :value="formatRange(date.quickSelect2)"
-        @click="show('range', 'quickSelect2')"
-      />
-    </demo-block>
-
-    <demo-block card :title="t('customCalendar')">
-      <van-cell
-        is-link
-        :title="t('customColor')"
-        :value="formatRange(date.customColor)"
-        @click="show('range', 'customColor')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('customRange')"
-        :value="formatFullDate(date.customRange)"
-        @click="show('single', 'customRange')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('customConfirm')"
-        :value="formatRange(date.customConfirm)"
-        @click="show('range', 'customConfirm')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('customDayText')"
-        :value="formatRange(date.customDayText)"
-        @click="show('range', 'customDayText')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('customPosition')"
-        :value="formatFullDate(date.customPosition)"
-        @click="show('single', 'customPosition')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('maxRange')"
-        :value="formatRange(date.maxRange)"
-        @click="show('range', 'maxRange')"
-      />
-
-      <van-cell
-        is-link
-        :title="t('firstDayOfWeek')"
-        @click="show('single', 'firstDayOfWeek')"
-      />
-    </demo-block>
-
-    <demo-block card :title="t('tiledDisplay')">
-      <van-calendar
-        :title="t('calendar')"
-        :poppable="false"
-        :show-confirm="false"
-        :min-date="tiledMinDate"
-        :max-date="tiledMaxDate"
-        :default-date="tiledMinDate"
-        :style="{ height: '500px' }"
-      />
-    </demo-block>
-
-    <van-calendar
-      v-model:show="showCalendar"
-      :type="type"
-      :color="color"
-      :round="round"
-      :position="position"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :max-range="maxRange"
-      :formatter="formatter"
-      :show-confirm="showConfirm"
-      :confirm-text="confirmText"
-      :confirm-disabled-text="confirmDisabledText"
-      :first-day-of-week="firstDayOfWeek"
-      @confirm="onConfirm"
+  <demo-block card :title="t('basicUsage')">
+    <van-cell
+      is-link
+      :title="t('selectSingle')"
+      :value="formatFullDate(date.selectSingle)"
+      @click="show('single', 'selectSingle')"
     />
-  </demo-section>
+
+    <van-cell
+      is-link
+      :title="t('selectMultiple')"
+      :value="formatMultiple(date.selectMultiple)"
+      @click="show('multiple', 'selectMultiple')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('selectRange')"
+      :value="formatRange(date.selectRange)"
+      @click="show('range', 'selectRange')"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('quickSelect')">
+    <van-cell
+      is-link
+      :title="t('selectSingle')"
+      :value="formatFullDate(date.quickSelect1)"
+      @click="show('single', 'quickSelect1')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('selectRange')"
+      :value="formatRange(date.quickSelect2)"
+      @click="show('range', 'quickSelect2')"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('customCalendar')">
+    <van-cell
+      is-link
+      :title="t('customColor')"
+      :value="formatRange(date.customColor)"
+      @click="show('range', 'customColor')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customRange')"
+      :value="formatFullDate(date.customRange)"
+      @click="show('single', 'customRange')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customConfirm')"
+      :value="formatRange(date.customConfirm)"
+      @click="show('range', 'customConfirm')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customDayText')"
+      :value="formatRange(date.customDayText)"
+      @click="show('range', 'customDayText')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('customPosition')"
+      :value="formatFullDate(date.customPosition)"
+      @click="show('single', 'customPosition')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('maxRange')"
+      :value="formatRange(date.maxRange)"
+      @click="show('range', 'maxRange')"
+    />
+
+    <van-cell
+      is-link
+      :title="t('firstDayOfWeek')"
+      @click="show('single', 'firstDayOfWeek')"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('tiledDisplay')">
+    <van-calendar
+      :title="t('calendar')"
+      :poppable="false"
+      :show-confirm="false"
+      :min-date="tiledMinDate"
+      :max-date="tiledMaxDate"
+      :default-date="tiledMinDate"
+      :style="{ height: '500px' }"
+    />
+  </demo-block>
+
+  <van-calendar
+    v-model:show="showCalendar"
+    :type="type"
+    :color="color"
+    :round="round"
+    :position="position"
+    :min-date="minDate"
+    :max-date="maxDate"
+    :max-range="maxRange"
+    :formatter="formatter"
+    :show-confirm="showConfirm"
+    :confirm-text="confirmText"
+    :confirm-disabled-text="confirmDisabledText"
+    :first-day-of-week="firstDayOfWeek"
+    @confirm="onConfirm"
+  />
 </template>
 
 <script>
diff --git a/src/card/demo/index.vue b/src/card/demo/index.vue
index 010f84f49..f450cbaba 100644
--- a/src/card/demo/index.vue
+++ b/src/card/demo/index.vue
@@ -1,59 +1,57 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-card
-        num="2"
-        price="2.00"
-        :desc="t('desc')"
-        :title="t('title')"
-        :thumb="imageURL"
-      />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-card
+      num="2"
+      price="2.00"
+      :desc="t('desc')"
+      :title="t('title')"
+      :thumb="imageURL"
+    />
+  </demo-block>
 
-    <demo-block :title="t('discountInfo')">
-      <van-card
-        num="2"
-        price="2.00"
-        origin-price="10.00"
-        :tag="t('tag')"
-        :desc="t('desc')"
-        :title="t('title')"
-        :thumb="imageURL"
-      />
-    </demo-block>
+  <demo-block :title="t('discountInfo')">
+    <van-card
+      num="2"
+      price="2.00"
+      origin-price="10.00"
+      :tag="t('tag')"
+      :desc="t('desc')"
+      :title="t('title')"
+      :thumb="imageURL"
+    />
+  </demo-block>
 
-    <demo-block :title="t('customContent')">
-      <van-card
-        num="2"
-        price="2.00"
-        :desc="t('desc')"
-        :title="t('title')"
-        :thumb="imageURL"
-      >
-        <template #tags>
-          <div>
-            <van-tag plain type="danger" style="margin-right: 5px;">
-              标签
-            </van-tag>
-            <van-tag plain type="danger">
-              标签
-            </van-tag>
-          </div>
-        </template>
+  <demo-block :title="t('customContent')">
+    <van-card
+      num="2"
+      price="2.00"
+      :desc="t('desc')"
+      :title="t('title')"
+      :thumb="imageURL"
+    >
+      <template #tags>
+        <div>
+          <van-tag plain type="danger" style="margin-right: 5px;">
+            标签
+          </van-tag>
+          <van-tag plain type="danger">
+            标签
+          </van-tag>
+        </div>
+      </template>
 
-        <template #footer>
-          <div>
-            <van-button round size="mini">
-              {{ t('button') }}
-            </van-button>
-            <van-button round size="mini">
-              {{ t('button') }}
-            </van-button>
-          </div>
-        </template>
-      </van-card>
-    </demo-block>
-  </demo-section>
+      <template #footer>
+        <div>
+          <van-button round size="mini">
+            {{ t('button') }}
+          </van-button>
+          <van-button round size="mini">
+            {{ t('button') }}
+          </van-button>
+        </div>
+      </template>
+    </van-card>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue
index b1462a942..77678dce1 100644
--- a/src/cell/demo/index.vue
+++ b/src/cell/demo/index.vue
@@ -1,79 +1,77 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-cell-group>
-        <van-cell :title="t('cell')" :value="t('content')" />
-        <van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
-      </van-cell-group>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-cell-group>
+      <van-cell :title="t('cell')" :value="t('content')" />
+      <van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
+    </van-cell-group>
+  </demo-block>
 
-    <demo-block :title="t('largeSize')">
-      <van-cell :title="t('cell')" :value="t('content')" size="large" />
-      <van-cell
-        :title="t('cell')"
-        :value="t('content')"
-        size="large"
-        :label="t('desc')"
-      />
-    </demo-block>
+  <demo-block :title="t('largeSize')">
+    <van-cell :title="t('cell')" :value="t('content')" size="large" />
+    <van-cell
+      :title="t('cell')"
+      :value="t('content')"
+      size="large"
+      :label="t('desc')"
+    />
+  </demo-block>
 
-    <demo-block :title="t('showIcon')">
-      <van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
-    </demo-block>
+  <demo-block :title="t('showIcon')">
+    <van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('valueOnly')">
-      <van-cell :value="t('content')" />
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('valueOnly')">
+    <van-cell :value="t('content')" />
+  </demo-block>
 
-    <demo-block :title="t('showArrow')">
-      <van-cell :title="t('cell')" is-link />
-      <van-cell :title="t('cell')" is-link :value="t('content')" />
-      <van-cell
-        :title="t('cell')"
-        is-link
-        arrow-direction="down"
-        :value="t('content')"
-      />
-    </demo-block>
+  <demo-block :title="t('showArrow')">
+    <van-cell :title="t('cell')" is-link />
+    <van-cell :title="t('cell')" is-link :value="t('content')" />
+    <van-cell
+      :title="t('cell')"
+      is-link
+      arrow-direction="down"
+      :value="t('content')"
+    />
+  </demo-block>
 
-    <demo-block :title="t('router')">
-      <van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
-      <van-cell :title="t('vueRoute')" is-link to="index" />
-    </demo-block>
+  <demo-block :title="t('router')">
+    <van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
+    <van-cell :title="t('vueRoute')" is-link to="index" />
+  </demo-block>
 
-    <demo-block :title="t('groupTitle')">
-      <van-cell-group :title="`${t('group')} 1`">
-        <van-cell :title="t('cell')" :value="t('content')" />
-      </van-cell-group>
-      <van-cell-group :title="`${t('group')} 2`">
-        <van-cell :title="t('cell')" :value="t('content')" />
-      </van-cell-group>
-    </demo-block>
+  <demo-block :title="t('groupTitle')">
+    <van-cell-group :title="`${t('group')} 1`">
+      <van-cell :title="t('cell')" :value="t('content')" />
+    </van-cell-group>
+    <van-cell-group :title="`${t('group')} 2`">
+      <van-cell :title="t('cell')" :value="t('content')" />
+    </van-cell-group>
+  </demo-block>
 
-    <demo-block :title="t('useSlots')">
-      <van-cell :value="t('content')" is-link>
-        <template #title>
-          <span class="custom-title">{{ t('cell') }}</span>
-          <van-tag type="danger">{{ t('tag') }}</van-tag>
-        </template>
-      </van-cell>
+  <demo-block :title="t('useSlots')">
+    <van-cell :value="t('content')" is-link>
+      <template #title>
+        <span class="custom-title">{{ t('cell') }}</span>
+        <van-tag type="danger">{{ t('tag') }}</van-tag>
+      </template>
+    </van-cell>
 
-      <van-cell icon="shop-o" :title="t('cell')">
-        <template #right-icon>
-          <van-icon name="search" class="search-icon" />
-        </template>
-      </van-cell>
-    </demo-block>
+    <van-cell icon="shop-o" :title="t('cell')">
+      <template #right-icon>
+        <van-icon name="search" class="search-icon" />
+      </template>
+    </van-cell>
+  </demo-block>
 
-    <demo-block :title="t('verticalCenter')">
-      <van-cell
-        center
-        :title="t('cell')"
-        :value="t('content')"
-        :label="t('desc')"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('verticalCenter')">
+    <van-cell
+      center
+      :title="t('cell')"
+      :value="t('content')"
+      :label="t('desc')"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index dbbfd1611..b61467be0 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -1,108 +1,106 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-checkbox :model-value="false" disabled>
-        {{ t('checkbox') }}
-      </van-checkbox>
-      <van-checkbox :model-value="true" disabled>
-        {{ t('checkbox') }}
-      </van-checkbox>
-    </demo-block>
+  <demo-block :title="t('disabled')">
+    <van-checkbox :model-value="false" disabled>
+      {{ t('checkbox') }}
+    </van-checkbox>
+    <van-checkbox :model-value="true" disabled>
+      {{ t('checkbox') }}
+    </van-checkbox>
+  </demo-block>
 
-    <demo-block :title="t('customShape')">
-      <van-checkbox v-model="checkboxShape" shape="square">
-        {{ t('customColor') }}
-      </van-checkbox>
-    </demo-block>
+  <demo-block :title="t('customShape')">
+    <van-checkbox v-model="checkboxShape" shape="square">
+      {{ t('customColor') }}
+    </van-checkbox>
+  </demo-block>
 
-    <demo-block :title="t('customColor')">
-      <van-checkbox v-model="checkbox2" checked-color="#07c160">
-        {{ t('customColor') }}
-      </van-checkbox>
-    </demo-block>
+  <demo-block :title="t('customColor')">
+    <van-checkbox v-model="checkbox2" checked-color="#07c160">
+      {{ t('customColor') }}
+    </van-checkbox>
+  </demo-block>
 
-    <demo-block :title="t('customIconSize')">
-      <van-checkbox v-model="checboxIcon" icon-size="24px">
-        {{ t('customIconSize') }}
-      </van-checkbox>
-    </demo-block>
+  <demo-block :title="t('customIconSize')">
+    <van-checkbox v-model="checboxIcon" icon-size="24px">
+      {{ t('customIconSize') }}
+    </van-checkbox>
+  </demo-block>
 
-    <demo-block :title="t('customIcon')">
-      <van-checkbox v-model="checkbox3">
-        {{ t('customIcon') }}
-        <template #icon="{ checked }">
-          <img :src="checked ? activeIcon : inactiveIcon" />
-        </template>
-      </van-checkbox>
-    </demo-block>
+  <demo-block :title="t('customIcon')">
+    <van-checkbox v-model="checkbox3">
+      {{ t('customIcon') }}
+      <template #icon="{ checked }">
+        <img :src="checked ? activeIcon : inactiveIcon" />
+      </template>
+    </van-checkbox>
+  </demo-block>
 
-    <demo-block :title="t('disableLabel')">
-      <van-checkbox v-model="checkboxLabel" label-disabled>
-        {{ t('checkbox') }}
-      </van-checkbox>
-    </demo-block>
+  <demo-block :title="t('disableLabel')">
+    <van-checkbox v-model="checkboxLabel" label-disabled>
+      {{ t('checkbox') }}
+    </van-checkbox>
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-checkbox-group v-model="result">
-        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-      </van-checkbox-group>
-    </demo-block>
+  <demo-block :title="t('title3')">
+    <van-checkbox-group v-model="result">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+    </van-checkbox-group>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('horizontal')">
-      <van-checkbox-group v-model="horizontalResult" direction="horizontal">
-        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-      </van-checkbox-group>
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('horizontal')">
+    <van-checkbox-group v-model="horizontalResult" direction="horizontal">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+    </van-checkbox-group>
+  </demo-block>
 
-    <demo-block :title="t('title4')">
-      <van-checkbox-group v-model="result2" :max="2">
-        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-        <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
-      </van-checkbox-group>
-    </demo-block>
+  <demo-block :title="t('title4')">
+    <van-checkbox-group v-model="result2" :max="2">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+      <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
+    </van-checkbox-group>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('toggleAll')">
-      <van-checkbox-group v-model="checkAllResult" ref="group">
-        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
-        <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
-      </van-checkbox-group>
+  <demo-block v-if="!isWeapp" :title="t('toggleAll')">
+    <van-checkbox-group v-model="checkAllResult" ref="group">
+      <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+      <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
+    </van-checkbox-group>
 
-      <div class="demo-checkbox-buttons">
-        <van-button type="primary" @click="checkAll">
-          {{ t('checkAll') }}
-        </van-button>
-        <van-button type="primary" @click="toggleAll">
-          {{ t('inverse') }}
-        </van-button>
-      </div>
-    </demo-block>
+    <div class="demo-checkbox-buttons">
+      <van-button type="primary" @click="checkAll">
+        {{ t('checkAll') }}
+      </van-button>
+      <van-button type="primary" @click="toggleAll">
+        {{ t('inverse') }}
+      </van-button>
+    </div>
+  </demo-block>
 
-    <demo-block :title="t('title5')">
-      <van-checkbox-group v-model="result3">
-        <van-cell-group>
-          <van-cell
-            v-for="(item, index) in list"
-            clickable
-            :key="index"
-            :title="`${t('checkbox')} ${item}`"
-            @click="toggle(index)"
-          >
-            <template #right-icon>
-              <van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
-            </template>
-          </van-cell>
-        </van-cell-group>
-      </van-checkbox-group>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('title5')">
+    <van-checkbox-group v-model="result3">
+      <van-cell-group>
+        <van-cell
+          v-for="(item, index) in list"
+          clickable
+          :key="index"
+          :title="`${t('checkbox')} ${item}`"
+          @click="toggle(index)"
+        >
+          <template #right-icon>
+            <van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-checkbox-group>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index 39d26ebae..16597c39b 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -1,72 +1,70 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-circle
-        v-model:current-rate="currentRate1"
-        :rate="rate"
-        :speed="100"
-        :text="currentRate1.toFixed(0) + '%'"
-      />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-circle
+      v-model:current-rate="currentRate1"
+      :rate="rate"
+      :speed="100"
+      :text="currentRate1.toFixed(0) + '%'"
+    />
+  </demo-block>
 
-    <demo-block :title="t('customStyle')">
-      <van-circle
-        v-model:current-rate="currentRate3"
-        :rate="rate"
-        :speed="100"
-        :stroke-width="60"
-        :text="t('customWidth')"
-      />
+  <demo-block :title="t('customStyle')">
+    <van-circle
+      v-model:current-rate="currentRate3"
+      :rate="rate"
+      :speed="100"
+      :stroke-width="60"
+      :text="t('customWidth')"
+    />
 
-      <van-circle
-        v-model:current-rate="currentRate3"
-        color="#ee0a24"
-        :rate="rate"
-        layer-color="#ebedf0"
-        :speed="100"
-        :text="t('customColor')"
-      />
+    <van-circle
+      v-model:current-rate="currentRate3"
+      color="#ee0a24"
+      :rate="rate"
+      layer-color="#ebedf0"
+      :speed="100"
+      :text="t('customColor')"
+    />
 
-      <van-circle
-        v-model:current-rate="currentRate2"
-        :rate="rate"
-        :speed="100"
-        :color="gradientColor"
-        :text="t('gradient')"
-      />
+    <van-circle
+      v-model:current-rate="currentRate2"
+      :rate="rate"
+      :speed="100"
+      :color="gradientColor"
+      :text="t('gradient')"
+    />
 
-      <van-circle
-        v-model:current-rate="currentRate4"
-        color="#07c160"
-        :rate="rate"
-        :speed="100"
-        :clockwise="false"
-        :text="t('counterClockwise')"
-        style="margin-top: 15px;"
-      />
+    <van-circle
+      v-model:current-rate="currentRate4"
+      color="#07c160"
+      :rate="rate"
+      :speed="100"
+      :clockwise="false"
+      :text="t('counterClockwise')"
+      style="margin-top: 15px;"
+    />
 
-      <van-circle
-        v-model:current-rate="currentRate4"
-        color="#7232dd"
-        :rate="rate"
-        :speed="100"
-        size="120px"
-        :clockwise="false"
-        :text="t('customSize')"
-        style="margin-top: 15px;"
-      />
-    </demo-block>
+    <van-circle
+      v-model:current-rate="currentRate4"
+      color="#7232dd"
+      :rate="rate"
+      :speed="100"
+      size="120px"
+      :clockwise="false"
+      :text="t('customSize')"
+      style="margin-top: 15px;"
+    />
+  </demo-block>
 
-    <div style="margin-top: 15px;">
-      <van-button :text="t('add')" type="primary" size="small" @click="add" />
-      <van-button
-        :text="t('decrease')"
-        type="danger"
-        size="small"
-        @click="reduce"
-      />
-    </div>
-  </demo-section>
+  <div style="margin-top: 15px;">
+    <van-button :text="t('add')" type="primary" size="small" @click="add" />
+    <van-button
+      :text="t('decrease')"
+      type="danger"
+      size="small"
+      @click="reduce"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue
index 041bce8e1..991b83d43 100644
--- a/src/col/demo/index.vue
+++ b/src/col/demo/index.vue
@@ -1,60 +1,58 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-row>
-        <van-col span="8">span: 8</van-col>
-        <van-col span="8">span: 8</van-col>
-        <van-col span="8">span: 8</van-col>
-      </van-row>
+  <demo-block :title="t('basicUsage')">
+    <van-row>
+      <van-col span="8">span: 8</van-col>
+      <van-col span="8">span: 8</van-col>
+      <van-col span="8">span: 8</van-col>
+    </van-row>
 
-      <van-row>
-        <van-col span="4">span: 4</van-col>
-        <van-col span="10" offset="4">
-          offset: 4, span: 10
-        </van-col>
-      </van-row>
+    <van-row>
+      <van-col span="4">span: 4</van-col>
+      <van-col span="10" offset="4">
+        offset: 4, span: 10
+      </van-col>
+    </van-row>
 
-      <van-row>
-        <van-col offset="12" span="12">
-          offset: 12, span: 12
-        </van-col>
-      </van-row>
-    </demo-block>
+    <van-row>
+      <van-col offset="12" span="12">
+        offset: 12, span: 12
+      </van-col>
+    </van-row>
+  </demo-block>
 
-    <demo-block :title="t('title2')">
-      <van-row gutter="20">
-        <van-col span="8">span: 8</van-col>
-        <van-col span="8">span: 8</van-col>
-        <van-col span="8">span: 8</van-col>
-      </van-row>
-    </demo-block>
+  <demo-block :title="t('title2')">
+    <van-row gutter="20">
+      <van-col span="8">span: 8</van-col>
+      <van-col span="8">span: 8</van-col>
+      <van-col span="8">span: 8</van-col>
+    </van-row>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('justify')">
-      <van-row justify="center">
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-      </van-row>
+  <demo-block v-if="!isWeapp" :title="t('justify')">
+    <van-row justify="center">
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+    </van-row>
 
-      <van-row justify="end">
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-      </van-row>
+    <van-row justify="end">
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+    </van-row>
 
-      <van-row justify="space-between">
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-      </van-row>
+    <van-row justify="space-between">
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+    </van-row>
 
-      <van-row justify="space-around">
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-        <van-col span="6">span: 6</van-col>
-      </van-row>
-    </demo-block>
-  </demo-section>
+    <van-row justify="space-around">
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+      <van-col span="6">span: 6</van-col>
+    </van-row>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
index ba437398b..d2efc3773 100644
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@@ -1,65 +1,63 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-collapse v-model="active1">
-        <van-collapse-item :title="t('title') + 1">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 2">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3">
-          {{ t('text') }}
-        </van-collapse-item>
-      </van-collapse>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-collapse v-model="active1">
+      <van-collapse-item :title="t('title') + 1">
+        {{ t('text') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 2">
+        {{ t('text') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 3">
+        {{ t('text') }}
+      </van-collapse-item>
+    </van-collapse>
+  </demo-block>
 
-    <demo-block :title="t('accordion')">
-      <van-collapse v-model="active2" accordion>
-        <van-collapse-item :title="t('title') + 1">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 2">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3">
-          {{ t('text') }}
-        </van-collapse-item>
-      </van-collapse>
-    </demo-block>
+  <demo-block :title="t('accordion')">
+    <van-collapse v-model="active2" accordion>
+      <van-collapse-item :title="t('title') + 1">
+        {{ t('text') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 2">
+        {{ t('text') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 3">
+        {{ t('text') }}
+      </van-collapse-item>
+    </van-collapse>
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-collapse v-model="active3">
-        <van-collapse-item :title="t('title') + 1">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 2" disabled>
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3" disabled>
-          {{ t('text') }}
-        </van-collapse-item>
-      </van-collapse>
-    </demo-block>
+  <demo-block :title="t('disabled')">
+    <van-collapse v-model="active3">
+      <van-collapse-item :title="t('title') + 1">
+        {{ t('text') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 2" disabled>
+        {{ t('text') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 3" disabled>
+        {{ t('text') }}
+      </van-collapse-item>
+    </van-collapse>
+  </demo-block>
 
-    <demo-block :title="t('titleSlot')">
-      <van-collapse v-model="active4">
-        <van-collapse-item>
-          <template #title>
-            {{ t('title') + 1 }}<van-icon name="question-o" />
-          </template>
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item
-          :title="t('title') + 2"
-          :value="t('content')"
-          icon="shop-o"
-        >
-          {{ t('text') }}
-        </van-collapse-item>
-      </van-collapse>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('titleSlot')">
+    <van-collapse v-model="active4">
+      <van-collapse-item>
+        <template #title>
+          {{ t('title') + 1 }}<van-icon name="question-o" />
+        </template>
+        {{ t('text') }}
+      </van-collapse-item>
+      <van-collapse-item
+        :title="t('title') + 2"
+        :value="t('content')"
+        icon="shop-o"
+      >
+        {{ t('text') }}
+      </van-collapse-item>
+    </van-collapse>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue
index e4c52e05f..5ac4a7233 100644
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@@ -1,45 +1,43 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-contact-card
-        :type="cardType"
-        :name="currentContact.name"
-        :tel="currentContact.tel"
-        @click="showList = true"
+  <demo-block :title="t('basicUsage')">
+    <van-contact-card
+      :type="cardType"
+      :name="currentContact.name"
+      :tel="currentContact.tel"
+      @click="showList = true"
+    />
+
+    <van-popup v-model:show="showList" position="bottom" :lazy-render="false">
+      <van-contact-list
+        v-model="chosenContactId"
+        :list="list"
+        :default-tag-text="t('defaultTagText')"
+        @add="onAdd"
+        @edit="onEdit"
+        @select="onSelect"
       />
+    </van-popup>
 
-      <van-popup v-model:show="showList" position="bottom" :lazy-render="false">
-        <van-contact-list
-          v-model="chosenContactId"
-          :list="list"
-          :default-tag-text="t('defaultTagText')"
-          @add="onAdd"
-          @edit="onEdit"
-          @select="onSelect"
-        />
-      </van-popup>
-
-      <van-popup v-model:show="showEdit" position="bottom" :lazy-render="false">
-        <van-contact-edit
-          show-set-default
-          :set-default-label="t('defaultLabel')"
-          :contact-info="editingContact"
-          :is-edit="isEdit"
-          @save="onSave"
-          @delete="onDelete"
-        />
-      </van-popup>
-    </demo-block>
-
-    <demo-block :title="t('uneditable')">
-      <van-contact-card
-        type="edit"
-        :name="mockContact.name"
-        :tel="mockContact.tel"
-        :editable="false"
+    <van-popup v-model:show="showEdit" position="bottom" :lazy-render="false">
+      <van-contact-edit
+        show-set-default
+        :set-default-label="t('defaultLabel')"
+        :contact-info="editingContact"
+        :is-edit="isEdit"
+        @save="onSave"
+        @delete="onDelete"
       />
-    </demo-block>
-  </demo-section>
+    </van-popup>
+  </demo-block>
+
+  <demo-block :title="t('uneditable')">
+    <van-contact-card
+      type="edit"
+      :name="mockContact.name"
+      :tel="mockContact.tel"
+      :editable="false"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index 5b583dbc8..d60e7a821 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -1,49 +1,43 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-count-down :time="time" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-count-down :time="time" />
+  </demo-block>
 
-    <demo-block :title="t('customFormat')">
-      <van-count-down :time="time" :format="t('formatWithDay')" />
-    </demo-block>
+  <demo-block :title="t('customFormat')">
+    <van-count-down :time="time" :format="t('formatWithDay')" />
+  </demo-block>
 
-    <demo-block :title="t('millisecond')">
-      <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
-    </demo-block>
+  <demo-block :title="t('millisecond')">
+    <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
+  </demo-block>
 
-    <demo-block :title="t('customStyle')">
-      <van-count-down :time="time">
-        <template #default="currentTime">
-          <span class="block">{{ currentTime.hours }}</span>
-          <span class="colon">:</span>
-          <span class="block">{{ currentTime.minutes }}</span>
-          <span class="colon">:</span>
-          <span class="block">{{ currentTime.seconds }}</span>
-        </template>
-      </van-count-down>
-    </demo-block>
+  <demo-block :title="t('customStyle')">
+    <van-count-down :time="time">
+      <template #default="currentTime">
+        <span class="block">{{ currentTime.hours }}</span>
+        <span class="colon">:</span>
+        <span class="block">{{ currentTime.minutes }}</span>
+        <span class="colon">:</span>
+        <span class="block">{{ currentTime.seconds }}</span>
+      </template>
+    </van-count-down>
+  </demo-block>
 
-    <demo-block :title="t('manualControl')">
-      <van-count-down
-        ref="countDown"
-        millisecond
-        :time="3000"
-        :auto-start="false"
-        format="ss:SSS"
-        @finish="$toast(t('finished'))"
-      />
-      <van-grid clickable :column-num="3">
-        <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
-        <van-grid-item
-          icon="pause-circle-o"
-          :text="t('pause')"
-          @click="pause"
-        />
-        <van-grid-item icon="replay" :text="t('reset')" @click="reset" />
-      </van-grid>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('manualControl')">
+    <van-count-down
+      ref="countDown"
+      millisecond
+      :time="3000"
+      :auto-start="false"
+      format="ss:SSS"
+      @finish="$toast(t('finished'))"
+    />
+    <van-grid clickable :column-num="3">
+      <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
+      <van-grid-item icon="pause-circle-o" :text="t('pause')" @click="pause" />
+      <van-grid-item icon="replay" :text="t('reset')" @click="reset" />
+    </van-grid>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/coupon-list/demo/index.vue b/src/coupon-list/demo/index.vue
index d4dfb55ae..b5dd09da0 100644
--- a/src/coupon-list/demo/index.vue
+++ b/src/coupon-list/demo/index.vue
@@ -1,28 +1,26 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-coupon-cell
+  <demo-block :title="t('basicUsage')">
+    <van-coupon-cell
+      :coupons="coupons"
+      :chosen-coupon="chosenCoupon"
+      @click="showList = true"
+    />
+    <van-popup
+      v-model:show="showList"
+      round
+      position="bottom"
+      style="height: 90%; padding-top: 4px;"
+    >
+      <van-coupon-list
         :coupons="coupons"
         :chosen-coupon="chosenCoupon"
-        @click="showList = true"
+        :disabled-coupons="disabledCoupons"
+        :show-count="false"
+        @change="onChange"
+        @exchange="onExchange"
       />
-      <van-popup
-        v-model:show="showList"
-        round
-        position="bottom"
-        style="height: 90%; padding-top: 4px;"
-      >
-        <van-coupon-list
-          :coupons="coupons"
-          :chosen-coupon="chosenCoupon"
-          :disabled-coupons="disabledCoupons"
-          :show-count="false"
-          @change="onChange"
-          @exchange="onExchange"
-        />
-      </van-popup>
-    </demo-block>
-  </demo-section>
+    </van-popup>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue
index 690cf5644..40b032399 100644
--- a/src/datetime-picker/demo/index.vue
+++ b/src/datetime-picker/demo/index.vue
@@ -1,88 +1,86 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('dateType')">
-      <van-datetime-picker
-        v-model="value.date"
-        type="date"
-        :title="t('dateType')"
-        :min-date="minDate"
-        :max-date="maxDate"
-      />
-    </demo-block>
+  <demo-block card :title="t('dateType')">
+    <van-datetime-picker
+      v-model="value.date"
+      type="date"
+      :title="t('dateType')"
+      :min-date="minDate"
+      :max-date="maxDate"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('yearMonthType')">
-      <van-datetime-picker
-        v-model="value.yearMonth"
-        type="year-month"
-        :title="t('yearMonthType')"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :formatter="formatter"
-      />
-    </demo-block>
+  <demo-block card :title="t('yearMonthType')">
+    <van-datetime-picker
+      v-model="value.yearMonth"
+      type="year-month"
+      :title="t('yearMonthType')"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :formatter="formatter"
+    />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" card :title="t('monthDayType')">
-      <van-datetime-picker
-        v-model="value.monthDayType"
-        type="month-day"
-        :title="t('monthDayType')"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :formatter="formatter"
-      />
-    </demo-block>
+  <demo-block v-if="!isWeapp" card :title="t('monthDayType')">
+    <van-datetime-picker
+      v-model="value.monthDayType"
+      type="month-day"
+      :title="t('monthDayType')"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :formatter="formatter"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('timeType')">
-      <van-datetime-picker
-        v-model="value.time"
-        type="time"
-        :title="t('timeType')"
-        :min-hour="10"
-        :max-hour="20"
-      />
-    </demo-block>
+  <demo-block card :title="t('timeType')">
+    <van-datetime-picker
+      v-model="value.time"
+      type="time"
+      :title="t('timeType')"
+      :min-hour="10"
+      :max-hour="20"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('datetimeType')">
-      <van-datetime-picker
-        v-model="value.datetime"
-        type="datetime"
-        :title="t('datetimeType')"
-        :min-date="minDate"
-        :max-date="maxDate"
-      />
-    </demo-block>
+  <demo-block card :title="t('datetimeType')">
+    <van-datetime-picker
+      v-model="value.datetime"
+      type="datetime"
+      :title="t('datetimeType')"
+      :min-date="minDate"
+      :max-date="maxDate"
+    />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" card :title="t('datehourType')">
-      <van-datetime-picker
-        v-model="value.datehour"
-        type="datehour"
-        :title="t('datehourType')"
-        :min-date="minDate"
-        :max-date="maxDate"
-      />
-    </demo-block>
+  <demo-block v-if="!isWeapp" card :title="t('datehourType')">
+    <van-datetime-picker
+      v-model="value.datehour"
+      type="datehour"
+      :title="t('datehourType')"
+      :min-date="minDate"
+      :max-date="maxDate"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('optionFilter')">
-      <van-datetime-picker
-        v-model="value.optionFilter"
-        type="time"
-        :title="t('optionFilter')"
-        :filter="filter"
-      />
-    </demo-block>
+  <demo-block card :title="t('optionFilter')">
+    <van-datetime-picker
+      v-model="value.optionFilter"
+      type="time"
+      :title="t('optionFilter')"
+      :filter="filter"
+    />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" card :title="t('sortColumns')">
-      <van-datetime-picker
-        v-model="value.sortColumnsDate"
-        type="date"
-        :title="t('sortColumns')"
-        :columns-order="['month', 'day', 'year']"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :formatter="formatter"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block v-if="!isWeapp" card :title="t('sortColumns')">
+    <van-datetime-picker
+      v-model="value.sortColumnsDate"
+      type="date"
+      :title="t('sortColumns')"
+      :columns-order="['month', 'day', 'year']"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :formatter="formatter"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index c78970a45..e7723657a 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -1,32 +1,30 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell is-link :title="t('alert1')" @click="onClickAlert" />
-      <van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
-      <van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('alert1')" @click="onClickAlert" />
+    <van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
+    <van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
+  </demo-block>
 
-    <demo-block card :title="t('roundButton')">
-      <van-cell is-link :title="t('alert1')" @click="onClickRound" />
-      <van-cell is-link :title="t('alert2')" @click="onClickRound2" />
-    </demo-block>
+  <demo-block card :title="t('roundButton')">
+    <van-cell is-link :title="t('alert1')" @click="onClickRound" />
+    <van-cell is-link :title="t('alert2')" @click="onClickRound2" />
+  </demo-block>
 
-    <demo-block card :title="t('beforeClose')">
-      <van-cell is-link :title="t('beforeClose')" @click="onClickBeforeClose" />
-    </demo-block>
+  <demo-block card :title="t('beforeClose')">
+    <van-cell is-link :title="t('beforeClose')" @click="onClickBeforeClose" />
+  </demo-block>
 
-    <demo-block card :title="t('componentCall')">
-      <van-cell is-link :title="t('componentCall')" @click="show = true" />
-      <van-dialog
-        v-model:show="show"
-        :title="t('title')"
-        show-cancel-button
-        :lazy-render="false"
-      >
-        <img :src="image" />
-      </van-dialog>
-    </demo-block>
-  </demo-section>
+  <demo-block card :title="t('componentCall')">
+    <van-cell is-link :title="t('componentCall')" @click="show = true" />
+    <van-dialog
+      v-model:show="show"
+      :title="t('title')"
+      show-cancel-button
+      :lazy-render="false"
+    >
+      <img :src="image" />
+    </van-dialog>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index c1ab46bc8..98ea8b586 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -1,39 +1,35 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-divider />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-divider />
+  </demo-block>
 
-    <demo-block :title="t('withText')">
-      <van-divider>
-        {{ t('text') }}
-      </van-divider>
-    </demo-block>
+  <demo-block :title="t('withText')">
+    <van-divider>
+      {{ t('text') }}
+    </van-divider>
+  </demo-block>
 
-    <demo-block :title="t('contentPosition')">
-      <van-divider content-position="left">
-        {{ t('text') }}
-      </van-divider>
+  <demo-block :title="t('contentPosition')">
+    <van-divider content-position="left">
+      {{ t('text') }}
+    </van-divider>
 
-      <van-divider content-position="right">
-        {{ t('text') }}
-      </van-divider>
-    </demo-block>
+    <van-divider content-position="right">
+      {{ t('text') }}
+    </van-divider>
+  </demo-block>
 
-    <demo-block :title="t('dashed')">
-      <van-divider dashed :hairline="false">
-        {{ t('text') }}
-      </van-divider>
-    </demo-block>
+  <demo-block :title="t('dashed')">
+    <van-divider dashed :hairline="false">
+      {{ t('text') }}
+    </van-divider>
+  </demo-block>
 
-    <demo-block :title="t('customStyle')">
-      <van-divider
-        :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
-      >
-        {{ t('text') }}
-      </van-divider>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('customStyle')">
+    <van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
+      {{ t('text') }}
+    </van-divider>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index b3685b29d..8a7e0d9e5 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -1,62 +1,60 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-dropdown-menu>
-        <van-dropdown-item v-model="value1" :options="option1" />
-        <van-dropdown-item v-model="value2" :options="option2" />
-      </van-dropdown-menu>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="value1" :options="option1" />
+      <van-dropdown-item v-model="value2" :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
 
-    <demo-block :title="t('customContent')">
-      <van-dropdown-menu>
-        <van-dropdown-item v-model="value1" :options="option1" />
-        <van-dropdown-item :title="t('itemTitle')" ref="item">
-          <van-cell center :title="t('switchTitle1')">
-            <template #right-icon>
-              <van-switch v-model="switch1" size="24" :active-color="RED" />
-            </template>
-          </van-cell>
-          <van-cell center :title="t('switchTitle2')">
-            <template #right-icon>
-              <van-switch v-model="switch2" size="24" :active-color="RED" />
-            </template>
-          </van-cell>
-          <div style="padding: 5px 16px;">
-            <van-button
-              type="danger"
-              block
-              round
-              style="height: 40px;"
-              @click="onConfirm"
-            >
-              {{ t('confirm') }}
-            </van-button>
-          </div>
-        </van-dropdown-item>
-      </van-dropdown-menu>
-    </demo-block>
+  <demo-block :title="t('customContent')">
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="value1" :options="option1" />
+      <van-dropdown-item :title="t('itemTitle')" ref="item">
+        <van-cell center :title="t('switchTitle1')">
+          <template #right-icon>
+            <van-switch v-model="switch1" size="24" :active-color="RED" />
+          </template>
+        </van-cell>
+        <van-cell center :title="t('switchTitle2')">
+          <template #right-icon>
+            <van-switch v-model="switch2" size="24" :active-color="RED" />
+          </template>
+        </van-cell>
+        <div style="padding: 5px 16px;">
+          <van-button
+            type="danger"
+            block
+            round
+            style="height: 40px;"
+            @click="onConfirm"
+          >
+            {{ t('confirm') }}
+          </van-button>
+        </div>
+      </van-dropdown-item>
+    </van-dropdown-menu>
+  </demo-block>
 
-    <demo-block :title="t('customActiveColor')">
-      <van-dropdown-menu :active-color="BLUE">
-        <van-dropdown-item v-model="value1" :options="option1" />
-        <van-dropdown-item v-model="value2" :options="option2" />
-      </van-dropdown-menu>
-    </demo-block>
+  <demo-block :title="t('customActiveColor')">
+    <van-dropdown-menu :active-color="BLUE">
+      <van-dropdown-item v-model="value1" :options="option1" />
+      <van-dropdown-item v-model="value2" :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
 
-    <demo-block :title="t('expandDirection')">
-      <van-dropdown-menu direction="up">
-        <van-dropdown-item v-model="value1" :options="option1" />
-        <van-dropdown-item v-model="value2" :options="option2" />
-      </van-dropdown-menu>
-    </demo-block>
+  <demo-block :title="t('expandDirection')">
+    <van-dropdown-menu direction="up">
+      <van-dropdown-item v-model="value1" :options="option1" />
+      <van-dropdown-item v-model="value2" :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
 
-    <demo-block :title="t('disableMenu')">
-      <van-dropdown-menu>
-        <van-dropdown-item v-model="value1" disabled :options="option1" />
-        <van-dropdown-item v-model="value2" disabled :options="option2" />
-      </van-dropdown-menu>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('disableMenu')">
+    <van-dropdown-menu>
+      <van-dropdown-item v-model="value1" disabled :options="option1" />
+      <van-dropdown-item v-model="value2" disabled :options="option2" />
+    </van-dropdown-menu>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/empty/demo/index.vue b/src/empty/demo/index.vue
index 3c8d4d49a..7b06eb0f4 100644
--- a/src/empty/demo/index.vue
+++ b/src/empty/demo/index.vue
@@ -1,39 +1,37 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-empty :description="t('description')" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-empty :description="t('description')" />
+  </demo-block>
 
-    <demo-block :title="t('imageType')">
-      <van-tabs v-model="active">
-        <van-tab name="error" :title="t('error')">
-          <van-empty image="error" :description="t('description')" />
-        </van-tab>
-        <van-tab name="network" :title="t('network')">
-          <van-empty image="network" :description="t('description')" />
-        </van-tab>
-        <van-tab name="search" :title="t('search')">
-          <van-empty image="search" :description="t('description')" />
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('imageType')">
+    <van-tabs v-model="active">
+      <van-tab name="error" :title="t('error')">
+        <van-empty image="error" :description="t('description')" />
+      </van-tab>
+      <van-tab name="network" :title="t('network')">
+        <van-empty image="network" :description="t('description')" />
+      </van-tab>
+      <van-tab name="search" :title="t('search')">
+        <van-empty image="search" :description="t('description')" />
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('customImage')">
-      <van-empty
-        class="custom-image"
-        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
-        :description="t('description')"
-      />
-    </demo-block>
+  <demo-block :title="t('customImage')">
+    <van-empty
+      class="custom-image"
+      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
+      :description="t('description')"
+    />
+  </demo-block>
 
-    <demo-block :title="t('bottomContent')">
-      <van-empty :description="t('description')">
-        <van-button round type="danger" class="bottom-button">
-          {{ t('button') }}
-        </van-button>
-      </van-empty>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('bottomContent')">
+    <van-empty :description="t('description')">
+      <van-button round type="danger" class="bottom-button">
+        {{ t('button') }}
+      </van-button>
+    </van-empty>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue
index 2ba3649dd..1a5266d1c 100644
--- a/src/field/demo/index.vue
+++ b/src/field/demo/index.vue
@@ -1,16 +1,14 @@
 <template>
-  <demo-section>
-    <basic-usage />
-    <custom-type />
-    <disabled />
-    <show-icon />
-    <error-info />
-    <insert-button />
-    <format-value />
-    <autosize />
-    <show-word-limit />
-    <input-align />
-  </demo-section>
+  <basic-usage />
+  <custom-type />
+  <disabled />
+  <show-icon />
+  <error-info />
+  <insert-button />
+  <format-value />
+  <autosize />
+  <show-word-limit />
+  <input-align />
 </template>
 
 <script>
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index ec100b854..9dbf6d306 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -7,22 +7,14 @@
     :model-value="value"
     :placeholder="t('placeholder')"
     @click="showArea = true"
-  >
-    <template #extra>
-      <van-popup
-        v-model:show="showArea"
-        round
-        position="bottom"
-        teleport="body"
-      >
-        <van-area
-          :area-list="t('areaList')"
-          @confirm="onConfirm"
-          @cancel="onCancel"
-        />
-      </van-popup>
-    </template>
-  </van-field>
+  />
+  <van-popup v-model:show="showArea" round position="bottom" teleport="body">
+    <van-area
+      :area-list="t('areaList')"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    />
+  </van-popup>
 </template>
 
 <script>
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index 49b785899..3725901d1 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -7,16 +7,13 @@
     :model-value="value"
     :placeholder="t('placeholder')"
     @click="showCalendar = true"
-  >
-    <template #extra>
-      <van-calendar
-        v-model:show="showCalendar"
-        round
-        teleport="body"
-        @confirm="onConfirm"
-      />
-    </template>
-  </van-field>
+  />
+  <van-calendar
+    v-model:show="showCalendar"
+    round
+    teleport="body"
+    @confirm="onConfirm"
+  />
 </template>
 
 <script>
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 7d0d0cbcc..e8123b4ae 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -7,22 +7,10 @@
     :model-value="value"
     :placeholder="t('placeholder')"
     @click="showPicker = true"
-  >
-    <template #extra>
-      <van-popup
-        v-model:show="showPicker"
-        round
-        position="bottom"
-        teleport="body"
-      >
-        <van-datetime-picker
-          type="time"
-          @confirm="onConfirm"
-          @cancel="onCancel"
-        />
-      </van-popup>
-    </template>
-  </van-field>
+  />
+  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
+    <van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
+  </van-popup>
 </template>
 
 <script>
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 81db922d7..d78630680 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -7,22 +7,14 @@
     :model-value="value"
     :placeholder="t('placeholder')"
     @click="showPicker = true"
-  >
-    <template #extra>
-      <van-popup
-        v-model:show="showPicker"
-        round
-        position="bottom"
-        teleport="body"
-      >
-        <van-picker
-          :columns="t('textColumns')"
-          @confirm="onConfirm"
-          @cancel="onCancel"
-        />
-      </van-popup>
-    </template>
-  </van-field>
+  />
+  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
+    <van-picker
+      :columns="t('textColumns')"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    />
+  </van-popup>
 </template>
 
 <script>
diff --git a/src/form/demo/index.vue b/src/form/demo/index.vue
index 3f7794103..4e519a2b1 100644
--- a/src/form/demo/index.vue
+++ b/src/form/demo/index.vue
@@ -1,9 +1,7 @@
 <template>
-  <demo-section>
-    <basic-usage />
-    <validate-rules />
-    <field-type />
-  </demo-section>
+  <basic-usage />
+  <validate-rules />
+  <field-type />
 </template>
 
 <script>
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index 544f524f1..c9bea75a0 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -1,98 +1,67 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-grid>
-        <van-grid-item
-          v-for="i in 4"
-          :key="i"
-          icon="photo-o"
-          :text="t('text')"
-        />
-      </van-grid>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-grid>
+      <van-grid-item v-for="i in 4" :key="i" icon="photo-o" :text="t('text')" />
+    </van-grid>
+  </demo-block>
 
-    <demo-block :title="t('columnNum')">
-      <van-grid :column-num="3">
-        <van-grid-item
-          v-for="i in 6"
-          :key="i"
-          icon="photo-o"
-          :text="t('text')"
-        />
-      </van-grid>
-    </demo-block>
+  <demo-block :title="t('columnNum')">
+    <van-grid :column-num="3">
+      <van-grid-item v-for="i in 6" :key="i" icon="photo-o" :text="t('text')" />
+    </van-grid>
+  </demo-block>
 
-    <demo-block :title="t('customContent')">
-      <van-grid :border="false" :column-num="3">
-        <van-grid-item>
-          <van-image
-            fit="contain"
-            src="https://img.yzcdn.cn/vant/apple-1.jpg"
-          />
-        </van-grid-item>
-        <van-grid-item>
-          <van-image
-            fit="contain"
-            src="https://img.yzcdn.cn/vant/apple-2.jpg"
-          />
-        </van-grid-item>
-        <van-grid-item>
-          <van-image
-            fit="contain"
-            src="https://img.yzcdn.cn/vant/apple-3.jpg"
-          />
-        </van-grid-item>
-      </van-grid>
-    </demo-block>
+  <demo-block :title="t('customContent')">
+    <van-grid :border="false" :column-num="3">
+      <van-grid-item>
+        <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+      </van-grid-item>
+      <van-grid-item>
+        <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+      </van-grid-item>
+      <van-grid-item>
+        <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+      </van-grid-item>
+    </van-grid>
+  </demo-block>
 
-    <demo-block :title="t('square')">
-      <van-grid square>
-        <van-grid-item
-          v-for="i in 8"
-          :key="i"
-          icon="photo-o"
-          :text="t('text')"
-        />
-      </van-grid>
-    </demo-block>
+  <demo-block :title="t('square')">
+    <van-grid square>
+      <van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="t('text')" />
+    </van-grid>
+  </demo-block>
 
-    <demo-block :title="t('gutter')">
-      <van-grid :gutter="10">
-        <van-grid-item
-          v-for="i in 8"
-          :key="i"
-          icon="photo-o"
-          :text="t('text')"
-        />
-      </van-grid>
-    </demo-block>
+  <demo-block :title="t('gutter')">
+    <van-grid :gutter="10">
+      <van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="t('text')" />
+    </van-grid>
+  </demo-block>
 
-    <demo-block :title="t('horizontal')">
-      <van-grid direction="horizontal" :column-num="3">
-        <van-grid-item icon="photo-o" :text="t('text')" />
-        <van-grid-item icon="photo-o" :text="t('text')" />
-        <van-grid-item icon="photo-o" :text="t('text')" />
-      </van-grid>
-    </demo-block>
+  <demo-block :title="t('horizontal')">
+    <van-grid direction="horizontal" :column-num="3">
+      <van-grid-item icon="photo-o" :text="t('text')" />
+      <van-grid-item icon="photo-o" :text="t('text')" />
+      <van-grid-item icon="photo-o" :text="t('text')" />
+    </van-grid>
+  </demo-block>
 
-    <demo-block :title="t('route')">
-      <van-grid clickable :column-num="2">
-        <van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
-        <van-grid-item
-          icon="search"
-          :text="t('urlRoute')"
-          url="/vant/mobile.html"
-        />
-      </van-grid>
-    </demo-block>
+  <demo-block :title="t('route')">
+    <van-grid clickable :column-num="2">
+      <van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
+      <van-grid-item
+        icon="search"
+        :text="t('urlRoute')"
+        url="/vant/mobile.html"
+      />
+    </van-grid>
+  </demo-block>
 
-    <demo-block :title="t('showBadge')">
-      <van-grid :column-num="2">
-        <van-grid-item icon="home-o" :text="t('text')" dot />
-        <van-grid-item icon="search" :text="t('text')" badge="99+" />
-      </van-grid>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('showBadge')">
+    <van-grid :column-num="2">
+      <van-grid-item icon="home-o" :text="t('text')" dot />
+      <van-grid-item icon="search" :text="t('text')" badge="99+" />
+    </van-grid>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index fb03bd2e0..31a03337f 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -1,98 +1,96 @@
 <template>
-  <demo-section>
-    <van-tabs v-model="tab" sticky>
-      <van-tab :title="t('demo')">
-        <demo-block :title="t('basicUsage')">
-          <van-row>
-            <van-col span="6" @click="copy(demoIcon)">
-              <van-icon :name="demoIcon" />
-            </van-col>
-            <van-col span="6" @click="copy(demoImage)">
-              <van-icon :name="demoImage" />
-            </van-col>
-          </van-row>
-        </demo-block>
-
-        <demo-block :title="t('badge')">
-          <van-row>
-            <van-col span="6" @click="copy(demoIcon, { dot: true })">
-              <van-icon :name="demoIcon" dot />
-            </van-col>
-            <van-col span="6" @click="copy(demoIcon, { badge: '9' })">
-              <van-icon :name="demoIcon" badge="9" />
-            </van-col>
-            <van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
-              <van-icon :name="demoIcon" badge="99+" />
-            </van-col>
-          </van-row>
-        </demo-block>
-
-        <demo-block :title="t('color')">
-          <van-row>
-            <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
-              <van-icon :name="demoIcon" :color="BLUE" />
-            </van-col>
-            <van-col span="6" @click="copy(demoIcon, { color: GREEN })">
-              <van-icon :name="demoIcon" :color="GREEN" />
-            </van-col>
-          </van-row>
-        </demo-block>
-
-        <demo-block :title="t('size')">
-          <van-row>
-            <van-col span="6" @click="copy(demoIcon, { size: '40' })">
-              <van-icon :name="demoIcon" size="40" />
-            </van-col>
-            <van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
-              <van-icon :name="demoIcon" size="3rem" />
-            </van-col>
-          </van-row>
-        </demo-block>
-      </van-tab>
-
-      <van-tab :title="t('basic')">
+  <van-tabs v-model="tab" sticky>
+    <van-tab :title="t('demo')">
+      <demo-block :title="t('basicUsage')">
         <van-row>
-          <van-col
-            v-for="icon in icons.basic"
-            :key="icon"
-            span="6"
-            @click="copy(icon)"
-          >
-            <van-icon :name="icon" />
-            <span>{{ icon }}</span>
+          <van-col span="6" @click="copy(demoIcon)">
+            <van-icon :name="demoIcon" />
+          </van-col>
+          <van-col span="6" @click="copy(demoImage)">
+            <van-icon :name="demoImage" />
           </van-col>
         </van-row>
-      </van-tab>
+      </demo-block>
 
-      <van-tab :title="t('outline')">
+      <demo-block :title="t('badge')">
         <van-row>
-          <van-col
-            v-for="icon in icons.outline"
-            :key="icon"
-            span="6"
-            @click="copy(icon)"
-          >
-            <van-icon :name="icon" />
-            <span>{{ icon }}</span>
+          <van-col span="6" @click="copy(demoIcon, { dot: true })">
+            <van-icon :name="demoIcon" dot />
+          </van-col>
+          <van-col span="6" @click="copy(demoIcon, { badge: '9' })">
+            <van-icon :name="demoIcon" badge="9" />
+          </van-col>
+          <van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
+            <van-icon :name="demoIcon" badge="99+" />
           </van-col>
         </van-row>
-      </van-tab>
+      </demo-block>
 
-      <van-tab :title="t('filled')">
+      <demo-block :title="t('color')">
         <van-row>
-          <van-col
-            v-for="icon in icons.filled"
-            :key="icon"
-            span="6"
-            @click="copy(icon)"
-          >
-            <van-icon :name="icon" />
-            <span>{{ icon }}</span>
+          <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
+            <van-icon :name="demoIcon" :color="BLUE" />
+          </van-col>
+          <van-col span="6" @click="copy(demoIcon, { color: GREEN })">
+            <van-icon :name="demoIcon" :color="GREEN" />
           </van-col>
         </van-row>
-      </van-tab>
-    </van-tabs>
-  </demo-section>
+      </demo-block>
+
+      <demo-block :title="t('size')">
+        <van-row>
+          <van-col span="6" @click="copy(demoIcon, { size: '40' })">
+            <van-icon :name="demoIcon" size="40" />
+          </van-col>
+          <van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
+            <van-icon :name="demoIcon" size="3rem" />
+          </van-col>
+        </van-row>
+      </demo-block>
+    </van-tab>
+
+    <van-tab :title="t('basic')">
+      <van-row>
+        <van-col
+          v-for="icon in icons.basic"
+          :key="icon"
+          span="6"
+          @click="copy(icon)"
+        >
+          <van-icon :name="icon" />
+          <span>{{ icon }}</span>
+        </van-col>
+      </van-row>
+    </van-tab>
+
+    <van-tab :title="t('outline')">
+      <van-row>
+        <van-col
+          v-for="icon in icons.outline"
+          :key="icon"
+          span="6"
+          @click="copy(icon)"
+        >
+          <van-icon :name="icon" />
+          <span>{{ icon }}</span>
+        </van-col>
+      </van-row>
+    </van-tab>
+
+    <van-tab :title="t('filled')">
+      <van-row>
+        <van-col
+          v-for="icon in icons.filled"
+          :key="icon"
+          span="6"
+          @click="copy(icon)"
+        >
+          <van-icon :name="icon" />
+          <span>{{ icon }}</span>
+        </van-col>
+      </van-row>
+    </van-tab>
+  </van-tabs>
 </template>
 
 <script>
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index dec20af7a..d324624dd 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -1,42 +1,36 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell is-link @click="showImagePreview()">
-        {{ t('showImages') }}
-      </van-cell>
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link @click="showImagePreview()">
+      {{ t('showImages') }}
+    </van-cell>
+  </demo-block>
 
-    <demo-block card :title="t('customConfig')">
-      <van-cell is-link @click="showImagePreview({ startPosition: 1 })">
-        {{ t('startPosition') }}
-      </van-cell>
-      <van-cell is-link @click="showImagePreview({ closeable: true })">
-        {{ t('showClose') }}
-      </van-cell>
-      <van-cell is-link @click="showImagePreview({ onClose })">
-        {{ t('closeEvent') }}
-      </van-cell>
-    </demo-block>
+  <demo-block card :title="t('customConfig')">
+    <van-cell is-link @click="showImagePreview({ startPosition: 1 })">
+      {{ t('startPosition') }}
+    </van-cell>
+    <van-cell is-link @click="showImagePreview({ closeable: true })">
+      {{ t('showClose') }}
+    </van-cell>
+    <van-cell is-link @click="showImagePreview({ onClose })">
+      {{ t('closeEvent') }}
+    </van-cell>
+  </demo-block>
 
-    <demo-block card :title="t('beforeClose')">
-      <van-cell is-link @click="showImagePreview({ beforeClose })">
-        {{ t('beforeClose') }}
-      </van-cell>
-    </demo-block>
+  <demo-block card :title="t('beforeClose')">
+    <van-cell is-link @click="showImagePreview({ beforeClose })">
+      {{ t('beforeClose') }}
+    </van-cell>
+  </demo-block>
 
-    <demo-block card :title="t('componentCall')">
-      <van-cell is-link @click="componentCall">
-        {{ t('componentCall') }}
-      </van-cell>
-      <van-image-preview
-        v-model:show="show"
-        :images="images"
-        @change="onChange"
-      >
-        <template #index>{{ t('index', index) }}</template>
-      </van-image-preview>
-    </demo-block>
-  </demo-section>
+  <demo-block card :title="t('componentCall')">
+    <van-cell is-link @click="componentCall">
+      {{ t('componentCall') }}
+    </van-cell>
+    <van-image-preview v-model:show="show" :images="images" @change="onChange">
+      <template #index>{{ t('index', index) }}</template>
+    </van-image-preview>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue
index c3abac32f..235f94f7b 100644
--- a/src/image/demo/index.vue
+++ b/src/image/demo/index.vue
@@ -1,63 +1,61 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-row>
-        <van-image width="100" height="100" :src="image" />
-      </van-row>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-row>
+      <van-image width="100" height="100" :src="image" />
+    </van-row>
+  </demo-block>
 
-    <demo-block :title="t('fitMode')">
-      <van-row gutter="20">
-        <van-col v-for="fit in fits" span="8" :key="fit">
-          <van-image :fit="fit" width="100%" height="27vw" :src="image" />
-          <div class="text">{{ fit }}</div>
-        </van-col>
-      </van-row>
-    </demo-block>
+  <demo-block :title="t('fitMode')">
+    <van-row gutter="20">
+      <van-col v-for="fit in fits" span="8" :key="fit">
+        <van-image :fit="fit" width="100%" height="27vw" :src="image" />
+        <div class="text">{{ fit }}</div>
+      </van-col>
+    </van-row>
+  </demo-block>
 
-    <demo-block :title="t('round')">
-      <van-row gutter="20">
-        <van-col v-for="fit in fits" span="8" :key="fit">
-          <van-image round :fit="fit" width="100%" height="27vw" :src="image" />
-          <div class="text">{{ fit }}</div>
-        </van-col>
-      </van-row>
-    </demo-block>
+  <demo-block :title="t('round')">
+    <van-row gutter="20">
+      <van-col v-for="fit in fits" span="8" :key="fit">
+        <van-image round :fit="fit" width="100%" height="27vw" :src="image" />
+        <div class="text">{{ fit }}</div>
+      </van-col>
+    </van-row>
+  </demo-block>
 
-    <demo-block :title="t('loading')">
-      <van-row gutter="20">
-        <van-col span="8">
-          <van-image width="100%" height="27vw" />
-          <div class="text">{{ t('defaultTip') }}</div>
-        </van-col>
+  <demo-block :title="t('loading')">
+    <van-row gutter="20">
+      <van-col span="8">
+        <van-image width="100%" height="27vw" />
+        <div class="text">{{ t('defaultTip') }}</div>
+      </van-col>
 
-        <van-col span="8">
-          <van-image width="100%" height="27vw">
-            <template #loading>
-              <van-loading type="spinner" size="20" />
-            </template>
-          </van-image>
-          <div class="text">{{ t('customTip') }}</div>
-        </van-col>
-      </van-row>
-    </demo-block>
+      <van-col span="8">
+        <van-image width="100%" height="27vw">
+          <template #loading>
+            <van-loading type="spinner" size="20" />
+          </template>
+        </van-image>
+        <div class="text">{{ t('customTip') }}</div>
+      </van-col>
+    </van-row>
+  </demo-block>
 
-    <demo-block :title="t('error')">
-      <van-row gutter="20">
-        <van-col span="8">
-          <van-image width="100%" height="27vw" src="x" />
-          <div class="text">{{ t('defaultTip') }}</div>
-        </van-col>
+  <demo-block :title="t('error')">
+    <van-row gutter="20">
+      <van-col span="8">
+        <van-image width="100%" height="27vw" src="x" />
+        <div class="text">{{ t('defaultTip') }}</div>
+      </van-col>
 
-        <van-col span="8">
-          <van-image width="100%" height="27vw" src="x">
-            <template #error>{{ t('loadFail') }}</template>
-          </van-image>
-          <div class="text">{{ t('customTip') }}</div>
-        </van-col>
-      </van-row>
-    </demo-block>
-  </demo-section>
+      <van-col span="8">
+        <van-image width="100%" height="27vw" src="x">
+          <template #error>{{ t('loadFail') }}</template>
+        </van-image>
+        <div class="text">{{ t('customTip') }}</div>
+      </van-col>
+    </van-row>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/index-bar/demo/index.vue b/src/index-bar/demo/index.vue
index c0b5ba0cf..84cd38a41 100644
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@@ -1,31 +1,29 @@
 <template>
-  <demo-section>
-    <van-tabs v-model="activeTab">
-      <van-tab :title="t('basicUsage')">
-        <van-index-bar>
-          <div v-for="index in indexList" :key="index">
-            <van-index-anchor :index="index" />
-            <van-cell :title="t('text')" />
-            <van-cell :title="t('text')" />
-            <van-cell :title="t('text')" />
-          </div>
-        </van-index-bar>
-      </van-tab>
+  <van-tabs v-model="activeTab">
+    <van-tab :title="t('basicUsage')">
+      <van-index-bar>
+        <div v-for="index in indexList" :key="index">
+          <van-index-anchor :index="index" />
+          <van-cell :title="t('text')" />
+          <van-cell :title="t('text')" />
+          <van-cell :title="t('text')" />
+        </div>
+      </van-index-bar>
+    </van-tab>
 
-      <van-tab :title="t('customIndexList')">
-        <van-index-bar :index-list="customIndexList">
-          <div v-for="index in customIndexList" :key="index">
-            <van-index-anchor :index="index">
-              {{ t('title') + index }}
-            </van-index-anchor>
-            <van-cell :title="t('text')" />
-            <van-cell :title="t('text')" />
-            <van-cell :title="t('text')" />
-          </div>
-        </van-index-bar>
-      </van-tab>
-    </van-tabs>
-  </demo-section>
+    <van-tab :title="t('customIndexList')">
+      <van-index-bar :index-list="customIndexList">
+        <div v-for="index in customIndexList" :key="index">
+          <van-index-anchor :index="index">
+            {{ t('title') + index }}
+          </van-index-anchor>
+          <van-cell :title="t('text')" />
+          <van-cell :title="t('text')" />
+          <van-cell :title="t('text')" />
+        </div>
+      </van-index-bar>
+    </van-tab>
+  </van-tabs>
 </template>
 
 <script>
diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue
index be583be37..66f27ea77 100644
--- a/src/lazyload/demo/index.vue
+++ b/src/lazyload/demo/index.vue
@@ -1,23 +1,21 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <img v-for="img in imageList" :key="img" v-lazy="img" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <img v-for="img in imageList" :key="img" v-lazy="img" />
+  </demo-block>
 
-    <demo-block :title="t('title2')">
-      <div
-        v-for="img in backgroundImageList"
-        :key="img"
-        v-lazy:background-image="img"
-      />
-    </demo-block>
+  <demo-block :title="t('title2')">
+    <div
+      v-for="img in backgroundImageList"
+      :key="img"
+      v-lazy:background-image="img"
+    />
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <lazy-component>
-        <img v-for="img in componentImageList" :key="img" v-lazy="img" />
-      </lazy-component>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('title3')">
+    <lazy-component>
+      <img v-for="img in componentImageList" :key="img" v-lazy="img" />
+    </lazy-component>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue
index 09c0daf71..b04c24229 100644
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@@ -1,43 +1,41 @@
 <template>
-  <demo-section>
-    <van-tabs>
-      <van-tab :title="t('basicUsage')">
+  <van-tabs>
+    <van-tab :title="t('basicUsage')">
+      <van-list
+        v-model:loading="list[0].loading"
+        :finished="list[0].finished"
+        :finished-text="t('finishedText')"
+        @load="onLoad(0)"
+      >
+        <van-cell v-for="item in list[0].items" :key="item" :title="item" />
+      </van-list>
+    </van-tab>
+
+    <van-tab :title="t('errorInfo')">
+      <van-list
+        v-model:loading="list[1].loading"
+        v-model:error="list[1].error"
+        :finished="list[1].finished"
+        :error-text="t('errorText')"
+        @load="onLoad(1)"
+      >
+        <van-cell v-for="item in list[1].items" :key="item" :title="item" />
+      </van-list>
+    </van-tab>
+
+    <van-tab :title="t('pullRefresh')">
+      <van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
         <van-list
-          v-model:loading="list[0].loading"
-          :finished="list[0].finished"
+          v-model:loading="list[2].loading"
+          :finished="list[2].finished"
           :finished-text="t('finishedText')"
-          @load="onLoad(0)"
+          @load="onLoad(2)"
         >
-          <van-cell v-for="item in list[0].items" :key="item" :title="item" />
+          <van-cell v-for="item in list[2].items" :key="item" :title="item" />
         </van-list>
-      </van-tab>
-
-      <van-tab :title="t('errorInfo')">
-        <van-list
-          v-model:loading="list[1].loading"
-          v-model:error="list[1].error"
-          :finished="list[1].finished"
-          :error-text="t('errorText')"
-          @load="onLoad(1)"
-        >
-          <van-cell v-for="item in list[1].items" :key="item" :title="item" />
-        </van-list>
-      </van-tab>
-
-      <van-tab :title="t('pullRefresh')">
-        <van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
-          <van-list
-            v-model:loading="list[2].loading"
-            :finished="list[2].finished"
-            :finished-text="t('finishedText')"
-            @load="onLoad(2)"
-          >
-            <van-cell v-for="item in list[2].items" :key="item" :title="item" />
-          </van-list>
-        </van-pull-refresh>
-      </van-tab>
-    </van-tabs>
-  </demo-section>
+      </van-pull-refresh>
+    </van-tab>
+  </van-tabs>
 </template>
 
 <script>
diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue
index 16cb624ab..10ed6b3c7 100644
--- a/src/loading/demo/index.vue
+++ b/src/loading/demo/index.vue
@@ -1,32 +1,30 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('type')">
-      <van-loading />
-      <van-loading type="spinner" />
-    </demo-block>
+  <demo-block :title="t('type')">
+    <van-loading />
+    <van-loading type="spinner" />
+  </demo-block>
 
-    <demo-block :title="t('color')">
-      <van-loading color="#1989fa" />
-      <van-loading type="spinner" color="#1989fa" />
-    </demo-block>
+  <demo-block :title="t('color')">
+    <van-loading color="#1989fa" />
+    <van-loading type="spinner" color="#1989fa" />
+  </demo-block>
 
-    <demo-block :title="t('size')">
-      <van-loading size="24" />
-      <van-loading type="spinner" size="24" />
-    </demo-block>
+  <demo-block :title="t('size')">
+    <van-loading size="24" />
+    <van-loading type="spinner" size="24" />
+  </demo-block>
 
-    <demo-block :title="t('text')">
-      <van-loading size="24px">
-        {{ t('loading') }}
-      </van-loading>
-    </demo-block>
+  <demo-block :title="t('text')">
+    <van-loading size="24px">
+      {{ t('loading') }}
+    </van-loading>
+  </demo-block>
 
-    <demo-block :title="t('vertical')">
-      <van-loading size="24px" vertical>
-        {{ t('loading') }}
-      </van-loading>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('vertical')">
+    <van-loading size="24px" vertical>
+      {{ t('loading') }}
+    </van-loading>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/nav-bar/demo/index.vue b/src/nav-bar/demo/index.vue
index cededbc20..24678fbbc 100644
--- a/src/nav-bar/demo/index.vue
+++ b/src/nav-bar/demo/index.vue
@@ -1,24 +1,22 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-nav-bar
-        :title="t('title')"
-        :left-text="t('back')"
-        :right-text="t('button')"
-        left-arrow
-        @click-left="onClickLeft"
-        @click-right="onClickRight"
-      />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-nav-bar
+      :title="t('title')"
+      :left-text="t('back')"
+      :right-text="t('button')"
+      left-arrow
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    />
+  </demo-block>
 
-    <demo-block :title="t('useSlot')">
-      <van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
-        <template #right>
-          <van-icon name="search" size="18" />
-        </template>
-      </van-nav-bar>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('useSlot')">
+    <van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
+      <template #right>
+        <van-icon name="search" size="18" />
+      </template>
+    </van-nav-bar>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/notice-bar/demo/index.vue b/src/notice-bar/demo/index.vue
index 2e9c385a2..0e4154384 100644
--- a/src/notice-bar/demo/index.vue
+++ b/src/notice-bar/demo/index.vue
@@ -1,47 +1,45 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
+  </demo-block>
 
-    <demo-block :title="t('scrollable')">
-      <van-notice-bar scrollable :text="t('shortText')" />
-      <van-notice-bar :scrollable="false" :text="t('text')" />
-    </demo-block>
+  <demo-block :title="t('scrollable')">
+    <van-notice-bar scrollable :text="t('shortText')" />
+    <van-notice-bar :scrollable="false" :text="t('text')" />
+  </demo-block>
 
-    <demo-block :title="t('wrapable')">
-      <van-notice-bar wrapable :scrollable="false" :text="t('text')" />
-    </demo-block>
+  <demo-block :title="t('wrapable')">
+    <van-notice-bar wrapable :scrollable="false" :text="t('text')" />
+  </demo-block>
 
-    <demo-block :title="t('mode')">
-      <van-notice-bar mode="closeable" :text="t('shortText')" />
-      <van-notice-bar mode="link" :text="t('shortText')" />
-    </demo-block>
+  <demo-block :title="t('mode')">
+    <van-notice-bar mode="closeable" :text="t('shortText')" />
+    <van-notice-bar mode="link" :text="t('shortText')" />
+  </demo-block>
 
-    <demo-block :title="t('customStyle')">
-      <van-notice-bar
-        :text="t('shortText')"
-        color="#1989fa"
-        background="#ecf9ff"
-        left-icon="info-o"
-      />
-    </demo-block>
+  <demo-block :title="t('customStyle')">
+    <van-notice-bar
+      :text="t('shortText')"
+      color="#1989fa"
+      background="#ecf9ff"
+      left-icon="info-o"
+    />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('verticalScroll')">
-      <van-notice-bar left-icon="volume-o" :scrollable="false">
-        <van-swipe
-          vertical
-          class="notice-swipe"
-          :autoplay="3000"
-          :show-indicators="false"
-        >
-          <van-swipe-item>{{ t('content') }} 1</van-swipe-item>
-          <van-swipe-item>{{ t('content') }} 2</van-swipe-item>
-          <van-swipe-item>{{ t('content') }} 3</van-swipe-item>
-        </van-swipe>
-      </van-notice-bar>
-    </demo-block>
-  </demo-section>
+  <demo-block v-if="!isWeapp" :title="t('verticalScroll')">
+    <van-notice-bar left-icon="volume-o" :scrollable="false">
+      <van-swipe
+        vertical
+        class="notice-swipe"
+        :autoplay="3000"
+        :show-indicators="false"
+      >
+        <van-swipe-item>{{ t('content') }} 1</van-swipe-item>
+        <van-swipe-item>{{ t('content') }} 2</van-swipe-item>
+        <van-swipe-item>{{ t('content') }} 3</van-swipe-item>
+      </van-swipe>
+    </van-notice-bar>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index e5ace9303..2d3522267 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -1,38 +1,32 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell is-link :title="t('basicUsage')" @click="showNotify" />
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('basicUsage')" @click="showNotify" />
+  </demo-block>
 
-    <demo-block card :title="t('notifyType')">
-      <van-cell is-link :title="t('primary')" @click="showType('primary')" />
-      <van-cell is-link :title="t('success')" @click="showType('success')" />
-      <van-cell is-link :title="t('danger')" @click="showType('danger')" />
-      <van-cell is-link :title="t('warning')" @click="showType('warning')" />
-    </demo-block>
+  <demo-block card :title="t('notifyType')">
+    <van-cell is-link :title="t('primary')" @click="showType('primary')" />
+    <van-cell is-link :title="t('success')" @click="showType('success')" />
+    <van-cell is-link :title="t('danger')" @click="showType('danger')" />
+    <van-cell is-link :title="t('warning')" @click="showType('warning')" />
+  </demo-block>
 
-    <demo-block card :title="t('customNotify')">
-      <van-cell is-link :title="t('customColor')" @click="showCustomColor" />
-      <van-cell
-        is-link
-        :title="t('customDuration')"
-        @click="showCustomDuration"
-      />
-    </demo-block>
+  <demo-block card :title="t('customNotify')">
+    <van-cell is-link :title="t('customColor')" @click="showCustomColor" />
+    <van-cell
+      is-link
+      :title="t('customDuration')"
+      @click="showCustomDuration"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('componentCall')">
-      <van-cell
-        is-link
-        :title="t('componentCall')"
-        @click="showComponentCall"
-      />
+  <demo-block card :title="t('componentCall')">
+    <van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
 
-      <van-notify v-model:show="show" type="success">
-        <van-icon name="bell" style="margin-right: 4px;" />
-        <span>{{ t('content') }}</span>
-      </van-notify>
-    </demo-block>
-  </demo-section>
+    <van-notify v-model:show="show" type="success">
+      <van-icon name="bell" style="margin-right: 4px;" />
+      <span>{{ t('content') }}</span>
+    </van-notify>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index 116f17688..7db1d7891 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -1,82 +1,80 @@
 <template>
-  <demo-section>
-    <van-cell is-link @touchstart.stop="keyboard = 'default'">
-      {{ t('button1') }}
-    </van-cell>
-    <van-cell is-link @touchstart.stop="keyboard = 'custom'">
-      {{ t('button2') }}
-    </van-cell>
-    <van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
-      {{ t('button3') }}
-    </van-cell>
-    <van-cell is-link @touchstart.stop="keyboard = 'title'">
-      {{ t('button4') }}
-    </van-cell>
-    <van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
-      {{ t('button5') }}
-    </van-cell>
-    <van-field
-      readonly
-      clickable
-      :label="t('bindValue')"
-      :model-value="value"
-      :placeholder="t('clickToInput')"
-      @touchstart.stop="keyboard = 'bindValue'"
-    />
+  <van-cell is-link @touchstart.stop="keyboard = 'default'">
+    {{ t('button1') }}
+  </van-cell>
+  <van-cell is-link @touchstart.stop="keyboard = 'custom'">
+    {{ t('button2') }}
+  </van-cell>
+  <van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
+    {{ t('button3') }}
+  </van-cell>
+  <van-cell is-link @touchstart.stop="keyboard = 'title'">
+    {{ t('button4') }}
+  </van-cell>
+  <van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
+    {{ t('button5') }}
+  </van-cell>
+  <van-field
+    readonly
+    clickable
+    :label="t('bindValue')"
+    :model-value="value"
+    :placeholder="t('clickToInput')"
+    @touchstart.stop="keyboard = 'bindValue'"
+  />
 
-    <van-number-keyboard
-      :show="keyboard === 'default'"
-      @blur="keyboard = ''"
-      @input="onInput"
-      @delete="onDelete"
-    />
+  <van-number-keyboard
+    :show="keyboard === 'default'"
+    @blur="keyboard = ''"
+    @input="onInput"
+    @delete="onDelete"
+  />
 
-    <van-number-keyboard
-      :show="keyboard === 'custom'"
-      :close-button-text="t('close')"
-      theme="custom"
-      extra-key="."
-      @blur="keyboard = ''"
-      @input="onInput"
-      @delete="onDelete"
-    />
+  <van-number-keyboard
+    :show="keyboard === 'custom'"
+    :close-button-text="t('close')"
+    theme="custom"
+    extra-key="."
+    @blur="keyboard = ''"
+    @input="onInput"
+    @delete="onDelete"
+  />
 
-    <van-number-keyboard
-      :show="keyboard === 'extraKey'"
-      :close-button-text="t('close')"
-      extra-key="X"
-      @blur="keyboard = ''"
-      @input="onInput"
-      @delete="onDelete"
-    />
+  <van-number-keyboard
+    :show="keyboard === 'extraKey'"
+    :close-button-text="t('close')"
+    extra-key="X"
+    @blur="keyboard = ''"
+    @input="onInput"
+    @delete="onDelete"
+  />
 
-    <van-number-keyboard
-      :show="keyboard === 'title'"
-      :close-button-text="t('close')"
-      :title="t('title')"
-      extra-key="."
-      @blur="keyboard = ''"
-      @input="onInput"
-      @delete="onDelete"
-    />
+  <van-number-keyboard
+    :show="keyboard === 'title'"
+    :close-button-text="t('close')"
+    :title="t('title')"
+    extra-key="."
+    @blur="keyboard = ''"
+    @input="onInput"
+    @delete="onDelete"
+  />
 
-    <van-number-keyboard
-      :show="keyboard === 'multiExtraKey'"
-      :close-button-text="t('close')"
-      theme="custom"
-      :extra-key="['00', '.']"
-      @blur="keyboard = ''"
-      @input="onInput"
-      @delete="onDelete"
-    />
+  <van-number-keyboard
+    :show="keyboard === 'multiExtraKey'"
+    :close-button-text="t('close')"
+    theme="custom"
+    :extra-key="['00', '.']"
+    @blur="keyboard = ''"
+    @input="onInput"
+    @delete="onDelete"
+  />
 
-    <van-number-keyboard
-      v-model="value"
-      :show="keyboard === 'bindValue'"
-      maxlength="6"
-      @blur="keyboard = ''"
-    />
-  </demo-section>
+  <van-number-keyboard
+    v-model="value"
+    :show="keyboard === 'bindValue'"
+    maxlength="6"
+    @blur="keyboard = ''"
+  />
 </template>
 
 <script>
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index d98f1cf6d..3c16ac00a 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -1,31 +1,27 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-button
-        type="primary"
-        :text="t('showOverlay')"
-        style="margin-left: 16px;"
-        @click="show = true"
-      />
+  <demo-block :title="t('basicUsage')">
+    <van-button
+      type="primary"
+      :text="t('showOverlay')"
+      style="margin-left: 16px;"
+      @click="show = true"
+    />
+    <van-overlay :show="show" @click="show = false" />
+  </demo-block>
 
-      <van-overlay :show="show" @click="show = false" />
-    </demo-block>
-
-    <demo-block :title="t('embeddedContent')">
-      <van-button
-        type="primary"
-        :text="t('embeddedContent')"
-        style="margin-left: 16px;"
-        @click="showEmbedded = true"
-      />
-
-      <van-overlay :show="showEmbedded" @click="showEmbedded = false">
-        <div class="wrapper">
-          <div class="block" />
-        </div>
-      </van-overlay>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('embeddedContent')">
+    <van-button
+      type="primary"
+      :text="t('embeddedContent')"
+      style="margin-left: 16px;"
+      @click="showEmbedded = true"
+    />
+    <van-overlay :show="showEmbedded" @click="showEmbedded = false">
+      <div class="wrapper">
+        <div class="block" />
+      </div>
+    </van-overlay>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index dce90025f..20d22a37c 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -1,53 +1,51 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-pagination
-        v-model="currentPage1"
-        :total-items="24"
-        :items-per-page="5"
-        :prev-text="t('prevText')"
-        :next-text="t('nextText')"
-      />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-pagination
+      v-model="currentPage1"
+      :total-items="24"
+      :items-per-page="5"
+      :prev-text="t('prevText')"
+      :next-text="t('nextText')"
+    />
+  </demo-block>
 
-    <demo-block :title="t('title2')">
-      <van-pagination
-        v-model="currentPage2"
-        :page-count="12"
-        :prev-text="t('prevText')"
-        :next-text="t('nextText')"
-        mode="simple"
-        size="small"
-      />
-    </demo-block>
+  <demo-block :title="t('title2')">
+    <van-pagination
+      v-model="currentPage2"
+      :page-count="12"
+      :prev-text="t('prevText')"
+      :next-text="t('nextText')"
+      mode="simple"
+      size="small"
+    />
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-pagination
-        v-model="currentPage3"
-        force-ellipses
-        :total-items="125"
-        :show-page-size="3"
-        :prev-text="t('prevText')"
-        :next-text="t('nextText')"
-      />
-    </demo-block>
+  <demo-block :title="t('title3')">
+    <van-pagination
+      v-model="currentPage3"
+      force-ellipses
+      :total-items="125"
+      :show-page-size="3"
+      :prev-text="t('prevText')"
+      :next-text="t('nextText')"
+    />
+  </demo-block>
 
-    <demo-block :title="t('title4')">
-      <van-pagination
-        v-model="currentPage4"
-        :total-items="125"
-        :show-page-size="5"
-      >
-        <template #prev-text>
-          <van-icon name="arrow-left" />
-        </template>
-        <template #next-text>
-          <van-icon name="arrow" />
-        </template>
-        <template #page="{ text }">{{ text }}</template>
-      </van-pagination>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('title4')">
+    <van-pagination
+      v-model="currentPage4"
+      :total-items="125"
+      :show-page-size="5"
+    >
+      <template #prev-text>
+        <van-icon name="arrow-left" />
+      </template>
+      <template #next-text>
+        <van-icon name="arrow" />
+      </template>
+      <template #page="{ text }">{{ text }}</template>
+    </van-pagination>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue
index 28122ac87..5baa08ff3 100644
--- a/src/password-input/demo/index.vue
+++ b/src/password-input/demo/index.vue
@@ -1,57 +1,55 @@
 <template>
-  <demo-section>
-    <demo-block ref="basicUsage" :title="t('basicUsage')">
-      <van-password-input
-        :value="value.basicUsage"
-        :focused="current === 'basicUsage'"
-        @focus="current = 'basicUsage'"
-      />
-    </demo-block>
-
-    <demo-block ref="customLength" :title="t('customLength')">
-      <van-password-input
-        :value="value.customLength"
-        :length="4"
-        :focused="current === 'customLength'"
-        @focus="current = 'customLength'"
-      />
-    </demo-block>
-
-    <demo-block ref="addGutter" :title="t('addGutter')">
-      <van-password-input
-        :value="value.addGutter"
-        :gutter="10"
-        :focused="current === 'addGutter'"
-        @focus="current = 'addGutter'"
-      />
-    </demo-block>
-
-    <demo-block ref="removeMask" :title="t('removeMask')">
-      <van-password-input
-        :mask="false"
-        :value="value.removeMask"
-        :focused="current === 'removeMask'"
-        @focus="current = 'removeMask'"
-      />
-    </demo-block>
-
-    <demo-block ref="showInfo" :title="t('showInfo')">
-      <van-password-input
-        :info="t('info')"
-        :value="value.showInfo"
-        :error-info="errorInfo"
-        :focused="current === 'showInfo'"
-        @focus="current = 'showInfo'"
-      />
-    </demo-block>
-
-    <van-number-keyboard
-      :show="!!current"
-      @blur="current = ''"
-      @input="onInput"
-      @delete="onDelete"
+  <demo-block ref="basicUsage" :title="t('basicUsage')">
+    <van-password-input
+      :value="value.basicUsage"
+      :focused="current === 'basicUsage'"
+      @focus="current = 'basicUsage'"
     />
-  </demo-section>
+  </demo-block>
+
+  <demo-block ref="customLength" :title="t('customLength')">
+    <van-password-input
+      :value="value.customLength"
+      :length="4"
+      :focused="current === 'customLength'"
+      @focus="current = 'customLength'"
+    />
+  </demo-block>
+
+  <demo-block ref="addGutter" :title="t('addGutter')">
+    <van-password-input
+      :value="value.addGutter"
+      :gutter="10"
+      :focused="current === 'addGutter'"
+      @focus="current = 'addGutter'"
+    />
+  </demo-block>
+
+  <demo-block ref="removeMask" :title="t('removeMask')">
+    <van-password-input
+      :mask="false"
+      :value="value.removeMask"
+      :focused="current === 'removeMask'"
+      @focus="current = 'removeMask'"
+    />
+  </demo-block>
+
+  <demo-block ref="showInfo" :title="t('showInfo')">
+    <van-password-input
+      :info="t('info')"
+      :value="value.showInfo"
+      :error-info="errorInfo"
+      :focused="current === 'showInfo'"
+      @focus="current = 'showInfo'"
+    />
+  </demo-block>
+
+  <van-number-keyboard
+    :show="!!current"
+    @blur="current = ''"
+    @input="onInput"
+    @delete="onDelete"
+  />
 </template>
 
 <script>
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index 983f09015..3923348af 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -1,71 +1,69 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
+  <demo-block card :title="t('basicUsage')">
+    <van-picker
+      :title="t('title')"
+      :columns="t('textColumns')"
+      @change="onChange1"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('defaultIndex')">
+    <van-picker
+      :title="t('title')"
+      :columns="t('textColumns')"
+      :default-index="2"
+      @change="onChange1"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('multipleColumns')">
+    <van-picker
+      :title="t('title')"
+      :columns="t('dateColumns')"
+      @cancel="onCancel"
+      @confirm="onConfirm"
+    />
+  </demo-block>
+
+  <demo-block card v-if="!isWeapp" :title="t('cascade')">
+    <van-picker :title="t('title')" :columns="t('cascadeColumns')" />
+  </demo-block>
+
+  <demo-block card :title="t('disableOption')">
+    <van-picker :title="t('title')" :columns="t('disabledColumns')" />
+  </demo-block>
+
+  <demo-block card :title="t('setColumnValues')">
+    <van-picker
+      ref="picker"
+      :title="t('title')"
+      :columns="columns"
+      @change="onChange2"
+    />
+  </demo-block>
+
+  <demo-block card :title="t('loadingStatus')">
+    <van-picker loading :title="t('title')" :columns="columns" />
+  </demo-block>
+
+  <demo-block card v-if="!isWeapp" :title="t('withPopup')">
+    <van-field
+      v-model="fieldValue"
+      readonly
+      clickable
+      :label="t('city')"
+      :placeholder="t('chooseCity')"
+      @click="onClickField"
+    />
+    <van-popup v-model:show="showPicker" round position="bottom">
       <van-picker
         :title="t('title')"
         :columns="t('textColumns')"
-        @change="onChange1"
+        @cancel="onCancel2"
+        @confirm="onConfirm2"
       />
-    </demo-block>
-
-    <demo-block card :title="t('defaultIndex')">
-      <van-picker
-        :title="t('title')"
-        :columns="t('textColumns')"
-        :default-index="2"
-        @change="onChange1"
-      />
-    </demo-block>
-
-    <demo-block card :title="t('multipleColumns')">
-      <van-picker
-        :title="t('title')"
-        :columns="t('dateColumns')"
-        @cancel="onCancel"
-        @confirm="onConfirm"
-      />
-    </demo-block>
-
-    <demo-block card v-if="!isWeapp" :title="t('cascade')">
-      <van-picker :title="t('title')" :columns="t('cascadeColumns')" />
-    </demo-block>
-
-    <demo-block card :title="t('disableOption')">
-      <van-picker :title="t('title')" :columns="t('disabledColumns')" />
-    </demo-block>
-
-    <demo-block card :title="t('setColumnValues')">
-      <van-picker
-        ref="picker"
-        :title="t('title')"
-        :columns="columns"
-        @change="onChange2"
-      />
-    </demo-block>
-
-    <demo-block card :title="t('loadingStatus')">
-      <van-picker loading :title="t('title')" :columns="columns" />
-    </demo-block>
-
-    <demo-block card v-if="!isWeapp" :title="t('withPopup')">
-      <van-field
-        v-model="fieldValue"
-        readonly
-        clickable
-        :label="t('city')"
-        :placeholder="t('chooseCity')"
-        @click="onClickField"
-      />
-      <van-popup v-model:show="showPicker" round position="bottom">
-        <van-picker
-          :title="t('title')"
-          :columns="t('textColumns')"
-          @cancel="onCancel2"
-          @confirm="onConfirm2"
-        />
-      </van-popup>
-    </demo-block>
-  </demo-section>
+    </van-popup>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index 3eb7a8c25..1d903b11c 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -1,102 +1,96 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
-      <van-popup v-model:show="showBasic" :style="{ padding: '30px 50px' }">
-        {{ t('content') }}
-      </van-popup>
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
+    <van-popup v-model:show="showBasic" :style="{ padding: '30px 50px' }">
+      {{ t('content') }}
+    </van-popup>
+  </demo-block>
 
-    <demo-block card :title="t('position')">
-      <van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
-      <van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
-      <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
-      <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
+  <demo-block card :title="t('position')">
+    <van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
+    <van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
+    <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
+    <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
 
-      <van-popup
-        v-model:show="showTop"
-        position="top"
-        :style="{ height: '30%' }"
-      />
-      <van-popup
-        v-model:show="showBottom"
-        position="bottom"
-        :style="{ height: '30%' }"
-      />
-      <van-popup
-        v-model:show="showLeft"
-        position="left"
-        :style="{ width: '30%', height: '100%' }"
-      />
-      <van-popup
-        v-model:show="showRight"
-        position="right"
-        :style="{ width: '30%', height: '100%' }"
-      />
-    </demo-block>
+    <van-popup
+      v-model:show="showTop"
+      position="top"
+      :style="{ height: '30%' }"
+    />
+    <van-popup
+      v-model:show="showBottom"
+      position="bottom"
+      :style="{ height: '30%' }"
+    />
+    <van-popup
+      v-model:show="showLeft"
+      position="left"
+      :style="{ width: '30%', height: '100%' }"
+    />
+    <van-popup
+      v-model:show="showRight"
+      position="right"
+      :style="{ width: '30%', height: '100%' }"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('closeIcon')">
-      <van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
-      <van-cell
-        :title="t('customCloseIcon')"
-        is-link
-        @click="showCustomCloseIcon = true"
-      />
-      <van-cell
-        :title="t('customIconPosition')"
-        is-link
-        @click="showCustomIconPosition = true"
-      />
+  <demo-block card :title="t('closeIcon')">
+    <van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
+    <van-cell
+      :title="t('customCloseIcon')"
+      is-link
+      @click="showCustomCloseIcon = true"
+    />
+    <van-cell
+      :title="t('customIconPosition')"
+      is-link
+      @click="showCustomIconPosition = true"
+    />
 
-      <van-popup
-        v-model:show="showCloseIcon"
-        closeable
-        position="bottom"
-        :style="{ height: '30%' }"
-      />
-      <van-popup
-        v-model:show="showCustomCloseIcon"
-        closeable
-        close-icon="close"
-        position="bottom"
-        :style="{ height: '30%' }"
-      />
-      <van-popup
-        v-model:show="showCustomIconPosition"
-        closeable
-        close-icon-position="top-left"
-        position="bottom"
-        :style="{ height: '30%' }"
-      />
-    </demo-block>
+    <van-popup
+      v-model:show="showCloseIcon"
+      closeable
+      position="bottom"
+      :style="{ height: '30%' }"
+    />
+    <van-popup
+      v-model:show="showCustomCloseIcon"
+      closeable
+      close-icon="close"
+      position="bottom"
+      :style="{ height: '30%' }"
+    />
+    <van-popup
+      v-model:show="showCustomIconPosition"
+      closeable
+      close-icon-position="top-left"
+      position="bottom"
+      :style="{ height: '30%' }"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('roundCorner')">
-      <van-cell
-        :title="t('roundCorner')"
-        is-link
-        @click="showRoundCorner = true"
-      />
-      <van-popup
-        v-model:show="showRoundCorner"
-        round
-        position="bottom"
-        :style="{ height: '30%' }"
-      />
-    </demo-block>
+  <demo-block card :title="t('roundCorner')">
+    <van-cell
+      :title="t('roundCorner')"
+      is-link
+      @click="showRoundCorner = true"
+    />
+    <van-popup
+      v-model:show="showRoundCorner"
+      round
+      position="bottom"
+      :style="{ height: '30%' }"
+    />
+  </demo-block>
 
-    <demo-block card v-if="!isWeapp" :title="t('teleport')">
-      <van-cell
-        :title="t('teleport')"
-        is-link
-        @click="showGetContainer = true"
-      />
-      <van-popup
-        v-model:show="showGetContainer"
-        teleport="body"
-        :style="{ padding: '30px 50px' }"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block card v-if="!isWeapp" :title="t('teleport')">
+    <van-cell :title="t('teleport')" is-link @click="showGetContainer = true" />
+    <van-popup
+      v-model:show="showGetContainer"
+      teleport="body"
+      :style="{ padding: '30px 50px' }"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
index f07c9d46f..e6f0498f7 100644
--- a/src/progress/demo/index.vue
+++ b/src/progress/demo/index.vue
@@ -1,32 +1,26 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-progress :percentage="50" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-progress :percentage="50" />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('strokeWidth')">
-      <van-progress :percentage="50" stroke-width="8" />
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('strokeWidth')">
+    <van-progress :percentage="50" stroke-width="8" />
+  </demo-block>
 
-    <demo-block :title="t('title2')">
-      <van-progress inactive :percentage="50" />
-    </demo-block>
+  <demo-block :title="t('title2')">
+    <van-progress inactive :percentage="50" />
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-progress
-        color="#f2826a"
-        :percentage="25"
-        :pivot-text="t('orange')"
-      />
-      <van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
-      <van-progress
-        :percentage="75"
-        :pivot-text="t('purple')"
-        pivot-color="#7232dd"
-        color="linear-gradient(to right, #be99ff, #7232dd)"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('title3')">
+    <van-progress color="#f2826a" :percentage="25" :pivot-text="t('orange')" />
+    <van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
+    <van-progress
+      :percentage="75"
+      :pivot-text="t('purple')"
+      pivot-color="#7232dd"
+      color="linear-gradient(to right, #be99ff, #7232dd)"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index 27dccc5b1..9167711ea 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -1,46 +1,44 @@
 <template>
-  <demo-section name="pull-refresh">
-    <van-tabs>
-      <van-tab :title="t('basicUsage')">
-        <van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
-          <p>{{ tips }}</p>
-        </van-pull-refresh>
-      </van-tab>
+  <van-tabs>
+    <van-tab :title="t('basicUsage')">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
+        <p>{{ tips }}</p>
+      </van-pull-refresh>
+    </van-tab>
 
-      <van-tab :title="t('successTip')">
-        <van-pull-refresh
-          v-model="isLoading"
-          :success-text="t('success')"
-          @refresh="onRefresh(false)"
-        >
-          <p>{{ tips }}</p>
-        </van-pull-refresh>
-      </van-tab>
+    <van-tab :title="t('successTip')">
+      <van-pull-refresh
+        v-model="isLoading"
+        :success-text="t('success')"
+        @refresh="onRefresh(false)"
+      >
+        <p>{{ tips }}</p>
+      </van-pull-refresh>
+    </van-tab>
 
-      <van-tab :title="t('customTips')">
-        <van-pull-refresh
-          v-model="isLoading"
-          head-height="80"
-          @refresh="onRefresh(true)"
-        >
-          <template #pulling="{ distance }">
-            <img
-              class="doge"
-              src="https://b.yzcdn.cn/vant/doge.png"
-              :style="{ transform: `scale(${distance / 80})` }"
-            />
-          </template>
-          <template #loosing>
-            <img src="https://b.yzcdn.cn/vant/doge.png" class="doge" />
-          </template>
-          <template #loading>
-            <img src="https://b.yzcdn.cn/vant/doge-fire.jpg" class="doge" />
-          </template>
-          <p>{{ tips }}</p>
-        </van-pull-refresh>
-      </van-tab>
-    </van-tabs>
-  </demo-section>
+    <van-tab :title="t('customTips')">
+      <van-pull-refresh
+        v-model="isLoading"
+        head-height="80"
+        @refresh="onRefresh(true)"
+      >
+        <template #pulling="{ distance }">
+          <img
+            class="doge"
+            src="https://b.yzcdn.cn/vant/doge.png"
+            :style="{ transform: `scale(${distance / 80})` }"
+          />
+        </template>
+        <template #loosing>
+          <img src="https://b.yzcdn.cn/vant/doge.png" class="doge" />
+        </template>
+        <template #loading>
+          <img src="https://b.yzcdn.cn/vant/doge-fire.jpg" class="doge" />
+        </template>
+        <p>{{ tips }}</p>
+      </van-pull-refresh>
+    </van-tab>
+  </van-tabs>
 </template>
 
 <script>
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index ec64036d4..5b9a9dc00 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -1,100 +1,98 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-radio-group v-model="radio1" class="demo-radio-group">
-        <van-radio name="1">{{ t('radio') }} 1</van-radio>
-        <van-radio name="2">{{ t('radio') }} 2</van-radio>
-      </van-radio-group>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-radio-group v-model="radio1" class="demo-radio-group">
+      <van-radio name="1">{{ t('radio') }} 1</van-radio>
+      <van-radio name="2">{{ t('radio') }} 2</van-radio>
+    </van-radio-group>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('horizontal')">
-      <van-radio-group
-        v-model="radioHorizontal"
-        class="demo-radio-group"
-        direction="horizontal"
-      >
-        <van-radio name="1">{{ t('radio') }} 1</van-radio>
-        <van-radio name="2">{{ t('radio') }} 2</van-radio>
-      </van-radio-group>
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('horizontal')">
+    <van-radio-group
+      v-model="radioHorizontal"
+      class="demo-radio-group"
+      direction="horizontal"
+    >
+      <van-radio name="1">{{ t('radio') }} 1</van-radio>
+      <van-radio name="2">{{ t('radio') }} 2</van-radio>
+    </van-radio-group>
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
-        <van-radio name="1">{{ t('radio') }} 1</van-radio>
-        <van-radio name="2">{{ t('radio') }} 2</van-radio>
-      </van-radio-group>
-    </demo-block>
+  <demo-block :title="t('disabled')">
+    <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
+      <van-radio name="1">{{ t('radio') }} 1</van-radio>
+      <van-radio name="2">{{ t('radio') }} 2</van-radio>
+    </van-radio-group>
+  </demo-block>
 
-    <demo-block :title="t('customShape')">
-      <van-radio-group v-model="radioShape" class="demo-radio-group">
-        <van-radio name="1" shape="square">{{ t('radio') }} 1</van-radio>
-        <van-radio name="2" shape="square">{{ t('radio') }} 2</van-radio>
-      </van-radio-group>
-    </demo-block>
+  <demo-block :title="t('customShape')">
+    <van-radio-group v-model="radioShape" class="demo-radio-group">
+      <van-radio name="1" shape="square">{{ t('radio') }} 1</van-radio>
+      <van-radio name="2" shape="square">{{ t('radio') }} 2</van-radio>
+    </van-radio-group>
+  </demo-block>
 
-    <demo-block :title="t('customColor')">
-      <van-radio-group v-model="radio3" class="demo-radio-group">
-        <van-radio name="1" checked-color="#07c160">
-          {{ t('radio') }} 1
-        </van-radio>
-        <van-radio name="2" checked-color="#07c160">
-          {{ t('radio') }} 2
-        </van-radio>
-      </van-radio-group>
-    </demo-block>
+  <demo-block :title="t('customColor')">
+    <van-radio-group v-model="radio3" class="demo-radio-group">
+      <van-radio name="1" checked-color="#07c160">
+        {{ t('radio') }} 1
+      </van-radio>
+      <van-radio name="2" checked-color="#07c160">
+        {{ t('radio') }} 2
+      </van-radio>
+    </van-radio-group>
+  </demo-block>
 
-    <demo-block :title="t('customIconSize')">
-      <van-radio-group v-model="radioIconSize" class="demo-radio-group">
-        <van-radio name="1" checked-color="#07c160" icon-size="24px">
-          {{ t('radio') }} 1
-        </van-radio>
-        <van-radio name="2" checked-color="#07c160" icon-size="24px">
-          {{ t('radio') }} 2
-        </van-radio>
-      </van-radio-group>
-    </demo-block>
+  <demo-block :title="t('customIconSize')">
+    <van-radio-group v-model="radioIconSize" class="demo-radio-group">
+      <van-radio name="1" checked-color="#07c160" icon-size="24px">
+        {{ t('radio') }} 1
+      </van-radio>
+      <van-radio name="2" checked-color="#07c160" icon-size="24px">
+        {{ t('radio') }} 2
+      </van-radio>
+    </van-radio-group>
+  </demo-block>
 
-    <demo-block :title="t('customIcon')">
-      <van-radio-group v-model="radio4" class="demo-radio-group">
-        <van-radio name="1">
-          {{ t('radio') }} 1
-          <template #icon="{ checked }">
-            <img :src="checked ? icon.active : icon.inactive" />
+  <demo-block :title="t('customIcon')">
+    <van-radio-group v-model="radio4" class="demo-radio-group">
+      <van-radio name="1">
+        {{ t('radio') }} 1
+        <template #icon="{ checked }">
+          <img :src="checked ? icon.active : icon.inactive" />
+        </template>
+      </van-radio>
+      <van-radio name="2">
+        {{ t('radio') }} 2
+        <template #icon="{ checked }">
+          <img :src="checked ? icon.active : icon.inactive" />
+        </template>
+      </van-radio>
+    </van-radio-group>
+  </demo-block>
+
+  <demo-block :title="t('disableLabel')">
+    <van-radio-group v-model="radioLabel" class="demo-radio-group">
+      <van-radio name="1" label-disabled>{{ t('radio') }} 1</van-radio>
+      <van-radio name="2" label-disabled>{{ t('radio') }} 2</van-radio>
+    </van-radio-group>
+  </demo-block>
+
+  <demo-block :title="t('withCell')">
+    <van-radio-group v-model="radio5">
+      <van-cell-group>
+        <van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
+          <template #right-icon>
+            <van-radio name="1" />
           </template>
-        </van-radio>
-        <van-radio name="2">
-          {{ t('radio') }} 2
-          <template #icon="{ checked }">
-            <img :src="checked ? icon.active : icon.inactive" />
+        </van-cell>
+        <van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
+          <template #right-icon>
+            <van-radio name="2" />
           </template>
-        </van-radio>
-      </van-radio-group>
-    </demo-block>
-
-    <demo-block :title="t('disableLabel')">
-      <van-radio-group v-model="radioLabel" class="demo-radio-group">
-        <van-radio name="1" label-disabled>{{ t('radio') }} 1</van-radio>
-        <van-radio name="2" label-disabled>{{ t('radio') }} 2</van-radio>
-      </van-radio-group>
-    </demo-block>
-
-    <demo-block :title="t('withCell')">
-      <van-radio-group v-model="radio5">
-        <van-cell-group>
-          <van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
-            <template #right-icon>
-              <van-radio name="1" />
-            </template>
-          </van-cell>
-          <van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
-            <template #right-icon>
-              <van-radio name="2" />
-            </template>
-          </van-cell>
-        </van-cell-group>
-      </van-radio-group>
-    </demo-block>
-  </demo-section>
+        </van-cell>
+      </van-cell-group>
+    </van-radio-group>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index b66911d0b..ba85bfac0 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -1,49 +1,47 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-rate v-model="value1" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-rate v-model="value1" />
+  </demo-block>
 
-    <demo-block :title="t('customIcon')">
-      <van-rate v-model="value2" icon="like" void-icon="like-o" />
-    </demo-block>
+  <demo-block :title="t('customIcon')">
+    <van-rate v-model="value2" icon="like" void-icon="like-o" />
+  </demo-block>
 
-    <demo-block :title="t('customStyle')">
-      <van-rate
-        v-model="value3"
-        :size="25"
-        color="#ffd21e"
-        void-icon="star"
-        void-color="#eee"
-      />
-    </demo-block>
+  <demo-block :title="t('customStyle')">
+    <van-rate
+      v-model="value3"
+      :size="25"
+      color="#ffd21e"
+      void-icon="star"
+      void-color="#eee"
+    />
+  </demo-block>
 
-    <demo-block :title="t('halfStar')">
-      <van-rate
-        v-model="value4"
-        :size="25"
-        allow-half
-        void-icon="star"
-        void-color="#eee"
-      />
-    </demo-block>
+  <demo-block :title="t('halfStar')">
+    <van-rate
+      v-model="value4"
+      :size="25"
+      allow-half
+      void-icon="star"
+      void-color="#eee"
+    />
+  </demo-block>
 
-    <demo-block :title="t('customCount')">
-      <van-rate v-model="value5" :count="6" />
-    </demo-block>
+  <demo-block :title="t('customCount')">
+    <van-rate v-model="value5" :count="6" />
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-rate v-model="value6" disabled />
-    </demo-block>
+  <demo-block :title="t('disabled')">
+    <van-rate v-model="value6" disabled />
+  </demo-block>
 
-    <demo-block :title="t('readonly')">
-      <van-rate v-model="value6" readonly />
-    </demo-block>
+  <demo-block :title="t('readonly')">
+    <van-rate v-model="value6" readonly />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('changeEvent')">
-      <van-rate v-model="value7" @change="onChange" />
-    </demo-block>
-  </demo-section>
+  <demo-block v-if="!isWeapp" :title="t('changeEvent')">
+    <van-rate v-model="value7" @change="onChange" />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index d47c77cb5..bb3c3a69d 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -1,56 +1,54 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-search v-model="value1" :placeholder="t('placeholder')" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-search v-model="value1" :placeholder="t('placeholder')" />
+  </demo-block>
 
-    <demo-block :title="t('listenToEvents')">
-      <form action="/">
-        <van-search
-          v-model="value5"
-          :placeholder="t('placeholder')"
-          show-action
-          @search="onSearch"
-          @cancel="onCancel"
-        />
-      </form>
-    </demo-block>
-
-    <demo-block :title="t('inputAlign')">
+  <demo-block :title="t('listenToEvents')">
+    <form action="/">
       <van-search
-        v-model="value4"
+        v-model="value5"
         :placeholder="t('placeholder')"
-        input-align="center"
-      />
-    </demo-block>
-
-    <demo-block :title="t('disabled')">
-      <van-search v-model="value3" :placeholder="t('placeholder')" disabled />
-    </demo-block>
-
-    <demo-block :title="t('background')">
-      <van-search
-        v-model="value2"
-        :placeholder="t('placeholder')"
-        shape="round"
-        background="#4fc08d"
-      />
-    </demo-block>
-
-    <demo-block :title="t('customButton')">
-      <van-search
-        v-model="value6"
         show-action
-        :label="t('label')"
-        :placeholder="t('placeholder')"
         @search="onSearch"
-      >
-        <template #action>
-          <div @click="onSearch">{{ t('search') }}</div>
-        </template>
-      </van-search>
-    </demo-block>
-  </demo-section>
+        @cancel="onCancel"
+      />
+    </form>
+  </demo-block>
+
+  <demo-block :title="t('inputAlign')">
+    <van-search
+      v-model="value4"
+      :placeholder="t('placeholder')"
+      input-align="center"
+    />
+  </demo-block>
+
+  <demo-block :title="t('disabled')">
+    <van-search v-model="value3" :placeholder="t('placeholder')" disabled />
+  </demo-block>
+
+  <demo-block :title="t('background')">
+    <van-search
+      v-model="value2"
+      :placeholder="t('placeholder')"
+      shape="round"
+      background="#4fc08d"
+    />
+  </demo-block>
+
+  <demo-block :title="t('customButton')">
+    <van-search
+      v-model="value6"
+      show-action
+      :label="t('label')"
+      :placeholder="t('placeholder')"
+      @search="onSearch"
+    >
+      <template #action>
+        <div @click="onSearch">{{ t('search') }}</div>
+      </template>
+    </van-search>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index 733827c1c..5702b806d 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -1,53 +1,43 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
-      <van-share-sheet
-        v-model:show="show.basic"
-        :title="t('title')"
-        :options="options"
-        @select="onSelect"
-      />
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
+    <van-share-sheet
+      v-model:show="show.basic"
+      :title="t('title')"
+      :options="options"
+      @select="onSelect"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('multiLine')">
-      <van-cell
-        is-link
-        :title="t('showSheet')"
-        @click="show.multiLine = true"
-      />
-      <van-share-sheet
-        v-model:show="show.multiLine"
-        :title="t('title')"
-        :options="multiLineOptions"
-        @select="onSelect"
-      />
-    </demo-block>
+  <demo-block card :title="t('multiLine')">
+    <van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
+    <van-share-sheet
+      v-model:show="show.multiLine"
+      :title="t('title')"
+      :options="multiLineOptions"
+      @select="onSelect"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('customIcon')">
-      <van-cell
-        is-link
-        :title="t('showSheet')"
-        @click="show.customIcon = true"
-      />
-      <van-share-sheet
-        v-model:show="show.customIcon"
-        :options="customIconOptions"
-        @select="onSelect"
-      />
-    </demo-block>
+  <demo-block card :title="t('customIcon')">
+    <van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
+    <van-share-sheet
+      v-model:show="show.customIcon"
+      :options="customIconOptions"
+      @select="onSelect"
+    />
+  </demo-block>
 
-    <demo-block card :title="t('withDesc')">
-      <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
-      <van-share-sheet
-        v-model:show="show.withDesc"
-        :title="t('title')"
-        :options="optionsWithDesc"
-        :description="t('description')"
-        @select="onSelect"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block card :title="t('withDesc')">
+    <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
+    <van-share-sheet
+      v-model:show="show.withDesc"
+      :title="t('title')"
+      :options="optionsWithDesc"
+      :description="t('description')"
+      @select="onSelect"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index 5ab0d55f8..c82b67f14 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -1,43 +1,41 @@
 <template>
-  <demo-section>
-    <van-grid :column-num="2" :border="false">
-      <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
-        <van-sidebar v-model="activeKey1">
-          <van-sidebar-item :title="t('title')" />
-          <van-sidebar-item :title="t('title')" />
-          <van-sidebar-item :title="t('title')" />
-        </van-sidebar>
-      </van-grid-item>
+  <van-grid :column-num="2" :border="false">
+    <van-grid-item>
+      <h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
+      <van-sidebar v-model="activeKey1">
+        <van-sidebar-item :title="t('title')" />
+        <van-sidebar-item :title="t('title')" />
+        <van-sidebar-item :title="t('title')" />
+      </van-sidebar>
+    </van-grid-item>
 
-      <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
-        <van-sidebar v-model="activeKey2">
-          <van-sidebar-item :title="t('title')" dot />
-          <van-sidebar-item :title="t('title')" badge="5" />
-          <van-sidebar-item :title="t('title')" badge="99+" />
-        </van-sidebar>
-      </van-grid-item>
+    <van-grid-item>
+      <h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
+      <van-sidebar v-model="activeKey2">
+        <van-sidebar-item :title="t('title')" dot />
+        <van-sidebar-item :title="t('title')" badge="5" />
+        <van-sidebar-item :title="t('title')" badge="99+" />
+      </van-sidebar>
+    </van-grid-item>
 
-      <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
-        <van-sidebar v-model="activeKey3">
-          <van-sidebar-item :title="t('title')" />
-          <van-sidebar-item :title="t('title')" disabled />
-          <van-sidebar-item :title="t('title')" />
-        </van-sidebar>
-      </van-grid-item>
+    <van-grid-item>
+      <h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
+      <van-sidebar v-model="activeKey3">
+        <van-sidebar-item :title="t('title')" />
+        <van-sidebar-item :title="t('title')" disabled />
+        <van-sidebar-item :title="t('title')" />
+      </van-sidebar>
+    </van-grid-item>
 
-      <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
-        <van-sidebar v-model="activeKey4" @change="onChange">
-          <van-sidebar-item :title="t('title') + 1" />
-          <van-sidebar-item :title="t('title') + 2" />
-          <van-sidebar-item :title="t('title') + 3" />
-        </van-sidebar>
-      </van-grid-item>
-    </van-grid>
-  </demo-section>
+    <van-grid-item>
+      <h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
+      <van-sidebar v-model="activeKey4" @change="onChange">
+        <van-sidebar-item :title="t('title') + 1" />
+        <van-sidebar-item :title="t('title') + 2" />
+        <van-sidebar-item :title="t('title') + 3" />
+      </van-sidebar>
+    </van-grid-item>
+  </van-grid>
 </template>
 
 <script>
diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index 9dc9591d7..ba3b6d2c9 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -1,26 +1,24 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-skeleton title :row="3" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-skeleton title :row="3" />
+  </demo-block>
 
-    <demo-block :title="t('showAvatar')">
-      <van-skeleton title avatar :row="3" />
-    </demo-block>
+  <demo-block :title="t('showAvatar')">
+    <van-skeleton title avatar :row="3" />
+  </demo-block>
 
-    <demo-block :title="t('showChildren')">
-      <van-switch v-model="show" size="24px" />
-      <van-skeleton title avatar :row="3" :loading="!show">
-        <div class="demo-preview">
-          <img src="https://img.yzcdn.cn/vant/logo.png" />
-          <div class="demo-content">
-            <h3>{{ t('title') }}</h3>
-            <p>{{ t('desc') }}</p>
-          </div>
+  <demo-block :title="t('showChildren')">
+    <van-switch v-model="show" size="24px" />
+    <van-skeleton title avatar :row="3" :loading="!show">
+      <div class="demo-preview">
+        <img src="https://img.yzcdn.cn/vant/logo.png" />
+        <div class="demo-content">
+          <h3>{{ t('title') }}</h3>
+          <p>{{ t('desc') }}</p>
         </div>
-      </van-skeleton>
-    </demo-block>
-  </demo-section>
+      </div>
+    </van-skeleton>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index 5d8302ad4..2b02445b8 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -1,55 +1,53 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('title1')">
-      <van-slider v-model="value1" @change="onChange" />
-    </demo-block>
+  <demo-block :title="t('title1')">
+    <van-slider v-model="value1" @change="onChange" />
+  </demo-block>
 
-    <demo-block :title="t('title2')">
-      <van-slider range v-model="value2" @change="onChange" />
-    </demo-block>
+  <demo-block :title="t('title2')">
+    <van-slider range v-model="value2" @change="onChange" />
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-slider v-model="value3" :min="-50" :max="50" @change="onChange" />
-    </demo-block>
+  <demo-block :title="t('title3')">
+    <van-slider v-model="value3" :min="-50" :max="50" @change="onChange" />
+  </demo-block>
 
-    <demo-block :title="t('title4')">
-      <van-slider v-model="value4" disabled />
-    </demo-block>
+  <demo-block :title="t('title4')">
+    <van-slider v-model="value4" disabled />
+  </demo-block>
 
-    <demo-block :title="t('title5')">
-      <van-slider v-model="value5" :step="10" @change="onChange" />
-    </demo-block>
+  <demo-block :title="t('title5')">
+    <van-slider v-model="value5" :step="10" @change="onChange" />
+  </demo-block>
 
-    <demo-block :title="t('customStyle')">
+  <demo-block :title="t('customStyle')">
+    <van-slider
+      v-model="value6"
+      bar-height="4px"
+      active-color="#ee0a24"
+      @change="onChange"
+    />
+  </demo-block>
+
+  <demo-block :title="t('customButton')">
+    <van-slider v-model="value7" active-color="#ee0a24">
+      <template #button>
+        <div class="custom-button">{{ value7 }}</div>
+      </template>
+    </van-slider>
+  </demo-block>
+
+  <demo-block v-if="!isWeapp" :title="t('vertical')">
+    <div :style="{ height: '150px', paddingLeft: '30px' }">
+      <van-slider v-model="value8" vertical @change="onChange" />
       <van-slider
-        v-model="value6"
-        bar-height="4px"
-        active-color="#ee0a24"
+        v-model="value9"
+        range
+        vertical
+        style="margin-left: 100px;"
         @change="onChange"
       />
-    </demo-block>
-
-    <demo-block :title="t('customButton')">
-      <van-slider v-model="value7" active-color="#ee0a24">
-        <template #button>
-          <div class="custom-button">{{ value7 }}</div>
-        </template>
-      </van-slider>
-    </demo-block>
-
-    <demo-block v-if="!isWeapp" :title="t('vertical')">
-      <div :style="{ height: '150px', paddingLeft: '30px' }">
-        <van-slider v-model="value8" vertical @change="onChange" />
-        <van-slider
-          v-model="value9"
-          range
-          vertical
-          style="margin-left: 100px;"
-          @change="onChange"
-        />
-      </div>
-    </demo-block>
-  </demo-section>
+    </div>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 399cdb52f..550edf81b 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -1,50 +1,48 @@
 <template>
-  <demo-section>
-    <van-cell center :title="t('basicUsage')">
-      <van-stepper v-model="stepper1" />
-    </van-cell>
+  <van-cell center :title="t('basicUsage')">
+    <van-stepper v-model="stepper1" />
+  </van-cell>
 
-    <van-cell center :title="t('step')">
-      <van-stepper v-model="stepper2" step="2" />
-    </van-cell>
+  <van-cell center :title="t('step')">
+    <van-stepper v-model="stepper2" step="2" />
+  </van-cell>
 
-    <van-cell center :title="t('range')">
-      <van-stepper v-model="stepper3" :min="5" :max="8" />
-    </van-cell>
+  <van-cell center :title="t('range')">
+    <van-stepper v-model="stepper3" :min="5" :max="8" />
+  </van-cell>
 
-    <van-cell center :title="t('integer')">
-      <van-stepper v-model="stepper4" integer />
-    </van-cell>
+  <van-cell center :title="t('integer')">
+    <van-stepper v-model="stepper4" integer />
+  </van-cell>
 
-    <van-cell center :title="t('disabled')">
-      <van-stepper v-model="stepper5" disabled />
-    </van-cell>
+  <van-cell center :title="t('disabled')">
+    <van-stepper v-model="stepper5" disabled />
+  </van-cell>
 
-    <van-cell center :title="t('disableInput')">
-      <van-stepper v-model="disabledInput" disable-input />
-    </van-cell>
+  <van-cell center :title="t('disableInput')">
+    <van-stepper v-model="disabledInput" disable-input />
+  </van-cell>
 
-    <van-cell center :title="t('decimalLength')">
-      <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
-    </van-cell>
+  <van-cell center :title="t('decimalLength')">
+    <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
+  </van-cell>
 
-    <van-cell center :title="t('customSize')">
-      <van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
-    </van-cell>
+  <van-cell center :title="t('customSize')">
+    <van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
+  </van-cell>
 
-    <van-cell center :title="t('asyncChange')">
-      <van-stepper :model-value="stepper6" async-change @change="onChange" />
-    </van-cell>
+  <van-cell center :title="t('asyncChange')">
+    <van-stepper :model-value="stepper6" async-change @change="onChange" />
+  </van-cell>
 
-    <van-cell v-if="!isWeapp" center :title="t('roundTheme')">
-      <van-stepper
-        v-model="stepperRound"
-        theme="round"
-        button-size="22"
-        disable-input
-      />
-    </van-cell>
-  </demo-section>
+  <van-cell v-if="!isWeapp" center :title="t('roundTheme')">
+    <van-stepper
+      v-model="stepperRound"
+      theme="round"
+      button-size="22"
+      disable-input
+    />
+  </van-cell>
 </template>
 
 <script>
diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue
index 1d0a6236b..ed762f0db 100644
--- a/src/steps/demo/index.vue
+++ b/src/steps/demo/index.vue
@@ -1,47 +1,45 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-steps :active="active">
-        <van-step>{{ t('step1') }}</van-step>
-        <van-step>{{ t('step2') }}</van-step>
-        <van-step>{{ t('step3') }}</van-step>
-        <van-step>{{ t('step4') }}</van-step>
-      </van-steps>
+  <demo-block :title="t('basicUsage')">
+    <van-steps :active="active">
+      <van-step>{{ t('step1') }}</van-step>
+      <van-step>{{ t('step2') }}</van-step>
+      <van-step>{{ t('step3') }}</van-step>
+      <van-step>{{ t('step4') }}</van-step>
+    </van-steps>
 
-      <van-button @click="nextStep">{{ t('nextStep') }}</van-button>
-    </demo-block>
+    <van-button @click="nextStep">{{ t('nextStep') }}</van-button>
+  </demo-block>
 
-    <demo-block :title="t('customStyle')">
-      <van-steps
-        :active="active"
-        active-icon="success"
-        inactive-icon="arrow"
-        active-color="#38f"
-      >
-        <van-step>{{ t('step1') }}</van-step>
-        <van-step>{{ t('step2') }}</van-step>
-        <van-step>{{ t('step3') }}</van-step>
-        <van-step>{{ t('step4') }}</van-step>
-      </van-steps>
-    </demo-block>
+  <demo-block :title="t('customStyle')">
+    <van-steps
+      :active="active"
+      active-icon="success"
+      inactive-icon="arrow"
+      active-color="#38f"
+    >
+      <van-step>{{ t('step1') }}</van-step>
+      <van-step>{{ t('step2') }}</van-step>
+      <van-step>{{ t('step3') }}</van-step>
+      <van-step>{{ t('step4') }}</van-step>
+    </van-steps>
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-steps :active="0" direction="vertical">
-        <van-step>
-          <h3>{{ t('status1') }}</h3>
-          <p>2016-07-12 12:40</p>
-        </van-step>
-        <van-step>
-          <h3>{{ t('status2') }}</h3>
-          <p>2016-07-11 10:00</p>
-        </van-step>
-        <van-step>
-          <h3>{{ t('status3') }}</h3>
-          <p>2016-07-10 09:30</p>
-        </van-step>
-      </van-steps>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('title3')">
+    <van-steps :active="0" direction="vertical">
+      <van-step>
+        <h3>{{ t('status1') }}</h3>
+        <p>2016-07-12 12:40</p>
+      </van-step>
+      <van-step>
+        <h3>{{ t('status2') }}</h3>
+        <p>2016-07-11 10:00</p>
+      </van-step>
+      <van-step>
+        <h3>{{ t('status3') }}</h3>
+        <p>2016-07-10 09:30</p>
+      </van-step>
+    </van-steps>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue
index 0aacd6bab..ba7bc0dd9 100644
--- a/src/sticky/demo/index.vue
+++ b/src/sticky/demo/index.vue
@@ -1,31 +1,29 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-sticky>
-        <van-button type="primary" style="margin-left: 15px;">
-          {{ t('basicUsage') }}
+  <demo-block :title="t('basicUsage')">
+    <van-sticky>
+      <van-button type="primary" style="margin-left: 15px;">
+        {{ t('basicUsage') }}
+      </van-button>
+    </van-sticky>
+  </demo-block>
+
+  <demo-block :title="t('offsetTop')">
+    <van-sticky :offset-top="50">
+      <van-button type="primary" style="margin-left: 115px;">
+        {{ t('offsetTop') }}
+      </van-button>
+    </van-sticky>
+  </demo-block>
+
+  <demo-block v-if="!isWeapp" :title="t('setContainer')">
+    <div ref="container" style="height: 150px; background-color: #fff;">
+      <van-sticky :container="container">
+        <van-button type="warning" style="margin-left: 215px;">
+          {{ t('setContainer') }}
         </van-button>
       </van-sticky>
-    </demo-block>
-
-    <demo-block :title="t('offsetTop')">
-      <van-sticky :offset-top="50">
-        <van-button type="primary" style="margin-left: 115px;">
-          {{ t('offsetTop') }}
-        </van-button>
-      </van-sticky>
-    </demo-block>
-
-    <demo-block v-if="!isWeapp" :title="t('setContainer')">
-      <div ref="container" style="height: 150px; background-color: #fff;">
-        <van-sticky :container="container">
-          <van-button type="warning" style="margin-left: 215px;">
-            {{ t('setContainer') }}
-          </van-button>
-        </van-sticky>
-      </div>
-    </demo-block>
-  </demo-section>
+    </div>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index df01ad4a7..8f7fbea01 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -1,30 +1,24 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('ellipsis')">
-      <div class="van-ellipsis">{{ t('text1') }}</div>
-      <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
-    </demo-block>
+  <demo-block :title="t('ellipsis')">
+    <div class="van-ellipsis">{{ t('text1') }}</div>
+    <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
+  </demo-block>
 
-    <demo-block card :title="t('hairline')">
-      <div class="van-hairline--top" />
-    </demo-block>
+  <demo-block card :title="t('hairline')">
+    <div class="van-hairline--top" />
+  </demo-block>
 
-    <demo-block card :title="t('animation')">
-      <van-cell is-link title="Fade" @click="animate('van-fade')" />
-      <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
-      <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
-      <van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
-      <van-cell
-        is-link
-        title="Slide Right"
-        @click="animate('van-slide-right')"
-      />
-    </demo-block>
+  <demo-block card :title="t('animation')">
+    <van-cell is-link title="Fade" @click="animate('van-fade')" />
+    <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
+    <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
+    <van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
+    <van-cell is-link title="Slide Right" @click="animate('van-slide-right')" />
+  </demo-block>
 
-    <transition :name="transitionName">
-      <div v-show="show" class="demo-animate-block" />
-    </transition>
-  </demo-section>
+  <transition :name="transitionName">
+    <div v-show="show" class="demo-animate-block" />
+  </transition>
 </template>
 
 <script>
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index cfeb247b0..65a557f4f 100644
--- a/src/submit-bar/demo/index.vue
+++ b/src/submit-bar/demo/index.vue
@@ -1,49 +1,47 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-submit-bar
-        :price="3050"
-        :button-text="t('submit')"
-        @submit="onClickButton"
-      />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-submit-bar
+      :price="3050"
+      :button-text="t('submit')"
+      @submit="onClickButton"
+    />
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-submit-bar
-        disabled
-        :price="3050"
-        :button-text="t('submit')"
-        :tip="t('tip1')"
-        tip-icon="info-o"
-        @submit="onClickButton"
-      />
-    </demo-block>
+  <demo-block :title="t('disabled')">
+    <van-submit-bar
+      disabled
+      :price="3050"
+      :button-text="t('submit')"
+      :tip="t('tip1')"
+      tip-icon="info-o"
+      @submit="onClickButton"
+    />
+  </demo-block>
 
-    <demo-block :title="t('loadingStatus')">
-      <van-submit-bar
-        loading
-        :price="3050"
-        :button-text="t('submit')"
-        @submit="onClickButton"
-      />
-    </demo-block>
+  <demo-block :title="t('loadingStatus')">
+    <van-submit-bar
+      loading
+      :price="3050"
+      :button-text="t('submit')"
+      @submit="onClickButton"
+    />
+  </demo-block>
 
-    <demo-block :title="t('advancedUsage')">
-      <van-submit-bar
-        :price="3050"
-        :button-text="t('submit')"
-        @submit="onClickButton"
-      >
-        <van-checkbox v-model="checked">{{ t('check') }}</van-checkbox>
-        <template #tip>
-          {{ t('tip2') }}
-          <span class="edit-address" @click="onClickLink">
-            {{ t('tip3') }}
-          </span>
-        </template>
-      </van-submit-bar>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('advancedUsage')">
+    <van-submit-bar
+      :price="3050"
+      :button-text="t('submit')"
+      @submit="onClickButton"
+    >
+      <van-checkbox v-model="checked">{{ t('check') }}</van-checkbox>
+      <template #tip>
+        {{ t('tip2') }}
+        <span class="edit-address" @click="onClickLink">
+          {{ t('tip3') }}
+        </span>
+      </template>
+    </van-submit-bar>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index d574d10fb..a1c4b50b4 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -1,52 +1,48 @@
 <template>
-  <div>
-    <demo-section>
-      <demo-block :title="t('basicUsage')">
-        <van-swipe-cell>
-          <template #left>
-            <van-button square type="primary" :text="t('select')" />
-          </template>
-          <van-cell :border="false" :title="t('title')" :value="t('content')" />
-          <template #right>
-            <van-button square type="danger" :text="t('delete')" />
-            <van-button square type="primary" :text="t('collect')" />
-          </template>
-        </van-swipe-cell>
-      </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-swipe-cell>
+      <template #left>
+        <van-button square type="primary" :text="t('select')" />
+      </template>
+      <van-cell :border="false" :title="t('title')" :value="t('content')" />
+      <template #right>
+        <van-button square type="danger" :text="t('delete')" />
+        <van-button square type="primary" :text="t('collect')" />
+      </template>
+    </van-swipe-cell>
+  </demo-block>
 
-      <demo-block :title="t('customContent')">
-        <van-swipe-cell>
-          <van-card
-            num="2"
-            price="2.00"
-            :desc="t('desc')"
-            :title="t('cardTitle')"
-            :thumb="imageURL"
-          />
-          <template #right>
-            <van-button
-              square
-              type="danger"
-              class="delete-button"
-              :text="t('delete')"
-            />
-          </template>
-        </van-swipe-cell>
-      </demo-block>
+  <demo-block :title="t('customContent')">
+    <van-swipe-cell>
+      <van-card
+        num="2"
+        price="2.00"
+        :desc="t('desc')"
+        :title="t('cardTitle')"
+        :thumb="imageURL"
+      />
+      <template #right>
+        <van-button
+          square
+          type="danger"
+          class="delete-button"
+          :text="t('delete')"
+        />
+      </template>
+    </van-swipe-cell>
+  </demo-block>
 
-      <demo-block :title="t('beforeClose')">
-        <van-swipe-cell :before-close="beforeClose">
-          <template #left>
-            <van-button square type="primary" :text="t('select')" />
-          </template>
-          <van-cell :border="false" :title="t('title')" :value="t('content')" />
-          <template #right>
-            <van-button square type="danger" :text="t('delete')" />
-          </template>
-        </van-swipe-cell>
-      </demo-block>
-    </demo-section>
-  </div>
+  <demo-block :title="t('beforeClose')">
+    <van-swipe-cell :before-close="beforeClose">
+      <template #left>
+        <van-button square type="primary" :text="t('select')" />
+      </template>
+      <van-cell :border="false" :title="t('title')" :value="t('content')" />
+      <template #right>
+        <van-button square type="danger" :text="t('delete')" />
+      </template>
+    </van-swipe-cell>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index a39c21dbd..ad82ecc0f 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -1,70 +1,68 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-swipe :autoplay="3000" indicator-color="white">
-        <van-swipe-item>1</van-swipe-item>
-        <van-swipe-item>2</van-swipe-item>
-        <van-swipe-item>3</van-swipe-item>
-        <van-swipe-item>4</van-swipe-item>
-      </van-swipe>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-swipe :autoplay="3000" indicator-color="white">
+      <van-swipe-item>1</van-swipe-item>
+      <van-swipe-item>2</van-swipe-item>
+      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item>4</van-swipe-item>
+    </van-swipe>
+  </demo-block>
 
-    <demo-block :title="t('title2')">
-      <van-swipe :autoplay="3000">
-        <van-swipe-item v-for="(image, index) in images" :key="index">
-          <img :src="image" />
-          <!-- TODO -->
-          <!-- <img v-lazy="image" /> -->
-        </van-swipe-item>
-      </van-swipe>
-    </demo-block>
+  <demo-block :title="t('title2')">
+    <van-swipe :autoplay="3000">
+      <van-swipe-item v-for="(image, index) in images" :key="index">
+        <img :src="image" />
+        <!-- TODO -->
+        <!-- <img v-lazy="image" /> -->
+      </van-swipe-item>
+    </van-swipe>
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-swipe indicator-color="white" @change="onChange1">
-        <van-swipe-item>1</van-swipe-item>
-        <van-swipe-item>2</van-swipe-item>
-        <van-swipe-item>3</van-swipe-item>
-        <van-swipe-item>4</van-swipe-item>
-      </van-swipe>
-    </demo-block>
+  <demo-block :title="t('title3')">
+    <van-swipe indicator-color="white" @change="onChange1">
+      <van-swipe-item>1</van-swipe-item>
+      <van-swipe-item>2</van-swipe-item>
+      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item>4</van-swipe-item>
+    </van-swipe>
+  </demo-block>
 
-    <demo-block :title="t('title4')">
-      <van-swipe
-        vertical
-        :autoplay="3000"
-        indicator-color="white"
-        style="height: 200px;"
-        class="demo-swipe--vertical"
-      >
-        <van-swipe-item>1</van-swipe-item>
-        <van-swipe-item>2</van-swipe-item>
-        <van-swipe-item>3</van-swipe-item>
-        <van-swipe-item>4</van-swipe-item>
-      </van-swipe>
-    </demo-block>
+  <demo-block :title="t('title4')">
+    <van-swipe
+      vertical
+      :autoplay="3000"
+      indicator-color="white"
+      style="height: 200px;"
+      class="demo-swipe--vertical"
+    >
+      <van-swipe-item>1</van-swipe-item>
+      <van-swipe-item>2</van-swipe-item>
+      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item>4</van-swipe-item>
+    </van-swipe>
+  </demo-block>
 
-    <demo-block :title="t('title5')">
-      <van-swipe :width="300" :loop="false" indicator-color="white">
-        <van-swipe-item>1</van-swipe-item>
-        <van-swipe-item>2</van-swipe-item>
-        <van-swipe-item>3</van-swipe-item>
-        <van-swipe-item>4</van-swipe-item>
-      </van-swipe>
-    </demo-block>
+  <demo-block :title="t('title5')">
+    <van-swipe :width="300" :loop="false" indicator-color="white">
+      <van-swipe-item>1</van-swipe-item>
+      <van-swipe-item>2</van-swipe-item>
+      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item>4</van-swipe-item>
+    </van-swipe>
+  </demo-block>
 
-    <demo-block :title="t('title6')">
-      <van-swipe @change="onChange2">
-        <van-swipe-item>1</van-swipe-item>
-        <van-swipe-item>2</van-swipe-item>
-        <van-swipe-item>3</van-swipe-item>
-        <van-swipe-item>4</van-swipe-item>
+  <demo-block :title="t('title6')">
+    <van-swipe @change="onChange2">
+      <van-swipe-item>1</van-swipe-item>
+      <van-swipe-item>2</van-swipe-item>
+      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item>4</van-swipe-item>
 
-        <template #indicator>
-          <div class="custom-indicator">{{ current + 1 }}/4</div>
-        </template>
-      </van-swipe>
-    </demo-block>
-  </demo-section>
+      <template #indicator>
+        <div class="custom-indicator">{{ current + 1 }}/4</div>
+      </template>
+    </van-swipe>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index 51d4ab39f..508e3f1be 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -1,41 +1,39 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-switch v-model="checked" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-switch v-model="checked" />
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-switch v-model="checked" disabled />
-    </demo-block>
+  <demo-block :title="t('disabled')">
+    <van-switch v-model="checked" disabled />
+  </demo-block>
 
-    <demo-block :title="t('loadingStatus')">
-      <van-switch v-model="checked" loading />
-    </demo-block>
+  <demo-block :title="t('loadingStatus')">
+    <van-switch v-model="checked" loading />
+  </demo-block>
 
-    <demo-block :title="t('customSize')">
-      <van-switch v-model="checked2" size="24px" />
-    </demo-block>
+  <demo-block :title="t('customSize')">
+    <van-switch v-model="checked2" size="24px" />
+  </demo-block>
 
-    <demo-block :title="t('customColor')">
-      <van-switch
-        v-model="checked3"
-        active-color="#07c160"
-        inactive-color="#ee0a24"
-      />
-    </demo-block>
+  <demo-block :title="t('customColor')">
+    <van-switch
+      v-model="checked3"
+      active-color="#07c160"
+      inactive-color="#ee0a24"
+    />
+  </demo-block>
 
-    <demo-block :title="t('asyncControl')">
-      <van-switch :model-value="checked4" @update:model-value="onInput" />
-    </demo-block>
+  <demo-block :title="t('asyncControl')">
+    <van-switch :model-value="checked4" @update:model-value="onInput" />
+  </demo-block>
 
-    <demo-block :title="t('withCell')">
-      <van-cell center :title="t('title')">
-        <template #right-icon>
-          <van-switch v-model="checked5" size="24" />
-        </template>
-      </van-cell>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('withCell')">
+    <van-cell center :title="t('title')">
+      <template #right-icon>
+        <van-switch v-model="checked5" size="24" />
+      </template>
+    </van-cell>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
index 9c7467926..cd3a6f628 100644
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@@ -1,107 +1,105 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-tabs v-model:active="active">
-        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-tabs v-model:active="active">
+      <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('matchByName')">
-      <van-tabs v-model:active="activeName">
-        <van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
-        <van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
-        <van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('matchByName')">
+    <van-tabs v-model:active="activeName">
+      <van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
+      <van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
+      <van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('title2')">
-      <van-tabs>
-        <van-tab v-for="index in 8" :title="t('tab') + index" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('title2')">
+    <van-tabs>
+      <van-tab v-for="index in 8" :title="t('tab') + index" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('title3')">
-      <van-tabs @disabled="onClickDisabled">
-        <van-tab
-          v-for="index in 3"
-          :title="t('tab') + index"
-          :disabled="index === 2"
-          :key="index"
-        >
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('title3')">
+    <van-tabs @disabled="onClickDisabled">
+      <van-tab
+        v-for="index in 3"
+        :title="t('tab') + index"
+        :disabled="index === 2"
+        :key="index"
+      >
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('title4')">
-      <van-tabs type="card">
-        <van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('title4')">
+    <van-tabs type="card">
+      <van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('title5')">
-      <van-tabs @click="onClick">
-        <van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('title5')">
+    <van-tabs @click="onClick">
+      <van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('title6')">
-      <van-tabs :active="active" sticky>
-        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('title6')">
+    <van-tabs :active="active" sticky>
+      <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('title7')">
-      <van-tabs :active="active">
-        <van-tab v-for="index in 2" :key="index">
-          <template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('title7')">
+    <van-tabs :active="active">
+      <van-tab v-for="index in 2" :key="index">
+        <template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('title8')">
-      <van-tabs animated>
-        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('title8')">
+    <van-tabs animated>
+      <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block :title="t('title9')">
-      <van-tabs :active="active" swipeable>
-        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block :title="t('title9')">
+    <van-tabs :active="active" swipeable>
+      <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('title10')">
-      <van-tabs scrollspy sticky>
-        <van-tab :title="t('tab') + index" v-for="index in 8" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('title10')">
+    <van-tabs scrollspy sticky>
+      <van-tab :title="t('tab') + index" v-for="index in 8" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('beforeChange')">
-      <van-tabs :before-change="beforeChange">
-        <van-tab :title="t('tab') + index" v-for="index in 4" :key="index">
-          {{ t('content') }} {{ index }}
-        </van-tab>
-      </van-tabs>
-    </demo-block>
-  </demo-section>
+  <demo-block v-if="!isWeapp" :title="t('beforeChange')">
+    <van-tabs :before-change="beforeChange">
+      <van-tab :title="t('tab') + index" v-for="index in 4" :key="index">
+        {{ t('content') }} {{ index }}
+      </van-tab>
+    </van-tabs>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index 47535eae6..2ecef602b 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -1,79 +1,73 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-tabbar v-model="active">
-        <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
-      </van-tabbar>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-tabbar v-model="active">
+      <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
+    </van-tabbar>
+  </demo-block>
 
-    <demo-block :title="t('matchByName')">
-      <van-tabbar v-model="activeName">
-        <van-tabbar-item name="home" icon="home-o">
-          {{ t('tab') }}
-        </van-tabbar-item>
-        <van-tabbar-item name="search" icon="search">
-          {{ t('tab') }}
-        </van-tabbar-item>
-        <van-tabbar-item name="friends" icon="friends-o">
-          {{ t('tab') }}
-        </van-tabbar-item>
-        <van-tabbar-item name="setting" icon="setting-o">
-          {{ t('tab') }}
-        </van-tabbar-item>
-      </van-tabbar>
-    </demo-block>
+  <demo-block :title="t('matchByName')">
+    <van-tabbar v-model="activeName">
+      <van-tabbar-item name="home" icon="home-o">
+        {{ t('tab') }}
+      </van-tabbar-item>
+      <van-tabbar-item name="search" icon="search">
+        {{ t('tab') }}
+      </van-tabbar-item>
+      <van-tabbar-item name="friends" icon="friends-o">
+        {{ t('tab') }}
+      </van-tabbar-item>
+      <van-tabbar-item name="setting" icon="setting-o">
+        {{ t('tab') }}
+      </van-tabbar-item>
+    </van-tabbar>
+  </demo-block>
 
-    <demo-block :title="t('badge')">
-      <van-tabbar v-model="active2">
-        <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="search" dot>{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o" badge="5">
-          {{ t('tab') }}
-        </van-tabbar-item>
-        <van-tabbar-item icon="setting-o" badge="20">
-          {{ t('tab') }}
-        </van-tabbar-item>
-      </van-tabbar>
-    </demo-block>
+  <demo-block :title="t('badge')">
+    <van-tabbar v-model="active2">
+      <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="search" dot>{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="friends-o" badge="5">
+        {{ t('tab') }}
+      </van-tabbar-item>
+      <van-tabbar-item icon="setting-o" badge="20">
+        {{ t('tab') }}
+      </van-tabbar-item>
+    </van-tabbar>
+  </demo-block>
 
-    <demo-block :title="t('customIcon')">
-      <van-tabbar v-model="active3">
-        <van-tabbar-item badge="3">
-          <span>{{ t('custom') }}</span>
-          <template #icon="props">
-            <img :src="props.active ? icon.active : icon.inactive" />
-          </template>
-        </van-tabbar-item>
-        <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
-      </van-tabbar>
-    </demo-block>
+  <demo-block :title="t('customIcon')">
+    <van-tabbar v-model="active3">
+      <van-tabbar-item badge="3">
+        <span>{{ t('custom') }}</span>
+        <template #icon="props">
+          <img :src="props.active ? icon.active : icon.inactive" />
+        </template>
+      </van-tabbar-item>
+      <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
+    </van-tabbar>
+  </demo-block>
 
-    <demo-block :title="t('customColor')">
-      <van-tabbar
-        v-model="active4"
-        active-color="#07c160"
-        inactive-color="#000"
-      >
-        <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
-      </van-tabbar>
-    </demo-block>
+  <demo-block :title="t('customColor')">
+    <van-tabbar v-model="active4" active-color="#07c160" inactive-color="#000">
+      <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
+      <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
+    </van-tabbar>
+  </demo-block>
 
-    <demo-block :title="t('switchEvent')">
-      <van-tabbar v-model="active5" @change="onChange">
-        <van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</van-tabbar-item>
-        <van-tabbar-item icon="search">{{ t('tab') + 2 }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
-      </van-tabbar>
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('switchEvent')">
+    <van-tabbar v-model="active5" @change="onChange">
+      <van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</van-tabbar-item>
+      <van-tabbar-item icon="search">{{ t('tab') + 2 }}</van-tabbar-item>
+      <van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
+      <van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
+    </van-tabbar>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 71fa7386f..5bd223536 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -1,67 +1,65 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell :title="`primary ${t('type')}`">
-        <van-tag type="primary">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="`success ${t('type')}`">
-        <van-tag type="success">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="`danger ${t('type')}`">
-        <van-tag type="danger">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="`warning ${t('type')}`">
-        <van-tag type="warning">{{ t('tag') }}</van-tag>
-      </van-cell>
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell :title="`primary ${t('type')}`">
+      <van-tag type="primary">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="`success ${t('type')}`">
+      <van-tag type="success">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="`danger ${t('type')}`">
+      <van-tag type="danger">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="`warning ${t('type')}`">
+      <van-tag type="warning">{{ t('tag') }}</van-tag>
+    </van-cell>
+  </demo-block>
 
-    <demo-block card :title="t('tagStyle')">
-      <van-cell :title="t('plain')">
-        <van-tag plain type="primary">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="t('round')">
-        <van-tag round type="primary">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="t('mark')">
-        <van-tag mark type="primary">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="t('closeable')">
-        <van-tag
-          closeable
-          :show="show"
-          size="medium"
-          type="primary"
-          @close="close"
-        >
-          {{ t('tag') }}
-        </van-tag>
-      </van-cell>
-    </demo-block>
+  <demo-block card :title="t('tagStyle')">
+    <van-cell :title="t('plain')">
+      <van-tag plain type="primary">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="t('round')">
+      <van-tag round type="primary">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="t('mark')">
+      <van-tag mark type="primary">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="t('closeable')">
+      <van-tag
+        closeable
+        :show="show"
+        size="medium"
+        type="primary"
+        @close="close"
+      >
+        {{ t('tag') }}
+      </van-tag>
+    </van-cell>
+  </demo-block>
 
-    <demo-block card :title="t('customSize')">
-      <van-cell :title="t('smallSize')">
-        <van-tag type="primary">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="t('mediumSize')">
-        <van-tag type="primary" size="medium">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="t('largeSize')">
-        <van-tag type="primary" size="large">{{ t('tag') }}</van-tag>
-      </van-cell>
-    </demo-block>
+  <demo-block card :title="t('customSize')">
+    <van-cell :title="t('smallSize')">
+      <van-tag type="primary">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="t('mediumSize')">
+      <van-tag type="primary" size="medium">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="t('largeSize')">
+      <van-tag type="primary" size="large">{{ t('tag') }}</van-tag>
+    </van-cell>
+  </demo-block>
 
-    <demo-block card :title="t('customColor')">
-      <van-cell :title="t('customBgColor')">
-        <van-tag color="#7232dd">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="t('customTextColor')">
-        <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
-      </van-cell>
-      <van-cell :title="t('customPlainColor')">
-        <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
-      </van-cell>
-    </demo-block>
-  </demo-section>
+  <demo-block card :title="t('customColor')">
+    <van-cell :title="t('customBgColor')">
+      <van-tag color="#7232dd">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="t('customTextColor')">
+      <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
+    </van-cell>
+    <van-cell :title="t('customPlainColor')">
+      <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
+    </van-cell>
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index 0890d6aec..b908432e8 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -1,35 +1,33 @@
 <template>
-  <demo-section>
-    <demo-block card :title="t('basicUsage')">
-      <van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
-      <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
-      <van-cell is-link :title="t('success')" @click="showSuccessToast" />
-      <van-cell is-link :title="t('fail')" @click="showFailToast" />
-    </demo-block>
+  <demo-block card :title="t('basicUsage')">
+    <van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
+    <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
+    <van-cell is-link :title="t('success')" @click="showSuccessToast" />
+    <van-cell is-link :title="t('fail')" @click="showFailToast" />
+  </demo-block>
 
-    <demo-block card v-if="!isWeapp" :title="t('customIcon')">
-      <van-cell is-link :title="t('customIcon')" @click="showIconToast" />
-      <van-cell is-link :title="t('customImage')" @click="showImageToast" />
-      <van-cell
-        is-link
-        :title="t('loadingType')"
-        @click="showLoadingToast('spinner')"
-      />
-    </demo-block>
+  <demo-block card v-if="!isWeapp" :title="t('customIcon')">
+    <van-cell is-link :title="t('customIcon')" @click="showIconToast" />
+    <van-cell is-link :title="t('customImage')" @click="showImageToast" />
+    <van-cell
+      is-link
+      :title="t('loadingType')"
+      @click="showLoadingToast('spinner')"
+    />
+  </demo-block>
 
-    <demo-block card v-if="!isWeapp" :title="t('customPosition')">
-      <van-cell is-link :title="t('positionTop')" @click="showTopToast" />
-      <van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
-    </demo-block>
+  <demo-block card v-if="!isWeapp" :title="t('customPosition')">
+    <van-cell is-link :title="t('positionTop')" @click="showTopToast" />
+    <van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
+  </demo-block>
 
-    <demo-block card :title="t('updateMessage')">
-      <van-cell
-        is-link
-        :title="t('updateMessage')"
-        @click="showCustomizedToast"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block card :title="t('updateMessage')">
+    <van-cell
+      is-link
+      :title="t('updateMessage')"
+      @click="showCustomizedToast"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index ab0754d9b..df299cf70 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -1,51 +1,49 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('radioMode')">
-      <van-tree-select
-        v-model:active-id="activeId"
-        v-model:main-active-index="activeIndex"
-        :items="items"
-      />
-    </demo-block>
+  <demo-block :title="t('radioMode')">
+    <van-tree-select
+      v-model:active-id="activeId"
+      v-model:main-active-index="activeIndex"
+      :items="items"
+    />
+  </demo-block>
 
-    <demo-block :title="t('multipleMode')">
-      <van-tree-select
-        v-model:active-id="activeIds"
-        v-model:main-active-index="activeIndex2"
-        :items="items"
-      />
-    </demo-block>
+  <demo-block :title="t('multipleMode')">
+    <van-tree-select
+      v-model:active-id="activeIds"
+      v-model:main-active-index="activeIndex2"
+      :items="items"
+    />
+  </demo-block>
 
-    <demo-block :title="t('customContent')">
-      <van-tree-select
-        v-model:main-active-index="activeIndex3"
-        height="55vw"
-        :items="simpleItems"
-      >
-        <template #content>
-          <van-image
-            v-if="activeIndex3 === 0"
-            :show-loading="false"
-            src="https://img.yzcdn.cn/vant/apple-1.jpg"
-          />
-          <van-image
-            v-if="activeIndex3 === 1"
-            :show-loading="false"
-            src="https://img.yzcdn.cn/vant/apple-2.jpg"
-          />
-        </template>
-      </van-tree-select>
-    </demo-block>
+  <demo-block :title="t('customContent')">
+    <van-tree-select
+      v-model:main-active-index="activeIndex3"
+      height="55vw"
+      :items="simpleItems"
+    >
+      <template #content>
+        <van-image
+          v-if="activeIndex3 === 0"
+          :show-loading="false"
+          src="https://img.yzcdn.cn/vant/apple-1.jpg"
+        />
+        <van-image
+          v-if="activeIndex3 === 1"
+          :show-loading="false"
+          src="https://img.yzcdn.cn/vant/apple-2.jpg"
+        />
+      </template>
+    </van-tree-select>
+  </demo-block>
 
-    <demo-block :title="t('showBadge')">
-      <van-tree-select
-        v-model:active-id="activeId2"
-        v-model:main-active-index="activeIndex4"
-        height="55vw"
-        :items="badgeItems"
-      />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('showBadge')">
+    <van-tree-select
+      v-model:active-id="activeId2"
+      v-model:main-active-index="activeIndex4"
+      height="55vw"
+      :items="badgeItems"
+    />
+  </demo-block>
 </template>
 
 <script>
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index e28cbe625..5f59f1dee 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -1,54 +1,52 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-uploader :after-read="afterRead" />
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-uploader :after-read="afterRead" />
+  </demo-block>
 
-    <demo-block :title="t('preview')">
-      <van-uploader v-model="fileList" multiple accept="*" />
-    </demo-block>
+  <demo-block :title="t('preview')">
+    <van-uploader v-model="fileList" multiple accept="*" />
+  </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="t('status')">
-      <van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
-    </demo-block>
+  <demo-block v-if="!isWeapp" :title="t('status')">
+    <van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
+  </demo-block>
 
-    <demo-block :title="t('maxCount')">
-      <van-uploader v-model="fileList2" multiple :max-count="2" />
-    </demo-block>
+  <demo-block :title="t('maxCount')">
+    <van-uploader v-model="fileList2" multiple :max-count="2" />
+  </demo-block>
 
-    <demo-block :title="t('maxSize')">
-      <van-uploader
-        v-model="fileList4"
-        multiple
-        :max-size="500 * 1024"
-        @oversize="onOversize"
-      />
-    </demo-block>
+  <demo-block :title="t('maxSize')">
+    <van-uploader
+      v-model="fileList4"
+      multiple
+      :max-size="500 * 1024"
+      @oversize="onOversize"
+    />
+  </demo-block>
 
-    <demo-block :title="t('customUpload')">
-      <van-uploader>
-        <van-button type="primary" icon="plus">
-          {{ t('upload') }}
-        </van-button>
-      </van-uploader>
-    </demo-block>
+  <demo-block :title="t('customUpload')">
+    <van-uploader>
+      <van-button type="primary" icon="plus">
+        {{ t('upload') }}
+      </van-button>
+    </van-uploader>
+  </demo-block>
 
-    <demo-block :title="t('previewCover')">
-      <van-uploader v-model="previewCoverFiles">
-        <template #preview-cover="{ file }">
-          <div class="preview-cover van-ellipsis">{{ file.name }}</div>
-        </template>
-      </van-uploader>
-    </demo-block>
+  <demo-block :title="t('previewCover')">
+    <van-uploader v-model="previewCoverFiles">
+      <template #preview-cover="{ file }">
+        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
+      </template>
+    </van-uploader>
+  </demo-block>
 
-    <demo-block :title="t('beforeRead')">
-      <van-uploader v-model="fileList3" :before-read="beforeRead" />
-    </demo-block>
+  <demo-block :title="t('beforeRead')">
+    <van-uploader v-model="fileList3" :before-read="beforeRead" />
+  </demo-block>
 
-    <demo-block :title="t('disabled')">
-      <van-uploader :after-read="afterRead" disabled />
-    </demo-block>
-  </demo-section>
+  <demo-block :title="t('disabled')">
+    <van-uploader :after-read="afterRead" disabled />
+  </demo-block>
 </template>
 
 <script>