diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index 4aa3865d6..591accc8b 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -96,6 +96,7 @@ show-cancel | Boolean | true | 是否显示取消按钮 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏 | Y
 default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y
+external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-content', 't-class-cancel']` | N
 
 ### ActionSheet Events
 
diff --git a/src/action-sheet/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/action-sheet/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..c0548eabf
--- /dev/null
+++ b/src/action-sheet/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionSheet ActionSheet align demo works fine 1`] = `
+<align>
+  <t-action-sheet
+    id="t-action-sheet"
+    bind:selected="handleSelected"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleAction"
+  >
+    左对齐列表型
+  </t-button>
+</align>
+`;
+
+exports[`ActionSheet ActionSheet grid demo works fine 1`] = `
+<grid>
+  <t-action-sheet
+    id="t-action-sheet"
+    bind:selected="handleSelected"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleAction"
+  >
+    常规宫格型
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleMultiAction"
+  >
+    带翻页宫格型
+  </t-button>
+</grid>
+`;
+
+exports[`ActionSheet ActionSheet list demo works fine 1`] = `
+<list>
+  <t-action-sheet
+    id="t-action-sheet"
+    bind:selected="handleSelected"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleAction"
+  >
+    列表型
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDescAction"
+  >
+    带描述列表型
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showIconAction"
+  >
+    带图标列表型
+  </t-button>
+</list>
+`;
+
+exports[`ActionSheet ActionSheet status demo works fine 1`] = `
+<status>
+  <t-action-sheet
+    id="t-action-sheet"
+    bind:selected="handleSelected"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleAction"
+  >
+    列表型选项状态
+  </t-button>
+</status>
+`;
diff --git a/src/action-sheet/action-sheet.wxml b/src/action-sheet/action-sheet.wxml
index 552708659..bf8d757cc 100644
--- a/src/action-sheet/action-sheet.wxml
+++ b/src/action-sheet/action-sheet.wxml
@@ -3,7 +3,7 @@
 <import src="./template/list.wxml" />
 <import src="./template/grid.wxml" />
 
-<view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class">
+<view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
   <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
     <view
       class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
diff --git a/src/avatar-group/avatar-group.wxml b/src/avatar-group/avatar-group.wxml
index 77becee63..d2ff43d31 100644
--- a/src/avatar-group/avatar-group.wxml
+++ b/src/avatar-group/avatar-group.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{className}}">
+<view style="{{_._style([style, customStyle])}}" class="{{className}} class">
   <slot />
   <!-- 自定义折叠元素 -->
   <view class="{{classPrefix}}__collapse--slot">
diff --git a/src/avatar/avatar.ts b/src/avatar/avatar.ts
index d7edc449e..888516793 100644
--- a/src/avatar/avatar.ts
+++ b/src/avatar/avatar.ts
@@ -14,7 +14,6 @@ export default class Avatar extends SuperComponent {
   };
 
   externalClasses = [
-    'class',
     `${prefix}-class`,
     `${prefix}-class-image`,
     `${prefix}-class-icon`,
diff --git a/src/back-top/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/back-top/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..739b6a071
--- /dev/null
+++ b/src/back-top/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BackTop BackTop base demo works fine 1`] = `
+<base>
+  <t-back-top
+    text="顶部"
+    theme="round"
+    bind:to-top="onToTop"
+  />
+</base>
+`;
+
+exports[`BackTop BackTop half-round demo works fine 1`] = `
+<half-round>
+  <t-back-top
+    text="返回顶部"
+    theme="half-round-dark"
+    bind:to-top="onToTop"
+  />
+</half-round>
+`;
diff --git a/src/back-top/back-top.wxml b/src/back-top/back-top.wxml
index 80f3c7e46..1d02278b1 100644
--- a/src/back-top/back-top.wxml
+++ b/src/back-top/back-top.wxml
@@ -3,7 +3,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
+  class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
   bindtap="toTop"
   aria-role="button"
 >
diff --git a/src/badge/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/badge/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..c8e698323
--- /dev/null
+++ b/src/badge/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,268 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge Badge base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="demo-desc"
+  >
+    红点徽标
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-badge
+      class="wrapper"
+      content="消息"
+      dot="{{true}}"
+      offset="{{
+        Array [
+          -4,
+          4,
+        ]
+      }}"
+    />
+    <t-badge
+      class="wrapper"
+      dot="{{true}}"
+      offset="{{
+        Array [
+          1,
+          -1,
+        ]
+      }}"
+    >
+      <t-icon
+        name="notification"
+        size="24"
+      />
+    </t-badge>
+    <t-badge
+      class="wrapper"
+      dot="{{true}}"
+      offset="{{
+        Array [
+          1,
+          1,
+        ]
+      }}"
+    >
+      <t-button>
+        按钮
+      </t-button>
+    </t-badge>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    数字徽标
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-badge
+      class="wrapper"
+      content="消息"
+      count="8"
+      offset="{{
+        Array [
+          -8,
+        ]
+      }}"
+    />
+    <t-badge
+      class="wrapper"
+      count="2"
+      offset="{{
+        Array [
+          -2,
+          -2,
+        ]
+      }}"
+    >
+      <t-icon
+        name="notification"
+        size="24"
+      />
+    </t-badge>
+    <t-badge
+      class="wrapper"
+      count="8"
+      offset="{{
+        Array [
+          2,
+          2,
+        ]
+      }}"
+    >
+      <t-button>
+        按钮
+      </t-button>
+    </t-badge>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    自定义徽标
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-badge
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          2,
+        ]
+      }}"
+    >
+      <t-button
+        icon="notification"
+        shape="square"
+        size="large"
+      />
+    </t-badge>
+  </wx-view>
+</base>
+`;
+
+exports[`Badge Badge size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="demo-desc"
+  >
+    Large
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-avatar
+      badgeProps="{{
+        Object {
+          "count": 8,
+          "offset": Array [
+            7,
+            7,
+          ],
+          "size": "large",
+        }
+      }}"
+      icon="user"
+      size="large"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    Middle
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-avatar
+      badgeProps="{{
+        Object {
+          "count": 8,
+          "offset": Array [
+            5,
+            5,
+          ],
+        }
+      }}"
+      icon="user"
+    />
+  </wx-view>
+</size>
+`;
+
+exports[`Badge Badge theme demo works fine 1`] = `
+<theme>
+  <wx-view
+    class="demo-desc"
+  >
+    圆形徽标
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-badge
+      count="2"
+      offset="{{
+        Array [
+          -2,
+          -2,
+        ]
+      }}"
+    >
+      <t-icon
+        name="notification"
+        size="24"
+      />
+    </t-badge>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    方形徽标
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-badge
+      count="2"
+      offset="{{
+        Array [
+          -2,
+          -2,
+        ]
+      }}"
+      shape="square"
+    >
+      <t-icon
+        name="notification"
+        size="24"
+      />
+    </t-badge>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    气泡徽标
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-badge
+      count="领积分"
+      shape="bubble"
+    >
+      <t-button
+        icon="shop"
+        shape="square"
+        size="large"
+      />
+    </t-badge>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+    style="margin-bottom: 32rpx"
+  >
+    角标
+  </wx-view>
+  <t-cell
+    title="单行标题"
+  >
+    <t-badge
+      count="New"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="ribbon"
+      slot="note"
+    />
+  </t-cell>
+</theme>
+`;
diff --git a/src/badge/badge.ts b/src/badge/badge.ts
index 016baddae..295a9da27 100644
--- a/src/badge/badge.ts
+++ b/src/badge/badge.ts
@@ -16,7 +16,7 @@ export default class Badge extends SuperComponent {
     multipleSlots: true,
   };
 
-  externalClasses = ['class', `${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
 
   properties = props;
 
diff --git a/src/button/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/button/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..caeac6dbb
--- /dev/null
+++ b/src/button/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,368 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Button base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+      theme="primary"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="light"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      size="large"
+    >
+      填充按钮
+    </t-button>
+  </wx-view>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+      theme="primary"
+      variant="outline"
+    >
+      描边按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="primary"
+      variant="text"
+    >
+      文字按钮
+    </t-button>
+  </wx-view>
+</base>
+`;
+
+exports[`Button Button block-btn demo works fine 1`] = `
+<block-btn>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+    >
+      填充按钮
+    </t-button>
+  </wx-view>
+</block-btn>
+`;
+
+exports[`Button Button disabled demo works fine 1`] = `
+<disabled>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      disabled="{{true}}"
+      size="large"
+      theme="primary"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      disabled="{{true}}"
+      size="large"
+      theme="light"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      disabled="{{true}}"
+      size="large"
+    >
+      填充按钮
+    </t-button>
+  </wx-view>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      disabled="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+    >
+      描边按钮
+    </t-button>
+    <t-button
+      disabled="{{true}}"
+      size="large"
+      theme="primary"
+      variant="text"
+    >
+      文字按钮
+    </t-button>
+  </wx-view>
+</disabled>
+`;
+
+exports[`Button Button ghost-btn demo works fine 1`] = `
+<ghost-btn>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      ghost="{{true}}"
+      size="large"
+      theme="primary"
+    >
+      幽灵按钮
+    </t-button>
+    <t-button
+      ghost="{{true}}"
+      size="large"
+      theme="danger"
+    >
+      幽灵按钮
+    </t-button>
+    <t-button
+      ghost="{{true}}"
+      size="large"
+    >
+      幽灵按钮
+    </t-button>
+  </wx-view>
+</ghost-btn>
+`;
+
+exports[`Button Button group-btn demo works fine 1`] = `
+<group-btn>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="light"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+    >
+      填充按钮
+    </t-button>
+  </wx-view>
+</group-btn>
+`;
+
+exports[`Button Button icon-btn demo works fine 1`] = `
+<icon-btn>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      class="margin"
+      content="填充按钮"
+      icon="app"
+      size="large"
+      theme="primary"
+    />
+    <t-button
+      class="margin"
+      loading="{{true}}"
+      size="large"
+      theme="primary"
+    >
+      加载中
+    </t-button>
+    <t-button
+      ariaLabel="返回"
+      class="margin"
+      icon="chevron-left"
+      shape="square"
+      size="large"
+      theme="primary"
+    />
+  </wx-view>
+</icon-btn>
+`;
+
+exports[`Button Button shape demo works fine 1`] = `
+<shape>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+      theme="primary"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      ariaLabel="返回"
+      icon="chevron-left"
+      shape="square"
+      size="large"
+      theme="primary"
+    />
+    <t-button
+      shape="round"
+      size="large"
+      theme="primary"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      ariaLabel="返回"
+      icon="chevron-left"
+      shape="circle"
+      size="large"
+      theme="primary"
+    />
+  </wx-view>
+  <t-button
+    block="{{true}}"
+    size="large"
+    tClass="external-class"
+    theme="primary"
+  >
+    填充按钮
+  </t-button>
+</shape>
+`;
+
+exports[`Button Button size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+      theme="primary"
+    >
+      按钮48
+    </t-button>
+    <t-button
+      theme="primary"
+    >
+      按钮40
+    </t-button>
+    <t-button
+      size="small"
+      theme="primary"
+    >
+      按钮32
+    </t-button>
+    <t-button
+      size="extra-small"
+      theme="primary"
+    >
+      按钮28
+    </t-button>
+  </wx-view>
+</size>
+`;
+
+exports[`Button Button theme demo works fine 1`] = `
+<theme>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      size="large"
+      variant="outline"
+    >
+      描边按钮
+    </t-button>
+    <t-button
+      size="large"
+      variant="text"
+    >
+      文字按钮
+    </t-button>
+  </wx-view>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+      theme="primary"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="primary"
+      variant="outline"
+    >
+      描边按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="primary"
+      variant="text"
+    >
+      文字按钮
+    </t-button>
+  </wx-view>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+      theme="danger"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="danger"
+      variant="outline"
+    >
+      描边按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="danger"
+      variant="text"
+    >
+      文字按钮
+    </t-button>
+  </wx-view>
+  <wx-view
+    class="button-example"
+  >
+    <t-button
+      size="large"
+      theme="light"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="light"
+      variant="outline"
+    >
+      描边按钮
+    </t-button>
+    <t-button
+      size="large"
+      theme="light"
+      variant="text"
+    >
+      文字按钮
+    </t-button>
+  </wx-view>
+</theme>
+`;
diff --git a/src/button/button.ts b/src/button/button.ts
index 436f305a6..f52c3bb78 100644
--- a/src/button/button.ts
+++ b/src/button/button.ts
@@ -11,7 +11,7 @@ const name = `${prefix}-button`;
 export interface ButtonProps extends TdButtonProps {}
 @wxComponent()
 export default class Button extends SuperComponent {
-  externalClasses = ['class', `${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
 
   behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
 
diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index 253f60f94..56c5f98c3 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -4,6 +4,7 @@ exports[`calendar :base 1`] = `
 <main>
   <t-calendar>
     <t-popup
+      class="class"
       bind:visible-change="onVisibleChange"
     >
       <wx-view
@@ -21,7 +22,7 @@ exports[`calendar :base 1`] = `
             bind:tap="handleClose"
           />
           <wx-view
-            class="t-calendar t-calendar--popup"
+            class="t-calendar t-calendar--popup class t-class"
             style=""
           >
             <wx-view
@@ -796,7 +797,7 @@ exports[`calendar :base 1`] = `
         <wx-view
           ariaLabel="关闭"
           ariaRole="button"
-          class="t-overlay t-fade-enter t-fade-enter-active"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
           style="z-index:11000;"
           bind:tap="handleClick"
           catch:touchmove="noop"
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..fb639729a
--- /dev/null
+++ b/src/calendar/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Calendar Calendar base demo works fine 1`] = `
+<base>
+  <t-calendar
+    visible="{{false}}"
+    bind:close="onClose"
+    bind:confirm="handleConfirm"
+  />
+  <t-cell
+    arrow="{{true}}"
+    note=""
+    title="单个选择日历"
+    bind:tap="handleCalendar"
+  />
+</base>
+`;
+
+exports[`Calendar Calendar custom-button demo works fine 1`] = `
+<custom-button>
+  <t-calendar
+    confirmBtn="{{null}}"
+    minDate="{{1641052800000}}"
+    visible="{{false}}"
+    bind:change="onChange"
+  />
+  <t-cell
+    arrow="{{true}}"
+    note=""
+    title="不显示按钮"
+    bind:tap="handleCalendar"
+  />
+</custom-button>
+`;
+
+exports[`Calendar Calendar custom-range demo works fine 1`] = `
+<custom-range>
+  <t-calendar
+    maxDate="{{1669478400000}}"
+    minDate="{{1643644800000}}"
+    value="{{1652544000000}}"
+    visible="{{false}}"
+    bind:confirm="handleConfirm"
+  />
+  <t-cell
+    arrow="{{true}}"
+    title="自定义区间"
+    bind:tap="handleCalendar"
+  />
+</custom-range>
+`;
+
+exports[`Calendar Calendar custom-text demo works fine 1`] = `
+<custom-text>
+  <t-calendar
+    format="{{[Function]}}"
+    maxDate="{{1647273600000}}"
+    minDate="{{1643644800000}}"
+    value="{{1644854400000}}"
+    visible="{{false}}"
+    bind:confirm="handleConfirm"
+  />
+  <t-cell
+    arrow="{{true}}"
+    title="自定义文案"
+    bind:tap="handleCalendar"
+  />
+</custom-text>
+`;
+
+exports[`Calendar Calendar multiple demo works fine 1`] = `
+<multiple>
+  <t-calendar
+    type="multiple"
+    visible="{{false}}"
+    bind:confirm="handleConfirm"
+  />
+  <t-cell
+    arrow="{{true}}"
+    title="多个选择日历"
+    bind:tap="handleCalendar"
+  />
+</multiple>
+`;
+
+exports[`Calendar Calendar range demo works fine 1`] = `
+<range>
+  <t-calendar
+    type="range"
+    visible="{{false}}"
+    bind:confirm="handleConfirm"
+  />
+  <t-cell
+    arrow="{{true}}"
+    title="区间选择日历"
+    bind:tap="handleCalendar"
+  />
+</range>
+`;
+
+exports[`Calendar Calendar without-popup demo works fine 1`] = `
+<without-popup>
+  <wx-view
+    class="demo-desc"
+  >
+    不使用 Popup
+  </wx-view>
+  <t-calendar
+    type="multiple"
+    usePopup="{{false}}"
+    bind:select="handleSelect"
+  />
+</without-popup>
+`;
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..56c5f98c3
--- /dev/null
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,810 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`calendar :base 1`] = `
+<main>
+  <t-calendar>
+    <t-popup
+      class="class"
+      bind:visible-change="onVisibleChange"
+    >
+      <wx-view
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
+      >
+        <wx-view
+          class="t-popup__content t-class-content"
+        >
+          <wx-view
+            class="t-popup__close"
+            bind:tap="handleClose"
+          />
+          <wx-view
+            class="t-calendar t-calendar--popup class t-class"
+            style=""
+          >
+            <wx-view
+              class="t-calendar__title"
+              tabindex="0"
+            >
+              <wx-text>
+                请选择日期
+              </wx-text>
+            </wx-view>
+            <t-icon
+              class="t-calendar__close-btn"
+              bind:tap="handleClose"
+            >
+              <wx-view
+                ariaHidden="{{false}}"
+                ariaLabel="关闭"
+                ariaRole="button"
+                class="t-icon class t-class"
+                style="font-size: 24px;"
+                bind:tap="onTap"
+              >
+                <wx-label
+                  class="t-icon-close t-icon-base"
+                />
+              </wx-view>
+            </t-icon>
+            <wx-view
+              ariaHidden="{{true}}"
+              class="t-calendar__days"
+            >
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                日
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                一
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                二
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                三
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                四
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                五
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                六
+              </wx-view>
+            </wx-view>
+            <wx-scroll-view
+              class="t-calendar__months"
+              enhanced="{{true}}"
+              scrollIntoView="year_2022_month_9"
+              scrollY="{{true}}"
+              showScrollbar="{{false}}"
+            >
+              <wx-view
+                class="t-calendar__month"
+                id="year_2022_month_9"
+              >
+                2022 年 10 月
+              </wx-view>
+              <wx-view
+                class="t-calendar__dates"
+              >
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月1日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 1,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            1
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月2日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 2,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            2
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月3日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 3,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            3
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月4日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 4,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            4
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月5日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 5,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            5
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月6日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 6,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            6
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月7日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 7,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            7
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月8日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 8,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            8
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月9日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 9,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            9
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月10日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 10,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            10
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月11日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 11,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            11
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月12日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 12,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            12
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月13日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 13,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            13
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月14日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 14,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            14
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月15日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 15,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            15
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="已选中, 10月16日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--selected"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 16,
+                      "type": "selected",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            16
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月17日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 17,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            17
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月18日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 18,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            18
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月19日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 19,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            19
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月20日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 20,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            20
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月21日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 21,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            21
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月22日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 22,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            22
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月23日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 23,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            23
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月24日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 24,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            24
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月25日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 25,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            25
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月26日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 26,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            26
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月27日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 27,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            27
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月28日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 28,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            28
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月29日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 29,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            29
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月30日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 30,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            30
+            
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月31日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 31,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
+            31
+            
+                </wx-view>
+              </wx-view>
+            </wx-scroll-view>
+            <wx-view
+              class="t-calendar__footer"
+            >
+              <t-button
+                class="t-calendar__confirm-btn"
+                data-extra=""
+                data-type=""
+                tClass=""
+                bind:contact="onTplButtonTap"
+                bind:error="onTplButtonTap"
+                bind:getphonenumber="onTplButtonTap"
+                bind:getuserinfo="onTplButtonTap"
+                bind:launchapp="onTplButtonTap"
+                bind:opensetting="onTplButtonTap"
+                bind:tap="onTplButtonTap"
+              >
+                <wx-button
+                  appParameter=""
+                  ariaLabel=""
+                  class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
+                  data-custom="{{null}}"
+                  formType=""
+                  hoverClass="t-button--hover"
+                  hoverStartTime="{{20}}"
+                  hoverStayTime="{{70}}"
+                  hoverStopPropagation="{{false}}"
+                  lang="en"
+                  openType=""
+                  sendMessageImg=""
+                  sendMessagePath=""
+                  sendMessageTitle=""
+                  sessionFrom=""
+                  showMessageCard="{{false}}"
+                  style=""
+                  bind:chooseavatar="chooseavatar"
+                  bind:contact="contact"
+                  bind:error="error"
+                  bind:getphonenumber="getphonenumber"
+                  bind:getuserinfo="getuserinfo"
+                  bind:launchapp="launchapp"
+                  bind:opensetting="opensetting"
+                  catch:tap="handleTap"
+                >
+                  <wx-view
+                    class="t-button__content"
+                  >
+                    
+                    确定
+                  </wx-view>
+                </wx-button>
+              </t-button>
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </wx-view>
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
+        <wx-view
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
+        />
+      </t-overlay>
+    </t-popup>
+  </t-calendar>
+</main>
+`;
diff --git a/src/calendar/calendar.wxml b/src/calendar/calendar.wxml
index 1447d2204..135766ada 100644
--- a/src/calendar/calendar.wxml
+++ b/src/calendar/calendar.wxml
@@ -1,7 +1,13 @@
 <wxs src="./calendar.wxs" module="this" />
 <wxs src="../common/utils.wxs" module="_" />
 
-<t-popup wx:if="{{usePopup}}" visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
+<t-popup
+  wx:if="{{usePopup}}"
+  class="class"
+  visible="{{visible}}"
+  bind:visible-change="onVisibleChange"
+  placement="bottom"
+>
   <include src="./template.wxml" />
 </t-popup>
 <include wx:else src="./template.wxml" />
diff --git a/src/calendar/template.wxml b/src/calendar/template.wxml
index b462421b0..81eeb919a 100644
--- a/src/calendar/template.wxml
+++ b/src/calendar/template.wxml
@@ -1,7 +1,10 @@
 <wxs src="../common/utils.wxs" module="_" />
 <import src="../common/template/button.wxml" />
 
-<view class="{{_.cls(classPrefix, [['popup', usePopup]])}}" style="{{_._style([style, customStyle])}}">
+<view
+  class="{{_.cls(classPrefix, [['popup', usePopup]])}} class {{prefix}}-class"
+  style="{{_._style([style, customStyle])}}"
+>
   <view class="{{classPrefix}}__title" tabindex="0">
     <slot name="title" />
     <text>{{ title || '请选择日期' }}</text>
diff --git a/src/cascader/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/cascader/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..45fd41797
--- /dev/null
+++ b/src/cascader/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,878 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cascader Cascader base demo works fine 1`] = `
+<base>
+  <t-cell
+    arrow="{{true}}"
+    note="请选择地址"
+    title="地址"
+    bind:click="showCascader"
+  />
+  <t-cascader
+    options="{{
+      Array [
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "东城区",
+                  "value": "110101",
+                },
+                Object {
+                  "label": "西城区",
+                  "value": "110102",
+                },
+                Object {
+                  "label": "朝阳区",
+                  "value": "110105",
+                },
+                Object {
+                  "label": "丰台区",
+                  "value": "110106",
+                },
+                Object {
+                  "label": "石景山区",
+                  "value": "110107",
+                },
+                Object {
+                  "label": "海淀区",
+                  "value": "110108",
+                },
+                Object {
+                  "label": "门头沟区",
+                  "value": "110109",
+                },
+                Object {
+                  "label": "房山区",
+                  "value": "110111",
+                },
+                Object {
+                  "label": "通州区",
+                  "value": "110112",
+                },
+                Object {
+                  "label": "顺义区",
+                  "value": "110113",
+                },
+                Object {
+                  "label": "昌平区",
+                  "value": "110114",
+                },
+                Object {
+                  "label": "大兴区",
+                  "value": "110115",
+                },
+                Object {
+                  "label": "怀柔区",
+                  "value": "110116",
+                },
+                Object {
+                  "label": "平谷区",
+                  "value": "110117",
+                },
+                Object {
+                  "label": "密云区",
+                  "value": "110118",
+                },
+                Object {
+                  "label": "延庆区",
+                  "value": "110119",
+                },
+              ],
+              "label": "北京市",
+              "value": "110100",
+            },
+          ],
+          "label": "北京市",
+          "value": "110000",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "和平区",
+                  "value": "120101",
+                },
+                Object {
+                  "label": "河东区",
+                  "value": "120102",
+                },
+                Object {
+                  "label": "河西区",
+                  "value": "120103",
+                },
+                Object {
+                  "label": "南开区",
+                  "value": "120104",
+                },
+                Object {
+                  "label": "河北区",
+                  "value": "120105",
+                },
+                Object {
+                  "label": "红桥区",
+                  "value": "120106",
+                },
+                Object {
+                  "label": "东丽区",
+                  "value": "120110",
+                },
+                Object {
+                  "label": "西青区",
+                  "value": "120111",
+                },
+                Object {
+                  "label": "津南区",
+                  "value": "120112",
+                },
+                Object {
+                  "label": "北辰区",
+                  "value": "120113",
+                },
+                Object {
+                  "label": "武清区",
+                  "value": "120114",
+                },
+                Object {
+                  "label": "宝坻区",
+                  "value": "120115",
+                },
+                Object {
+                  "label": "滨海新区",
+                  "value": "120116",
+                },
+                Object {
+                  "label": "宁河区",
+                  "value": "120117",
+                },
+                Object {
+                  "label": "静海区",
+                  "value": "120118",
+                },
+                Object {
+                  "label": "蓟州区",
+                  "value": "120119",
+                },
+              ],
+              "label": "天津市",
+              "value": "120100",
+            },
+          ],
+          "label": "天津市",
+          "value": "120000",
+        },
+      ]
+    }}"
+    title="请选择地址"
+    visible="{{false}}"
+    bind:change="onChange"
+  />
+</base>
+`;
+
+exports[`Cascader Cascader keys demo works fine 1`] = `
+<keys>
+  <t-cell
+    arrow="{{true}}"
+    note="请选择地址"
+    title="地址"
+    bind:click="showCascader"
+  />
+  <t-cascader
+    class="demo"
+    keys="{{
+      Object {
+        "children": "sub",
+        "label": "name",
+        "value": "id",
+      }
+    }}"
+    options="{{
+      Array [
+        Object {
+          "id": "110000",
+          "name": "北京市",
+          "sub": Array [
+            Object {
+              "id": "110100",
+              "name": "北京市",
+              "sub": Array [
+                Object {
+                  "id": "110101",
+                  "name": "东城区",
+                },
+                Object {
+                  "id": "110102",
+                  "name": "西城区",
+                },
+                Object {
+                  "id": "110105",
+                  "name": "朝阳区",
+                },
+                Object {
+                  "id": "110106",
+                  "name": "丰台区",
+                },
+                Object {
+                  "id": "110107",
+                  "name": "石景山区",
+                },
+                Object {
+                  "id": "110108",
+                  "name": "海淀区",
+                },
+                Object {
+                  "id": "110109",
+                  "name": "门头沟区",
+                },
+                Object {
+                  "id": "110111",
+                  "name": "房山区",
+                },
+                Object {
+                  "id": "110112",
+                  "name": "通州区",
+                },
+                Object {
+                  "id": "110113",
+                  "name": "顺义区",
+                },
+                Object {
+                  "id": "110114",
+                  "name": "昌平区",
+                },
+                Object {
+                  "id": "110115",
+                  "name": "大兴区",
+                },
+                Object {
+                  "id": "110116",
+                  "name": "怀柔区",
+                },
+                Object {
+                  "id": "110117",
+                  "name": "平谷区",
+                },
+                Object {
+                  "id": "110118",
+                  "name": "密云区",
+                },
+                Object {
+                  "id": "110119",
+                  "name": "延庆区",
+                },
+              ],
+            },
+          ],
+        },
+        Object {
+          "id": "120000",
+          "name": "天津市",
+          "sub": Array [
+            Object {
+              "id": "120100",
+              "name": "天津市",
+              "sub": Array [
+                Object {
+                  "id": "120101",
+                  "name": "和平区",
+                },
+                Object {
+                  "id": "120102",
+                  "name": "河东区",
+                },
+                Object {
+                  "id": "120103",
+                  "name": "河西区",
+                },
+                Object {
+                  "id": "120104",
+                  "name": "南开区",
+                },
+                Object {
+                  "id": "120105",
+                  "name": "河北区",
+                },
+                Object {
+                  "id": "120106",
+                  "name": "红桥区",
+                },
+                Object {
+                  "id": "120110",
+                  "name": "东丽区",
+                },
+                Object {
+                  "id": "120111",
+                  "name": "西青区",
+                },
+                Object {
+                  "id": "120112",
+                  "name": "津南区",
+                },
+                Object {
+                  "id": "120113",
+                  "name": "北辰区",
+                },
+                Object {
+                  "id": "120114",
+                  "name": "武清区",
+                },
+                Object {
+                  "id": "120115",
+                  "name": "宝坻区",
+                },
+                Object {
+                  "id": "120116",
+                  "name": "滨海新区",
+                },
+                Object {
+                  "id": "120117",
+                  "name": "宁河区",
+                },
+                Object {
+                  "id": "120118",
+                  "name": "静海区",
+                },
+                Object {
+                  "id": "120119",
+                  "name": "蓟州区",
+                },
+              ],
+            },
+          ],
+        },
+      ]
+    }}"
+    title="请选择地址"
+    visible="{{false}}"
+    bind:change="onChange"
+  />
+</keys>
+`;
+
+exports[`Cascader Cascader theme-tab demo works fine 1`] = `
+<theme-tab>
+  <t-cell
+    arrow="{{true}}"
+    note="请选择地址"
+    title="地址"
+    bind:click="showCascader"
+  />
+  <t-cascader
+    options="{{
+      Array [
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "东城区",
+                  "value": "110101",
+                },
+                Object {
+                  "label": "西城区",
+                  "value": "110102",
+                },
+                Object {
+                  "label": "朝阳区",
+                  "value": "110105",
+                },
+                Object {
+                  "label": "丰台区",
+                  "value": "110106",
+                },
+                Object {
+                  "label": "石景山区",
+                  "value": "110107",
+                },
+                Object {
+                  "label": "海淀区",
+                  "value": "110108",
+                },
+                Object {
+                  "label": "门头沟区",
+                  "value": "110109",
+                },
+                Object {
+                  "label": "房山区",
+                  "value": "110111",
+                },
+                Object {
+                  "label": "通州区",
+                  "value": "110112",
+                },
+                Object {
+                  "label": "顺义区",
+                  "value": "110113",
+                },
+                Object {
+                  "label": "昌平区",
+                  "value": "110114",
+                },
+                Object {
+                  "label": "大兴区",
+                  "value": "110115",
+                },
+                Object {
+                  "label": "怀柔区",
+                  "value": "110116",
+                },
+                Object {
+                  "label": "平谷区",
+                  "value": "110117",
+                },
+                Object {
+                  "label": "密云区",
+                  "value": "110118",
+                },
+                Object {
+                  "label": "延庆区",
+                  "value": "110119",
+                },
+              ],
+              "label": "北京市",
+              "value": "110100",
+            },
+          ],
+          "label": "北京市",
+          "value": "110000",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "和平区",
+                  "value": "120101",
+                },
+                Object {
+                  "label": "河东区",
+                  "value": "120102",
+                },
+                Object {
+                  "label": "河西区",
+                  "value": "120103",
+                },
+                Object {
+                  "label": "南开区",
+                  "value": "120104",
+                },
+                Object {
+                  "label": "河北区",
+                  "value": "120105",
+                },
+                Object {
+                  "label": "红桥区",
+                  "value": "120106",
+                },
+                Object {
+                  "label": "东丽区",
+                  "value": "120110",
+                },
+                Object {
+                  "label": "西青区",
+                  "value": "120111",
+                },
+                Object {
+                  "label": "津南区",
+                  "value": "120112",
+                },
+                Object {
+                  "label": "北辰区",
+                  "value": "120113",
+                },
+                Object {
+                  "label": "武清区",
+                  "value": "120114",
+                },
+                Object {
+                  "label": "宝坻区",
+                  "value": "120115",
+                },
+                Object {
+                  "label": "滨海新区",
+                  "value": "120116",
+                },
+                Object {
+                  "label": "宁河区",
+                  "value": "120117",
+                },
+                Object {
+                  "label": "静海区",
+                  "value": "120118",
+                },
+                Object {
+                  "label": "蓟州区",
+                  "value": "120119",
+                },
+              ],
+              "label": "天津市",
+              "value": "120100",
+            },
+          ],
+          "label": "天津市",
+          "value": "120000",
+        },
+      ]
+    }}"
+    theme="tab"
+    title="请选择地址"
+    visible="{{false}}"
+    bind:change="onChange"
+  />
+</theme-tab>
+`;
+
+exports[`Cascader Cascader with-title demo works fine 1`] = `
+<with-title>
+  <t-cell
+    arrow="{{true}}"
+    note="请选择地址"
+    title="地址"
+    bind:click="showCascader"
+  />
+  <t-cascader
+    options="{{
+      Array [
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "东城区",
+                  "value": "110101",
+                },
+                Object {
+                  "label": "西城区",
+                  "value": "110102",
+                },
+                Object {
+                  "label": "朝阳区",
+                  "value": "110105",
+                },
+                Object {
+                  "label": "丰台区",
+                  "value": "110106",
+                },
+                Object {
+                  "label": "石景山区",
+                  "value": "110107",
+                },
+                Object {
+                  "label": "海淀区",
+                  "value": "110108",
+                },
+                Object {
+                  "label": "门头沟区",
+                  "value": "110109",
+                },
+                Object {
+                  "label": "房山区",
+                  "value": "110111",
+                },
+                Object {
+                  "label": "通州区",
+                  "value": "110112",
+                },
+                Object {
+                  "label": "顺义区",
+                  "value": "110113",
+                },
+                Object {
+                  "label": "昌平区",
+                  "value": "110114",
+                },
+                Object {
+                  "label": "大兴区",
+                  "value": "110115",
+                },
+                Object {
+                  "label": "怀柔区",
+                  "value": "110116",
+                },
+                Object {
+                  "label": "平谷区",
+                  "value": "110117",
+                },
+                Object {
+                  "label": "密云区",
+                  "value": "110118",
+                },
+                Object {
+                  "label": "延庆区",
+                  "value": "110119",
+                },
+              ],
+              "label": "北京市",
+              "value": "110100",
+            },
+          ],
+          "label": "北京市",
+          "value": "110000",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "和平区",
+                  "value": "120101",
+                },
+                Object {
+                  "label": "河东区",
+                  "value": "120102",
+                },
+                Object {
+                  "label": "河西区",
+                  "value": "120103",
+                },
+                Object {
+                  "label": "南开区",
+                  "value": "120104",
+                },
+                Object {
+                  "label": "河北区",
+                  "value": "120105",
+                },
+                Object {
+                  "label": "红桥区",
+                  "value": "120106",
+                },
+                Object {
+                  "label": "东丽区",
+                  "value": "120110",
+                },
+                Object {
+                  "label": "西青区",
+                  "value": "120111",
+                },
+                Object {
+                  "label": "津南区",
+                  "value": "120112",
+                },
+                Object {
+                  "label": "北辰区",
+                  "value": "120113",
+                },
+                Object {
+                  "label": "武清区",
+                  "value": "120114",
+                },
+                Object {
+                  "label": "宝坻区",
+                  "value": "120115",
+                },
+                Object {
+                  "label": "滨海新区",
+                  "value": "120116",
+                },
+                Object {
+                  "label": "宁河区",
+                  "value": "120117",
+                },
+                Object {
+                  "label": "静海区",
+                  "value": "120118",
+                },
+                Object {
+                  "label": "蓟州区",
+                  "value": "120119",
+                },
+              ],
+              "label": "天津市",
+              "value": "120100",
+            },
+          ],
+          "label": "天津市",
+          "value": "120000",
+        },
+      ]
+    }}"
+    subTitles="{{
+      Array [
+        "请选择省份",
+        "请选择城市",
+        "请选择区/县",
+      ]
+    }}"
+    title="请选择地址"
+    visible="{{false}}"
+    bind:change="onChange"
+  />
+</with-title>
+`;
+
+exports[`Cascader Cascader with-value demo works fine 1`] = `
+<with-value>
+  <t-cell
+    arrow="{{true}}"
+    note="请选择地址"
+    title="地址"
+    bind:click="showCascader"
+  />
+  <t-cascader
+    options="{{
+      Array [
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "东城区",
+                  "value": "110101",
+                },
+                Object {
+                  "label": "西城区",
+                  "value": "110102",
+                },
+                Object {
+                  "label": "朝阳区",
+                  "value": "110105",
+                },
+                Object {
+                  "label": "丰台区",
+                  "value": "110106",
+                },
+                Object {
+                  "label": "石景山区",
+                  "value": "110107",
+                },
+                Object {
+                  "label": "海淀区",
+                  "value": "110108",
+                },
+                Object {
+                  "label": "门头沟区",
+                  "value": "110109",
+                },
+                Object {
+                  "label": "房山区",
+                  "value": "110111",
+                },
+                Object {
+                  "label": "通州区",
+                  "value": "110112",
+                },
+                Object {
+                  "label": "顺义区",
+                  "value": "110113",
+                },
+                Object {
+                  "label": "昌平区",
+                  "value": "110114",
+                },
+                Object {
+                  "label": "大兴区",
+                  "value": "110115",
+                },
+                Object {
+                  "label": "怀柔区",
+                  "value": "110116",
+                },
+                Object {
+                  "label": "平谷区",
+                  "value": "110117",
+                },
+                Object {
+                  "label": "密云区",
+                  "value": "110118",
+                },
+                Object {
+                  "label": "延庆区",
+                  "value": "110119",
+                },
+              ],
+              "label": "北京市",
+              "value": "110100",
+            },
+          ],
+          "label": "北京市",
+          "value": "110000",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "和平区",
+                  "value": "120101",
+                },
+                Object {
+                  "label": "河东区",
+                  "value": "120102",
+                },
+                Object {
+                  "label": "河西区",
+                  "value": "120103",
+                },
+                Object {
+                  "label": "南开区",
+                  "value": "120104",
+                },
+                Object {
+                  "label": "河北区",
+                  "value": "120105",
+                },
+                Object {
+                  "label": "红桥区",
+                  "value": "120106",
+                },
+                Object {
+                  "label": "东丽区",
+                  "value": "120110",
+                },
+                Object {
+                  "label": "西青区",
+                  "value": "120111",
+                },
+                Object {
+                  "label": "津南区",
+                  "value": "120112",
+                },
+                Object {
+                  "label": "北辰区",
+                  "value": "120113",
+                },
+                Object {
+                  "label": "武清区",
+                  "value": "120114",
+                },
+                Object {
+                  "label": "宝坻区",
+                  "value": "120115",
+                },
+                Object {
+                  "label": "滨海新区",
+                  "value": "120116",
+                },
+                Object {
+                  "label": "宁河区",
+                  "value": "120117",
+                },
+                Object {
+                  "label": "静海区",
+                  "value": "120118",
+                },
+                Object {
+                  "label": "蓟州区",
+                  "value": "120119",
+                },
+              ],
+              "label": "天津市",
+              "value": "120100",
+            },
+          ],
+          "label": "天津市",
+          "value": "120000",
+        },
+      ]
+    }}"
+    title="请选择地址"
+    value="120119"
+    visible="{{false}}"
+    bind:change="onChange"
+  />
+</with-value>
+`;
diff --git a/src/cascader/cascader.wxml b/src/cascader/cascader.wxml
index 1022d51a6..735484ee0 100644
--- a/src/cascader/cascader.wxml
+++ b/src/cascader/cascader.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="hide">
+<t-popup class="class" visible="{{visible}}" placement="bottom" bind:visible-change="hide">
   <view style="{{_._style([style, customStyle])}}" class="{{name}}">
     <view class="{{name}}__title">
       <slot name="title" />
diff --git a/src/cell-group/cell-group.wxml b/src/cell-group/cell-group.wxml
index db06b7819..7f19c002a 100644
--- a/src/cell-group/cell-group.wxml
+++ b/src/cell-group/cell-group.wxml
@@ -1,9 +1,9 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view wx:if="{{ title }}" class="{{ classPrefix }}__title {{prefix}}-class-title"> {{ title }} </view>
+<view wx:if="{{ title }}" class="class {{ classPrefix }}__title {{prefix}}-class-title"> {{ title }} </view>
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [[bordered, 'bordered'], theme])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [[bordered, 'bordered'], theme])}} class {{prefix}}-class"
 >
   <slot />
 </view>
diff --git a/src/cell/__test__/__snapshots__/index.test.js.snap b/src/cell/__test__/__snapshots__/index.test.js.snap
index ffbaf2db3..6f25cddf5 100644
--- a/src/cell/__test__/__snapshots__/index.test.js.snap
+++ b/src/cell/__test__/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`cell :base 1`] = `
     <wx-view
       ariaLabel=""
       ariaRole=""
-      class="t-class t-cell   t-cell--middle"
+      class="class t-class t-cell   t-cell--middle"
       hoverClass="t-cell--hover-class"
       hoverStayTime="70"
       style=""
@@ -59,7 +59,7 @@ exports[`cell :with group 1`] = `
 <main>
   <main>
     <wx-view
-      class="t-cell-group t-cell-group--false t-cell-group--default t-class"
+      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
       style=""
     />
   </main>
diff --git a/src/cell/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..a7e4b6eb0
--- /dev/null
+++ b/src/cell/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cell Cell base demo works fine 1`] = `
+<base>
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    title="单行标题"
+  />
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    required="{{true}}"
+    title="单行标题"
+  />
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    title="单行标题"
+  >
+    <t-badge
+      count="{{16}}"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    hover="{{true}}"
+    title="单行标题"
+  >
+    <t-switch
+      defaultValue="{{true}}"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    note="辅助信息"
+    title="单行标题"
+  />
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    leftIcon="lock-on"
+    title="单行标题"
+  />
+</base>
+`;
+
+exports[`Cell Cell multiple demo works fine 1`] = `
+<multiple>
+  <t-cell
+    arrow="{{true}}"
+    description="一段很长很长的内容文字"
+    hover="{{true}}"
+    title="单行标题"
+  />
+  <t-cell
+    arrow="{{true}}"
+    description="一段很长很长的内容文字"
+    hover="{{true}}"
+    required="{{true}}"
+    title="单行标题"
+  />
+  <t-cell
+    arrow="{{true}}"
+    description="一段很长很长的内容文字"
+    hover="{{true}}"
+    title="单行标题"
+  >
+    <t-badge
+      count="{{16}}"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    description="一段很长很长的内容文字"
+    hover="{{true}}"
+    title="单行标题"
+  >
+    <t-switch
+      defaultValue="{{true}}"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    arrow="{{true}}"
+    description="一段很长很长的内容文字"
+    hover="{{true}}"
+    note="辅助信息"
+    title="单行标题"
+  />
+  <t-cell
+    arrow="{{true}}"
+    description="一段很长很长的内容文字"
+    hover="{{true}}"
+    leftIcon="lock-on"
+    title="单行标题"
+  />
+  <t-cell
+    description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
+    hover="{{true}}"
+    title="多行标题"
+  />
+  <t-cell
+    arrow="{{true}}"
+    description="一段很长很长很长的内容文字"
+    hover="{{true}}"
+    title="多行带头像"
+  >
+    <wx-view
+      class="avatar"
+      slot="left-icon"
+    >
+      <wx-open-data
+        type="userAvatarUrl"
+      />
+    </wx-view>
+  </t-cell>
+  <t-cell
+    align="top"
+    description="一段很长很长的内容文字"
+    hover="{{true}}"
+    image="https://tdesign.gtimg.com/miniprogram/images/cell1.png"
+    title="多行带图片"
+  />
+</multiple>
+`;
+
+exports[`Cell Cell theme demo works fine 1`] = `
+<theme>
+  <t-cell-group
+    theme="card"
+  >
+    <t-cell
+      arrow="{{true}}"
+      hover="{{true}}"
+      leftIcon="service"
+      title="单行标题"
+    />
+    <t-cell
+      arrow="{{true}}"
+      hover="{{true}}"
+      leftIcon="internet"
+      title="单行标题"
+    />
+    <t-cell
+      arrow="{{true}}"
+      hover="{{true}}"
+      leftIcon="lock-on"
+      title="单行标题"
+    />
+  </t-cell-group>
+</theme>
+`;
diff --git a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..6f25cddf5
--- /dev/null
+++ b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cell :base 1`] = `
+<main>
+  <main
+    id="cell"
+  >
+    <wx-view
+      ariaLabel=""
+      ariaRole=""
+      class="class t-class t-cell   t-cell--middle"
+      hoverClass="t-cell--hover-class"
+      hoverStayTime="70"
+      style=""
+      bind:tap="onClick"
+    >
+      <wx-view
+        class="t-cell__left t-class-left"
+      />
+      <wx-view
+        class="t-cell__title t-class-title"
+      >
+        <wx-view
+          class="t-cell__title-text"
+        />
+        <wx-view
+          class="t-cell__description t-class-description"
+        />
+      </wx-view>
+      <wx-view
+        class="t-cell__note t-class-note"
+      />
+      <wx-view
+        class="t-cell__right t-class-right"
+      >
+        <t-icon
+          tClass="t-cell__right-icon t-class-right-icon"
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon- t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+    </wx-view>
+  </main>
+</main>
+`;
+
+exports[`cell :with group 1`] = `
+<main>
+  <main>
+    <wx-view
+      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+      style=""
+    />
+  </main>
+</main>
+`;
diff --git a/src/cell/cell.wxml b/src/cell/cell.wxml
index e21c92ad0..cc942c795 100644
--- a/src/cell/cell.wxml
+++ b/src/cell/cell.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{prefix}}-class {{classPrefix}} {{ hover ? classPrefix + '--hover' : ''}} {{ !bordered || isLastChild ? classPrefix + '--borderless' : ''}} {{classPrefix}}--{{align}}"
+  class="class {{prefix}}-class {{classPrefix}} {{ hover ? classPrefix + '--hover' : ''}} {{ !bordered ? classPrefix + '--borderless' : ''}} {{classPrefix}}--{{align}}"
   hover-class="{{classPrefix}}--hover-class"
   hover-stay-time="70"
   bind:tap="onClick"
diff --git a/src/check-tag/check-tag.wxml b/src/check-tag/check-tag.wxml
index 9a3181053..6b671736e 100644
--- a/src/check-tag/check-tag.wxml
+++ b/src/check-tag/check-tag.wxml
@@ -1,7 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 <import src="../common/template/icon.wxml" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{className}} {{prefix}}-class" bind:tap="onClick">
+<view style="{{_._style([style, customStyle])}}" class="{{className}} class {{prefix}}-class" bind:tap="onClick">
   <view aria-hidden="{{true}}" class="{{classPrefix}}__icon">
     <template wx:if="{{_icon}}" is="icon" data="{{ tClass: prefix + '-icon', ..._icon }}" />
     <slot name="icon" />
diff --git a/src/checkbox-group/checkbox-group.ts b/src/checkbox-group/checkbox-group.ts
index 73f553406..93705214e 100644
--- a/src/checkbox-group/checkbox-group.ts
+++ b/src/checkbox-group/checkbox-group.ts
@@ -6,7 +6,7 @@ const { prefix } = config;
 const name = `${prefix}-checkbox-group`;
 @wxComponent()
 export default class CheckBoxGroup extends SuperComponent {
-  externalClasses = ['class', `${prefix}-class`];
+  externalClasses = [`${prefix}-class`];
 
   relations: RelationsOptions = {
     '../checkbox/checkbox': {
diff --git a/src/checkbox/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/checkbox/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..b0785a4e9
--- /dev/null
+++ b/src/checkbox/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox Checkbox all demo works fine 1`] = `
+<all>
+  <t-checkbox-group
+    defaultValue="{{
+      Array [
+        1,
+        2,
+        3,
+        "",
+      ]
+    }}"
+    options="{{
+      Array [
+        Object {
+          "checkAll": true,
+          "label": "全选",
+        },
+        Object {
+          "label": "多选",
+          "value": 1,
+        },
+        Object {
+          "label": "多选",
+          "value": 2,
+        },
+        Object {
+          "content": "单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息",
+          "label": "多选",
+          "value": 3,
+        },
+      ]
+    }}"
+    bind:change="onCheckAllChange"
+  />
+</all>
+`;
+
+exports[`Checkbox Checkbox base demo works fine 1`] = `
+<base>
+  <t-checkbox-group
+    value="{{
+      Array [
+        "checkbox1",
+        "checkbox2",
+      ]
+    }}"
+    bind:change="handleGroupChange"
+  >
+    <t-checkbox
+      label="多选"
+      value="checkbox1"
+    />
+    <t-checkbox
+      label="多选"
+      value="checkbox2"
+    />
+    <t-checkbox
+      label="多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行"
+      maxLabelRow="2"
+      value="checkbox3"
+    />
+    <t-checkbox
+      content="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
+      label="多选"
+      maxContentRow="2"
+      value="checkbox4"
+    />
+  </t-checkbox-group>
+</base>
+`;
+
+exports[`Checkbox Checkbox card demo works fine 1`] = `
+<card>
+  <t-checkbox-group
+    defaultValue="{{
+      Array [
+        "1",
+        "2",
+      ]
+    }}"
+    tClass="theme-card"
+  >
+    <t-checkbox
+      label="多选"
+      value="1"
+    />
+    <t-checkbox
+      label="多选"
+      value="2"
+    />
+    <t-checkbox
+      label="多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题"
+      value="3"
+    />
+  </t-checkbox-group>
+</card>
+`;
+
+exports[`Checkbox Checkbox horizontal demo works fine 1`] = `
+<horizontal>
+  <t-checkbox-group
+    borderless="{{true}}"
+    defaultValue="{{
+      Array [
+        "checkbox1",
+        "checkbox2",
+      ]
+    }}"
+    tClass="box"
+    bind:change="onChange"
+  >
+    <t-checkbox
+      block="{{false}}"
+      label="多选标题"
+      value="checkbox1"
+    />
+    <t-checkbox
+      block="{{false}}"
+      label="多选标题"
+      value="checkbox2"
+    />
+    <t-checkbox
+      block="{{false}}"
+      label="上限四字"
+      value="checkbox3"
+    />
+  </t-checkbox-group>
+</horizontal>
+`;
+
+exports[`Checkbox Checkbox right demo works fine 1`] = `
+<right>
+  <t-checkbox
+    checked="{{true}}"
+    label="多选"
+    value="1"
+  />
+  <wx-view
+    class="box"
+    style="height: 32rpx"
+  />
+  <t-checkbox
+    align="right"
+    checked="{{true}}"
+    label="多选"
+    value="2"
+  />
+</right>
+`;
+
+exports[`Checkbox Checkbox special demo works fine 1`] = `
+<special>
+  <t-checkbox-group
+    value="{{
+      Array [
+        0,
+        1,
+      ]
+    }}"
+    bind:change="onChange"
+  >
+    <wx-view
+      class="card card--active"
+    >
+      <t-icon
+        ariaHidden="{{true}}"
+        name="check"
+        tClass="card__icon"
+      />
+      <t-checkbox
+        borderless="{{true}}"
+        content="描述信息描述信息描述信息描述信息描述信息"
+        icon="none"
+        label="多选"
+        value="{{0}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card card--active"
+    >
+      <t-icon
+        ariaHidden="{{true}}"
+        name="check"
+        tClass="card__icon"
+      />
+      <t-checkbox
+        borderless="{{true}}"
+        content="描述信息描述信息描述信息描述信息描述信息"
+        icon="none"
+        label="多选"
+        value="{{1}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card "
+    >
+      <t-checkbox
+        borderless="{{true}}"
+        content="描述信息描述信息描述信息描述信息描述信息"
+        icon="none"
+        label="多选"
+        value="{{2}}"
+      />
+    </wx-view>
+  </t-checkbox-group>
+  <wx-view
+    class="demo-desc"
+    style="margin: 48rpx 32rpx 32rpx"
+  >
+    横向卡片多选框
+  </wx-view>
+  <t-checkbox-group
+    tClass="horizontal-box"
+    value="{{
+      Array [
+        0,
+        1,
+      ]
+    }}"
+    bind:change="onChange1"
+  >
+    <wx-view
+      class="card card--active"
+    >
+      <t-icon
+        ariaHidden="{{true}}"
+        name="check"
+        tClass="card__icon"
+      />
+      <t-checkbox
+        borderless="{{true}}"
+        icon="none"
+        label="多选"
+        value="{{0}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card card--active"
+    >
+      <t-icon
+        ariaHidden="{{true}}"
+        name="check"
+        tClass="card__icon"
+      />
+      <t-checkbox
+        borderless="{{true}}"
+        icon="none"
+        label="多选"
+        value="{{1}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card "
+    >
+      <t-checkbox
+        borderless="{{true}}"
+        icon="none"
+        label="多选"
+        value="{{2}}"
+      />
+    </wx-view>
+  </t-checkbox-group>
+</special>
+`;
+
+exports[`Checkbox Checkbox status demo works fine 1`] = `
+<status>
+  <t-checkbox-group
+    defaultValue="{{
+      Array [
+        "checkbox1",
+      ]
+    }}"
+    disabled="{{true}}"
+  >
+    <t-checkbox
+      label="选项禁用-已选"
+      value="checkbox1"
+    />
+    <t-checkbox
+      label="选项禁用-默认"
+      value="checkbox2"
+    />
+  </t-checkbox-group>
+</status>
+`;
+
+exports[`Checkbox Checkbox type demo works fine 1`] = `
+<type>
+  <t-checkbox
+    defaultChecked="{{true}}"
+    icon="line"
+    label="多选"
+  />
+  <wx-view
+    class="box"
+    style="height: 32rpx"
+  />
+  <t-checkbox
+    defaultChecked="{{true}}"
+    icon="rectangle"
+    label="多选"
+  />
+  <wx-view
+    class="box"
+    style="height: 32rpx"
+  />
+  <t-checkbox
+    icon="{{
+      Array [
+        "https://tdesign.gtimg.com/miniprogram/checkbox-checked.png",
+        "https://tdesign.gtimg.com/miniprogram/checkbox.png",
+      ]
+    }}"
+    label="图片图标"
+    value="checkbox1"
+  />
+</type>
+`;
diff --git a/src/checkbox/checkbox.wxml b/src/checkbox/checkbox.wxml
index dbf6aa6f9..d1bdb7e7a 100644
--- a/src/checkbox/checkbox.wxml
+++ b/src/checkbox/checkbox.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [align, theme, ['checked', checked], ['block', block]])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [align, theme, ['checked', checked], ['block', block]])}} class {{prefix}}-class"
   aria-role="checkbox"
   aria-checked="{{checked ? (indeterminate ? 'mixed' : true) : false}}"
   aria-disabled="{{disabled ? true : false}}"
diff --git a/src/collapse-panel/collapse-panel.wxml b/src/collapse-panel/collapse-panel.wxml
index e4d713625..370e7a9a2 100644
--- a/src/collapse-panel/collapse-panel.wxml
+++ b/src/collapse-panel/collapse-panel.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class"
+  class="class {{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class"
 >
   <view
     class="{{classPrefix}}__title"
diff --git a/src/collapse/__test__/__snapshots__/index.test.js.snap b/src/collapse/__test__/__snapshots__/index.test.js.snap
index e507de36c..9b677c15f 100644
--- a/src/collapse/__test__/__snapshots__/index.test.js.snap
+++ b/src/collapse/__test__/__snapshots__/index.test.js.snap
@@ -5,12 +5,12 @@ exports[`collapse :defaultExpandAll 1`] = `
   id="expandAll"
 >
   <wx-view
-    class="t-class t-collapse t-collapse--default"
+    class="class t-class t-collapse t-collapse--default"
     style=""
   >
     <t-collapse-panel>
       <wx-view
-        class="t-collapse-panel t-collapse-panel--bottom t-class"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
       >
         <wx-view
@@ -30,7 +30,7 @@ exports[`collapse :defaultExpandAll 1`] = `
             <wx-view
               ariaLabel=""
               ariaRole=""
-              class="t-class t-cell   t-cell--middle"
+              class="class t-class t-cell   t-cell--middle"
               hoverClass="t-cell--hover-class"
               hoverStayTime="70"
               style=""
@@ -95,7 +95,7 @@ exports[`collapse :defaultExpandAll 1`] = `
     </t-collapse-panel>
     <t-collapse-panel>
       <wx-view
-        class="t-collapse-panel t-collapse-panel--bottom t-class"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
       >
         <wx-view
@@ -115,7 +115,7 @@ exports[`collapse :defaultExpandAll 1`] = `
             <wx-view
               ariaLabel=""
               ariaRole=""
-              class="t-class t-cell   t-cell--middle"
+              class="class t-class t-cell   t-cell--middle"
               hoverClass="t-cell--hover-class"
               hoverStayTime="70"
               style=""
diff --git a/src/collapse/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/collapse/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..741dd5beb
--- /dev/null
+++ b/src/collapse/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapse Collapse accordion demo works fine 1`] = `
+<accordion>
+  <t-collapse
+    defaultValue="{{
+      Array [
+        0,
+      ]
+    }}"
+    expandIcon="{{true}}"
+    expandMutex="{{true}}"
+  >
+    <t-collapse-panel
+      header="折叠面板标题"
+      value="{{0}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+    <t-collapse-panel
+      header="折叠面板标题"
+      value="{{1}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+    <t-collapse-panel
+      header="折叠面板标题"
+      value="{{2}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+    <t-collapse-panel
+      disabled="{{true}}"
+      header="折叠面板标题"
+      value="{{3}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+  </t-collapse>
+</accordion>
+`;
+
+exports[`Collapse Collapse action demo works fine 1`] = `
+<action>
+  <wx-view
+    class="wrapper"
+  >
+    <t-collapse
+      value="{{
+        Array [
+          0,
+        ]
+      }}"
+      bind:change="handleChange"
+    >
+      <t-collapse-panel
+        expandIcon="{{true}}"
+        header="折叠面板标题"
+        headerRightContent="收起"
+        value="{{0}}"
+      >
+        
+      此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+    
+      </t-collapse-panel>
+    </t-collapse>
+  </wx-view>
+</action>
+`;
+
+exports[`Collapse Collapse base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="wrapper"
+  >
+    <t-collapse
+      value="{{
+        Array [
+          0,
+        ]
+      }}"
+      bind:change="handleChange"
+    >
+      <t-collapse-panel
+        expandIcon="{{true}}"
+        header="折叠面板标题"
+        value="{{0}}"
+      >
+        
+      此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+    
+      </t-collapse-panel>
+    </t-collapse>
+  </wx-view>
+</base>
+`;
+
+exports[`Collapse Collapse placement demo works fine 1`] = `
+<placement>
+  <wx-view
+    class="wrapper"
+  >
+    <t-collapse
+      value="{{
+        Array [
+          0,
+        ]
+      }}"
+      bind:change="handleChange"
+    >
+      <t-collapse-panel
+        expandIcon="{{true}}"
+        header="折叠面板标题"
+        placement="top"
+        value="{{0}}"
+      >
+        
+      此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+    
+      </t-collapse-panel>
+    </t-collapse>
+  </wx-view>
+</placement>
+`;
+
+exports[`Collapse Collapse theme demo works fine 1`] = `
+<theme>
+  <t-collapse
+    defaultValue="{{
+      Array [
+        0,
+      ]
+    }}"
+    expandIcon="{{true}}"
+    expandMutex="{{true}}"
+    theme="card"
+  >
+    <t-collapse-panel
+      header="折叠面板标题"
+      value="{{0}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+    <t-collapse-panel
+      header="折叠面板标题"
+      value="{{1}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+    <t-collapse-panel
+      header="折叠面板标题"
+      value="{{2}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+    <t-collapse-panel
+      disabled="{{true}}"
+      header="折叠面板标题"
+      value="{{3}}"
+    >
+      
+    此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+  
+    </t-collapse-panel>
+  </t-collapse>
+</theme>
+`;
diff --git a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..9b677c15f
--- /dev/null
+++ b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`collapse :defaultExpandAll 1`] = `
+<t-collapse
+  id="expandAll"
+>
+  <wx-view
+    class="class t-class t-collapse t-collapse--default"
+    style=""
+  >
+    <t-collapse-panel>
+      <wx-view
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
+        style=""
+      >
+        <wx-view
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{false}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
+        >
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
+          >
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell   t-cell--middle"
+              hoverClass="t-cell--hover-class"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title t-class-title"
+              >
+                <wx-view
+                  class="t-cell__title-text"
+                >
+                   first 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-down t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
+        </wx-view>
+        <wx-view
+          animation=""
+          ariaHidden="{{true}}"
+          class="t-collapse-panel__wrapper"
+        >
+          <wx-view
+            class="t-collapse-panel__content t-class-content"
+          >
+            
+      
+      
+            内容1
+          </wx-view>
+        </wx-view>
+      </wx-view>
+    </t-collapse-panel>
+    <t-collapse-panel>
+      <wx-view
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
+        style=""
+      >
+        <wx-view
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{true}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
+        >
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
+          >
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell   t-cell--middle"
+              hoverClass="t-cell--hover-class"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title t-class-title"
+              >
+                <wx-view
+                  class="t-cell__title-text"
+                >
+                   second 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-up t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
+        </wx-view>
+        <wx-view
+          animation=""
+          ariaHidden=""
+          class="t-collapse-panel__wrapper"
+        >
+          <wx-view
+            class="t-collapse-panel__content t-class-content"
+          >
+            
+      
+      
+            内容2
+          </wx-view>
+        </wx-view>
+      </wx-view>
+    </t-collapse-panel>
+  </wx-view>
+</t-collapse>
+`;
diff --git a/src/collapse/collapse.wxml b/src/collapse/collapse.wxml
index ea29a8594..24b87709a 100644
--- a/src/collapse/collapse.wxml
+++ b/src/collapse/collapse.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{prefix}}-class {{_.cls(classPrefix, [['hairline--top-bottom', border], theme])}}"
+  class="class {{prefix}}-class {{_.cls(classPrefix, [['hairline--top-bottom', border], theme])}}"
 >
   <slot />
 </view>
diff --git a/src/common/src/instantiationDecorator.ts b/src/common/src/instantiationDecorator.ts
index f5e141bff..1b9319ba0 100644
--- a/src/common/src/instantiationDecorator.ts
+++ b/src/common/src/instantiationDecorator.ts
@@ -28,7 +28,7 @@ const ComponentNativeProps = [
  * @param options {}
  */
 export const toComponent = function toComponent(options: Record<string, any>) {
-  const { relations, behaviors = [], properties } = options;
+  const { relations, behaviors = [], properties, externalClasses = [] } = options;
 
   if (options.properties) {
     Object.keys(options.properties).forEach((k) => {
@@ -92,6 +92,8 @@ export const toComponent = function toComponent(options: Record<string, any>) {
 
   options.behaviors = [...behaviors];
 
+  options.externalClasses = ['class', ...externalClasses];
+
   Object.getOwnPropertyNames(options).forEach((k) => {
     const desc = Object.getOwnPropertyDescriptor(options, k);
     if (!desc) return;
diff --git a/src/count-down/__test__/__snapshots__/index.test.js.snap b/src/count-down/__test__/__snapshots__/index.test.js.snap
index 4aee66664..311f3161a 100644
--- a/src/count-down/__test__/__snapshots__/index.test.js.snap
+++ b/src/count-down/__test__/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`countdown :autoStart 1`] = `
   <t-count-down>
     <wx-view
       ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium t-class "
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
       style=""
     >
       00 : 00 : 01
@@ -19,7 +19,7 @@ exports[`countdown :base 1`] = `
   <t-count-down>
     <wx-view
       ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium t-class "
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
       style=""
     >
       00 : 00 : 01
@@ -33,7 +33,7 @@ exports[`countdown :base 2`] = `
   <t-count-down>
     <wx-view
       ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium t-class "
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
       style=""
     >
       00 : 00 : 00
@@ -49,7 +49,7 @@ exports[`countdown :millisecond 1`] = `
   >
     <wx-view
       ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium t-class "
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
       style=""
     >
       00 : 00 : 00
diff --git a/src/count-down/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/count-down/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..512d78dd8
--- /dev/null
+++ b/src/count-down/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,347 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CountDown CountDown base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       时分秒 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带毫秒 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带方形底 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        theme="square"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带圆形底 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       无底色带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        content="default"
+        splitWithUnit="{{true}}"
+        theme="hightlight"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+</base>
+`;
+
+exports[`CountDown CountDown size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       时分秒 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        size="small"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        size="large"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带毫秒 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
+        size="small"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss:SSS"
+        millisecond="{{true}}"
+        size="large"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带方形底 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="small"
+        theme="square"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        theme="square"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="large"
+        theme="square"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带圆形底 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="small"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="large"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="small"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="large"
+        splitWithUnit="{{true}}"
+        theme="round"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="demo-count-down"
+  >
+    <wx-text
+      class="demo-count-down-desc"
+    >
+       无底色带单位 
+    </wx-text>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="small"
+        splitWithUnit="{{true}}"
+        theme="hightlight"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        splitWithUnit="{{true}}"
+        theme="hightlight"
+        time="{{5760000}}"
+      />
+    </wx-view>
+    <wx-view
+      class="demo-count-down-content"
+    >
+      <t-count-down
+        format="HH:mm:ss"
+        size="large"
+        splitWithUnit="{{true}}"
+        theme="hightlight"
+        time="{{5760000}}"
+      />
+    </wx-view>
+  </wx-view>
+</size>
+`;
diff --git a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..311f3161a
--- /dev/null
+++ b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`countdown :autoStart 1`] = `
+<main>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
+</main>
+`;
+
+exports[`countdown :base 1`] = `
+<main>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
+</main>
+`;
+
+exports[`countdown :base 2`] = `
+<main>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
+</main>
+`;
+
+exports[`countdown :millisecond 1`] = `
+<main>
+  <t-count-down
+    id="cd"
+  >
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
+</main>
+`;
diff --git a/src/count-down/count-down.wxml b/src/count-down/count-down.wxml
index 80c35a0f8..d9ad87d17 100644
--- a/src/count-down/count-down.wxml
+++ b/src/count-down/count-down.wxml
@@ -3,7 +3,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{classPrefix}}--{{theme}} {{classPrefix}}--{{size}} {{prefix}}-class "
+  class="{{classPrefix}} {{classPrefix}}--{{theme}} {{classPrefix}}--{{size}} class {{prefix}}-class "
   aria-role="option"
 >
   <slot wx:if="{{content !== 'default'}}" name="content" />
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
index d037302af..27ab23fa2 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -4,13 +4,14 @@ exports[`date-time-picker :base 1`] = `
 <main>
   <t-date-time-picker>
     <t-picker
-      class="t-date-time-picker"
+      class="class t-class t-date-time-picker"
       bind:cancel="onCancel"
       bind:change="onConfirm"
       bind:pick="onColumnChange"
       bind:visible-change="onVisibleChange"
     >
       <t-popup
+        class="class"
         bind:visible-change="onPopupChange"
       >
         <wx-view
@@ -459,7 +460,7 @@ exports[`date-time-picker :base 1`] = `
           <wx-view
             ariaLabel="关闭"
             ariaRole="button"
-            class="t-overlay t-fade-enter t-fade-enter-active"
+            class="t-overlay t-fade-enter t-fade-enter-active class"
             style="z-index:11000;"
             bind:tap="handleClick"
             catch:touchmove="noop"
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..1d734f351
--- /dev/null
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateTimePicker DateTimePicker date-all demo works fine 1`] = `
+<date-all>
+  <t-cell
+    arrow="{{true}}"
+    data-mode="datetime"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择日期时间"
+    bind:tap="showPicker"
+  />
+  <t-date-time-picker
+    format="YYYY-MM-DD HH:mm:ss"
+    mode="second"
+    title="选择日期和时间"
+    value="{{1640217600000}}"
+    visible="{{false}}"
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+</date-all>
+`;
+
+exports[`DateTimePicker DateTimePicker time demo works fine 1`] = `
+<time>
+  <wx-view
+    class="demo-desc"
+  >
+    时分秒选择器
+  </wx-view>
+  <t-cell
+    arrow="{{true}}"
+    data-mode="second"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择时间"
+    bind:tap="showPicker"
+  />
+  <wx-view
+    class="demo-desc"
+  >
+    时分选择器
+  </wx-view>
+  <t-cell
+    arrow="{{true}}"
+    data-mode="minute"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择时间"
+    bind:tap="showPicker"
+  />
+  <t-date-time-picker
+    format="HH:mm:ss"
+    mode="{{
+      Array [
+        "null",
+        "second",
+      ]
+    }}"
+    title="选择时间"
+    value="10:00:00"
+    visible=""
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+  <t-date-time-picker
+    format="HH:mm"
+    mode="{{
+      Array [
+        "null",
+        "minute",
+      ]
+    }}"
+    title="选择时间"
+    value="23:59"
+    visible=""
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+</time>
+`;
+
+exports[`DateTimePicker DateTimePicker year-month demo works fine 1`] = `
+<year-month>
+  <t-cell
+    arrow="{{true}}"
+    data-mode="month"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择日期"
+    bind:tap="showPicker"
+  />
+  <t-date-time-picker
+    end="2030-09-09 12:12:12"
+    format="YYYY-MM"
+    mode="month"
+    start="2000-01-01 00:00:00"
+    title="选择日期"
+    value="2021-09"
+    visible="{{false}}"
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+</year-month>
+`;
+
+exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = `
+<year-month-date>
+  <t-cell
+    arrow="{{true}}"
+    class="test"
+    data-mode="date"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择日期"
+    bind:tap="showPicker"
+  />
+  <t-date-time-picker
+    defaultValue="{{1640217600000}}"
+    end="2030-09-09 12:12:12"
+    format="YYYY-MM-DD"
+    mode="date"
+    start="2000-01-01 00:00:00"
+    title="选择日期"
+    visible="{{false}}"
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+</year-month-date>
+`;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..27ab23fa2
--- /dev/null
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,474 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`date-time-picker :base 1`] = `
+<main>
+  <t-date-time-picker>
+    <t-picker
+      class="class t-class t-date-time-picker"
+      bind:cancel="onCancel"
+      bind:change="onConfirm"
+      bind:pick="onColumnChange"
+      bind:visible-change="onVisibleChange"
+    >
+      <t-popup
+        class="class"
+        bind:visible-change="onPopupChange"
+      >
+        <wx-view
+          ariaModal="{{true}}"
+          ariaRole="dialog"
+          class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+          style="z-index:11500;"
+          bind:transitionend="onTransitionEnd"
+        >
+          <wx-view
+            class="t-popup__content t-class-content"
+          >
+            <wx-view
+              class="t-popup__close"
+              bind:tap="handleClose"
+            />
+            <wx-view
+              class="t-picker t-class"
+              slot="content"
+              style=""
+            >
+              <wx-view
+                class="t-picker__toolbar"
+              >
+                <wx-view
+                  class="t-picker__cancel t-class-cancel"
+                  bind:tap="onCancel"
+                >
+                  取消
+                </wx-view>
+                <wx-view
+                  class="t-picker__title t-class-title"
+                >
+                  选择日期
+                </wx-view>
+                <wx-view
+                  class="t-picker__confirm t-class-confirm"
+                  bind:tap="onConfirm"
+                >
+                  确定
+                </wx-view>
+              </wx-view>
+              <wx-view
+                class="t-picker__main"
+              >
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
+      2000年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
+      2001年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
+      2002年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
+      2003年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
+      2004年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
+      2005年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
+      2006年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
+      2007年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{8}}"
+                      >
+                        
+      2008年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
+      2009年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
+      2010年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
+      2011年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{12}}"
+                      >
+                        
+      2012年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{13}}"
+                      >
+                        
+      2013年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{14}}"
+                      >
+                        
+      2014年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{15}}"
+                      >
+                        
+      2015年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{16}}"
+                      >
+                        
+      2016年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{17}}"
+                      >
+                        
+      2017年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{18}}"
+                      >
+                        
+      2018年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{19}}"
+                      >
+                        
+      2019年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{20}}"
+                      >
+                        
+      2020年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{21}}"
+                      >
+                        
+      2021年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{22}}"
+                      >
+                        
+      2022年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{23}}"
+                      >
+                        
+      2023年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{24}}"
+                      >
+                        
+      2024年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{25}}"
+                      >
+                        
+      2025年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{26}}"
+                      >
+                        
+      2026年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{27}}"
+                      >
+                        
+      2027年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{28}}"
+                      >
+                        
+      2028年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{29}}"
+                      >
+                        
+      2029年
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{30}}"
+                      >
+                        
+      2030年
+    
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
+      1月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
+      2月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
+      3月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
+      4月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
+      5月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
+      6月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
+      7月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
+      8月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{8}}"
+                      >
+                        
+      9月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
+      10月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
+      11月
+    
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
+      12月
+    
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <wx-view
+                  class="t-picker__mask t-picker__mask--top"
+                />
+                <wx-view
+                  class="t-picker__mask t-picker__mask--bottom"
+                />
+                <wx-view
+                  class="t-picker__indicator"
+                />
+              </wx-view>
+            </wx-view>
+          </wx-view>
+        </wx-view>
+        <t-overlay
+          class="test"
+          id="popup-overlay"
+          bind:tap="handleOverlayClick"
+        >
+          <wx-view
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-overlay t-fade-enter t-fade-enter-active class"
+            style="z-index:11000;"
+            bind:tap="handleClick"
+            catch:touchmove="noop"
+            bind:transitionend="onTransitionEnd"
+          />
+        </t-overlay>
+      </t-popup>
+    </t-picker>
+  </t-date-time-picker>
+</main>
+`;
diff --git a/src/date-time-picker/date-time-picker.wxml b/src/date-time-picker/date-time-picker.wxml
index 179d52392..1dd9cbc09 100644
--- a/src/date-time-picker/date-time-picker.wxml
+++ b/src/date-time-picker/date-time-picker.wxml
@@ -2,7 +2,7 @@
 
 <t-picker
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}}"
+  class="class {{prefix}}-class {{classPrefix}}"
   visible="{{visible}}"
   value="{{columnsValue}}"
   bind:pick="onColumnChange"
diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
index 573994b4d..77099656f 100644
--- a/src/dialog/__test__/__snapshots__/index.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -6,6 +6,7 @@ exports[`dialog :base 1`] = `
     id="dialog"
   >
     <t-popup
+      class="class"
       tClass="t-dialog__wrapper"
       bind:visible-change="overlayClick"
     >
@@ -44,7 +45,7 @@ exports[`dialog :base 1`] = `
         <wx-view
           ariaLabel="关闭"
           ariaRole="button"
-          class="t-overlay t-fade-enter t-fade-enter-active"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
           style="z-index:11000;"
           bind:tap="handleClick"
           catch:touchmove="noop"
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..694fe840a
--- /dev/null
+++ b/src/dialog/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,498 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog Dialog base demo works fine 1`] = `
+<base>
+  <t-button
+    block="{{true}}"
+    data-key="showTextAndTitle"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  反馈类-基础
+
+  </t-button>
+  <t-dialog
+    confirmBtn="{{
+      Object {
+        "content": "知道了",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:confirm="closeDialog"
+  />
+  <t-button
+    block="{{true}}"
+    data-key="showContentOnly"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  反馈类-无标题
+
+  </t-button>
+  <t-dialog
+    confirmBtn="{{
+      Object {
+        "content": "知道了",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    visible=""
+    bind:confirm="closeDialog"
+  />
+  <t-button
+    block="{{true}}"
+    data-key="showMultiTextAndTitle"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  反馈类-内容超长
+
+  </t-button>
+  <t-dialog
+    confirmBtn="{{
+      Object {
+        "content": "知道了",
+        "variant": "base",
+      }
+    }}"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:confirm="closeDialog"
+  >
+    <wx-scroll-view
+      class="long-content"
+      scrollY="{{true}}"
+      slot="content"
+    >
+      <wx-view
+        class="content-container"
+      >
+        这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+    
+      </wx-view>
+    </wx-scroll-view>
+  </t-dialog>
+</base>
+`;
+
+exports[`Dialog Dialog button demo works fine 1`] = `
+<wx-button>
+  <t-button
+    block="{{true}}"
+    data-type="hasCancelBtn"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  开放能力按钮
+
+  </t-button>
+  <t-dialog
+    id="t-dialog"
+  />
+</wx-button>
+`;
+
+exports[`Dialog Dialog command demo works fine 1`] = `
+<command>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+     命令行操作 
+  </t-button>
+  <t-dialog
+    id="t-dialog"
+  />
+</command>
+`;
+
+exports[`Dialog Dialog confirm demo works fine 1`] = `
+<confirm>
+  <t-button
+    block="{{true}}"
+    data-key="showConfirm"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  确认类-带标题
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  />
+  <t-button
+    block="{{true}}"
+    data-key="showWarnConfirm"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  确认类-无标题
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "警示操作",
+        "theme": "danger",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  />
+</confirm>
+`;
+
+exports[`Dialog Dialog status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="demo-desc"
+  >
+    文字按钮
+  </wx-view>
+  <t-button
+    block="{{true}}"
+    data-key="showConfirm"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  文字按钮
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="确定"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  />
+  <wx-view
+    class="demo-desc"
+  >
+    水平基础按钮
+  </wx-view>
+  <t-button
+    block="{{true}}"
+    data-key="showWarnConfirm"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  水平基础按钮
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  />
+  <wx-view
+    class="demo-desc"
+  >
+    垂直基础按钮
+  </wx-view>
+  <t-button
+    block="{{true}}"
+    data-key="showTooLongBtnContent"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  垂直基础按钮
+
+  </t-button>
+  <t-dialog
+    buttonLayout="vertical"
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  />
+  <wx-view
+    class="demo-desc"
+  >
+    多按钮
+  </wx-view>
+  <t-button
+    block="{{true}}"
+    data-key="showMultiBtn"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  多按钮
+
+  </t-button>
+  <t-dialog
+    actions="{{
+      Array [
+        Object {
+          "content": "次要按钮",
+          "theme": "light",
+        },
+        Object {
+          "content": "次要按钮",
+          "theme": "light",
+        },
+        Object {
+          "content": "主要按钮",
+          "theme": "primary",
+        },
+      ]
+    }}"
+    buttonLayout="vertical"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:action="closeDialog"
+  />
+  <wx-view
+    class="demo-desc"
+  >
+    带关闭按钮
+  </wx-view>
+  <t-button
+    block="{{true}}"
+    data-key="showCloseBtn"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  带关闭按钮
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    closeBtn="{{true}}"
+    confirmBtn="{{
+      Object {
+        "content": "警示操作",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="对话框标题"
+    visible=""
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  />
+</status>
+`;
+
+exports[`Dialog Dialog with-image demo works fine 1`] = `
+<with-image>
+  <t-button
+    block="{{true}}"
+    data-key="imageOnTop"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  图片置顶
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="带输入框对话框"
+    visible=""
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-image
+      slot="top"
+      src="https://tdesign.gtimg.com/miniprogram/images/dialog1.png"
+      tClass="dialog-image"
+    />
+  </t-dialog>
+  <t-button
+    block="{{true}}"
+    data-key="imageOnMiddle"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  图片居中
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="带输入框对话框"
+    visible=""
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-image
+      slot="middle"
+      src="https://tdesign.gtimg.com/miniprogram/images/dialog1.png"
+      tClass="image-host dialog-image"
+    />
+  </t-dialog>
+</with-image>
+`;
+
+exports[`Dialog Dialog with-input demo works fine 1`] = `
+<with-input>
+  <t-button
+    block="{{true}}"
+    data-key="showWithInput"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  输入类-无描述
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="确定"
+    title="带输入框对话框"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-input
+      borderless="{{true}}"
+      class="dialog-input"
+      clearable="{{true}}"
+      placeholder="输入12文案"
+      placeholderClass="placeholder"
+      slot="content"
+    />
+  </t-dialog>
+  <t-button
+    block="{{true}}"
+    data-key="showTextAndTitleWithInput"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    输入类-带描述
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="确定"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    title="带输入框对话框"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-input
+      borderless="{{true}}"
+      class="dialog-input"
+      clearable="{{true}}"
+      placeholder="输入12文案"
+      placeholderClass="placeholder"
+      slot="content"
+    />
+  </t-dialog>
+</with-input>
+`;
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..77099656f
--- /dev/null
+++ b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dialog :base 1`] = `
+<main>
+  <t-dialog
+    id="dialog"
+  >
+    <t-popup
+      class="class"
+      tClass="t-dialog__wrapper"
+      bind:visible-change="overlayClick"
+    >
+      <wx-view
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
+      >
+        <wx-view
+          class="t-popup__content t-class-content"
+        >
+          <wx-view
+            class="t-popup__close"
+            bind:tap="handleClose"
+          />
+          <wx-view
+            class="t-dialog t-class"
+            slot="content"
+          >
+            <wx-view
+              class="t-dialog__content t-class-content"
+            />
+            <wx-view
+              class="t-dialog__footer t-dialog__footer--full"
+            />
+          </wx-view>
+        </wx-view>
+      </wx-view>
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
+        <wx-view
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
+        />
+      </t-overlay>
+    </t-popup>
+  </t-dialog>
+</main>
+`;
diff --git a/src/dialog/dialog.wxml b/src/dialog/dialog.wxml
index ed4d40be8..5609ddef1 100644
--- a/src/dialog/dialog.wxml
+++ b/src/dialog/dialog.wxml
@@ -6,6 +6,7 @@
 <t-popup
   name="dialog"
   style="{{_._style([style, customStyle])}}"
+  class="class"
   t-class="{{classPrefix}}__wrapper"
   visible="{{visible}}"
   showOverlay="{{showOverlay}}"
diff --git a/src/divider/__test__/__snapshots__/index.test.js.snap b/src/divider/__test__/__snapshots__/index.test.js.snap
index d07f56dee..473ce46af 100644
--- a/src/divider/__test__/__snapshots__/index.test.js.snap
+++ b/src/divider/__test__/__snapshots__/index.test.js.snap
@@ -6,10 +6,10 @@ exports[`Divider :base 1`] = `
     class="divider"
   >
     <wx-view
-      class=""
+      class="class t-class "
     >
       <wx-view
-        class="t-class t-divider t-divider--horizontal t-divider--center  "
+        class="t-divider t-divider--horizontal t-divider--center  "
         style=""
       >
         <wx-view
diff --git a/src/divider/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/divider/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..166c065ae
--- /dev/null
+++ b/src/divider/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider Divider base demo works fine 1`] = `
+<base>
+  <t-divider />
+  <wx-view
+    class="divider-demo__title"
+  >
+    带文字水平分割线
+  </wx-view>
+  <t-divider
+    align="left"
+    content="文字信息"
+  />
+  <t-divider
+    content="文字信息"
+  />
+  <t-divider
+    align="right"
+    content="文字信息"
+  />
+  <wx-view
+    class="divider-demo__title"
+  >
+    垂直分割线
+  </wx-view>
+  <wx-view
+    class="divider-wrapper"
+  >
+    <wx-text
+      class="demo-6__text-color"
+    >
+      文字信息
+    </wx-text>
+    <t-divider
+      layout="vertical"
+    />
+    <wx-text
+      class="demo-6__text-color"
+    >
+      文字信息
+    </wx-text>
+    <t-divider
+      layout="vertical"
+    />
+    <wx-text
+      class="demo-6__text-color"
+    >
+      文字信息
+    </wx-text>
+  </wx-view>
+</base>
+`;
+
+exports[`Divider Divider theme demo works fine 1`] = `
+<theme>
+  <t-divider
+    dashed="{{true}}"
+  />
+  <t-divider
+    align="left"
+    content="文字信息"
+    dashed="{{true}}"
+  />
+  <t-divider
+    content="文字信息"
+    dashed="{{true}}"
+  />
+  <t-divider
+    align="right"
+    content="文字信息"
+    dashed="{{true}}"
+  />
+</theme>
+`;
diff --git a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..473ce46af
--- /dev/null
+++ b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider :base 1`] = `
+<main>
+  <t-divider
+    class="divider"
+  >
+    <wx-view
+      class="class t-class "
+    >
+      <wx-view
+        class="t-divider t-divider--horizontal t-divider--center  "
+        style=""
+      >
+        <wx-view
+          class="t-class-content t-divider__content"
+        />
+      </wx-view>
+    </wx-view>
+  </t-divider>
+</main>
+`;
diff --git a/src/divider/divider.wxml b/src/divider/divider.wxml
index 4f1063747..5f1fa8816 100644
--- a/src/divider/divider.wxml
+++ b/src/divider/divider.wxml
@@ -1,8 +1,8 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view class="{{layout==='vertical'? classPrefix + '--vertical-center' : ''}}">
+<view class="class {{prefix}}-class {{layout==='vertical'? classPrefix + '--vertical-center' : ''}}">
   <view
-    class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{layout}} {{classPrefix}}--{{align}} {{dashed? classPrefix + '--dashed' : ''}} "
+    class="{{classPrefix}} {{classPrefix}}--{{layout}} {{classPrefix}}--{{align}} {{dashed? classPrefix + '--dashed' : ''}} "
     style="{{_._style([dividerStyle, style, customStyle])}}"
   >
     <view class="{{prefix}}-class-content {{classPrefix}}__content">
diff --git a/src/drawer/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/drawer/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..b37b24324
--- /dev/null
+++ b/src/drawer/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Drawer Drawer base demo works fine 1`] = `
+<base>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="openDrawerBase"
+  >
+    基础抽屉
+  </t-button>
+  <t-drawer
+    items="{{Array []}}"
+    placement="left"
+    visible=""
+    bind:item-click="itemClick"
+    bind:overlay-click="overlayClick"
+  />
+</base>
+`;
+
+exports[`Drawer Drawer footer demo works fine 1`] = `
+<footer>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="openDrawerBase"
+  >
+    带底部插槽
+  </t-button>
+  <t-drawer
+    items="{{Array []}}"
+    placement="left"
+    title="标题"
+    visible="{{false}}"
+    bind:item-click="itemClick"
+    bind:overlay-click="overlayClick"
+  >
+    <wx-view
+      class="button-host"
+    >
+      <t-button
+        block="{{true}}"
+        size="large="
+        slot="footer"
+        variant="outline"
+      >
+        操作
+      </t-button>
+    </wx-view>
+  </t-drawer>
+</footer>
+`;
+
+exports[`Drawer Drawer icon-drawer demo works fine 1`] = `
+<icon-drawer>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="openDrawerIcon"
+  >
+    带图标抽屉
+  </t-button>
+  <t-drawer
+    items="{{Array []}}"
+    placement="left"
+    visible=""
+    bind:item-click="itemClick"
+    bind:overlay-click="overlayClick"
+  />
+</icon-drawer>
+`;
+
+exports[`Drawer Drawer title demo works fine 1`] = `
+<title>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="openDrawerBase"
+  >
+    带标题抽屉
+  </t-button>
+  <t-drawer
+    items="{{Array []}}"
+    placement="left"
+    title="标题"
+    visible=""
+    bind:item-click="itemClick"
+    bind:overlay-click="overlayClick"
+  />
+</title>
+`;
diff --git a/src/drawer/drawer.wxml b/src/drawer/drawer.wxml
index b90a4b28f..83922ebfe 100644
--- a/src/drawer/drawer.wxml
+++ b/src/drawer/drawer.wxml
@@ -2,6 +2,7 @@
 
 <t-popup
   style="{{_._style([style, customStyle])}}"
+  class="class"
   bind:visible-change="visibleChange"
   visible="{{visible}}"
   zIndex="{{zIndex}}"
diff --git a/src/dropdown-item/dropdown-item.wxml b/src/dropdown-item/dropdown-item.wxml
index 95219cd38..135f8c6c6 100644
--- a/src/dropdown-item/dropdown-item.wxml
+++ b/src/dropdown-item/dropdown-item.wxml
@@ -3,7 +3,7 @@
 
 <view
   wx:if="{{wrapperVisible}}"
-  class="{{classPrefix}} {{prefix}}-class"
+  class="{{classPrefix}} class {{prefix}}-class"
   style="{{_._style([this.getStyles(top, zIndex), style, customStyle])}}"
 >
   <t-popup
diff --git a/src/dropdown-menu/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/dropdown-menu/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..63cb11647
--- /dev/null
+++ b/src/dropdown-menu/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,5411 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownMenu DropdownMenu multi demo works fine 1`] = `
+<multi>
+  <t-dropdown-menu>
+    <t-dropdown-item
+      label="单列多选"
+      multiple="{{true}}"
+      options="{{
+        Array [
+          Object {
+            "disabled": false,
+            "label": "选项一",
+            "value": "option_1",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项二",
+            "value": "option_2",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项三",
+            "value": "option_3",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项四",
+            "value": "option_4",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项五",
+            "value": "option_5",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项六",
+            "value": "option_6",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项七",
+            "value": "option_7",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项八",
+            "value": "option_8",
+          },
+          Object {
+            "disabled": true,
+            "label": "禁用选项",
+            "value": "disabled",
+          },
+        ]
+      }}"
+      value="{{
+        Array [
+          "option_1",
+        ]
+      }}"
+      bind:change="handleMultipleSelect"
+    />
+    <t-dropdown-item
+      defaultValue="{{
+        Array [
+          "option_1",
+          "option_2",
+        ]
+      }}"
+      label="双列多选"
+      multiple="{{true}}"
+      options="{{
+        Array [
+          Object {
+            "disabled": false,
+            "label": "选项一",
+            "value": "option_1",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项二",
+            "value": "option_2",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项三",
+            "value": "option_3",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项四",
+            "value": "option_4",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项五",
+            "value": "option_5",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项六",
+            "value": "option_6",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项七",
+            "value": "option_7",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项八",
+            "value": "option_8",
+          },
+          Object {
+            "disabled": true,
+            "label": "禁用选项",
+            "value": "disabled",
+          },
+          Object {
+            "disabled": true,
+            "label": "禁用选项",
+            "value": "disabled",
+          },
+        ]
+      }}"
+      optionsColumns="2"
+    />
+    <t-dropdown-item
+      defaultValue="{{
+        Array [
+          "option_1",
+          "option_2",
+          "option_3",
+        ]
+      }}"
+      label="三列多选"
+      multiple="{{true}}"
+      options="{{
+        Array [
+          Object {
+            "disabled": false,
+            "label": "选项一",
+            "value": "option_1",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项二",
+            "value": "option_2",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项三",
+            "value": "option_3",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项四",
+            "value": "option_4",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项五",
+            "value": "option_5",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项六",
+            "value": "option_6",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项七",
+            "value": "option_7",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项八",
+            "value": "option_8",
+          },
+          Object {
+            "disabled": false,
+            "label": "选项九",
+            "value": "option_9",
+          },
+          Object {
+            "disabled": true,
+            "label": "禁用选项",
+            "value": "disabled",
+          },
+          Object {
+            "disabled": true,
+            "label": "禁用选项",
+            "value": "disabled",
+          },
+          Object {
+            "disabled": true,
+            "label": "禁用选项",
+            "value": "disabled",
+          },
+        ]
+      }}"
+      optionsColumns="3"
+    />
+  </t-dropdown-menu>
+</multi>
+`;
+
+exports[`DropdownMenu DropdownMenu single demo works fine 1`] = `
+<single>
+  <t-dropdown-menu>
+    <t-dropdown-item
+      options="{{
+        Array [
+          Object {
+            "label": "全部产品",
+            "value": "all",
+          },
+          Object {
+            "label": "最新产品",
+            "value": "new",
+          },
+          Object {
+            "label": "最火产品",
+            "value": "hot",
+          },
+        ]
+      }}"
+      value="all"
+      bind:change="onChange"
+    />
+    <t-dropdown-item
+      defaultValue="default"
+      options="{{
+        Array [
+          Object {
+            "label": "默认排序",
+            "value": "default",
+          },
+          Object {
+            "label": "价格从高到低",
+            "value": "price",
+          },
+        ]
+      }}"
+    />
+  </t-dropdown-menu>
+</single>
+`;
+
+exports[`DropdownMenu DropdownMenu tree demo works fine 1`] = `
+<tree>
+  <t-dropdown-menu>
+    <t-dropdown-item
+      label="树形双列"
+      options="{{
+        Array [
+          Object {
+            "label": "选项一",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "0-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "0-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "0-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "0-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "0-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "0-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "0-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "0-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "0-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "0-9",
+              },
+            ],
+            "value": "0",
+          },
+          Object {
+            "label": "选项二",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "1-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "1-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "1-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "1-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "1-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "1-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "1-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "1-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "1-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "1-9",
+              },
+            ],
+            "value": "1",
+          },
+          Object {
+            "label": "选项三",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "2-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "2-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "2-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "2-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "2-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "2-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "2-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "2-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "2-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "2-9",
+              },
+            ],
+            "value": "2",
+          },
+          Object {
+            "label": "选项四",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "3-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "3-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "3-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "3-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "3-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "3-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "3-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "3-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "3-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "3-9",
+              },
+            ],
+            "value": "3",
+          },
+          Object {
+            "label": "选项五",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "4-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "4-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "4-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "4-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "4-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "4-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "4-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "4-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "4-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "4-9",
+              },
+            ],
+            "value": "4",
+          },
+          Object {
+            "label": "选项六",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "5-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "5-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "5-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "5-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "5-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "5-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "5-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "5-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "5-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "5-9",
+              },
+            ],
+            "value": "5",
+          },
+          Object {
+            "label": "选项七",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "6-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "6-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "6-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "6-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "6-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "6-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "6-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "6-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "6-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "6-9",
+              },
+            ],
+            "value": "6",
+          },
+          Object {
+            "label": "选项八",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "7-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "7-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "7-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "7-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "7-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "7-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "7-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "7-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "7-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "7-9",
+              },
+            ],
+            "value": "7",
+          },
+          Object {
+            "label": "选项九",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "8-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "8-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "8-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "8-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "8-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "8-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "8-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "8-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "8-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "8-9",
+              },
+            ],
+            "value": "8",
+          },
+          Object {
+            "label": "选项十",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "value": "9-0",
+              },
+              Object {
+                "label": "选项二",
+                "value": "9-1",
+              },
+              Object {
+                "label": "选项三",
+                "value": "9-2",
+              },
+              Object {
+                "label": "选项四",
+                "value": "9-3",
+              },
+              Object {
+                "label": "选项五",
+                "value": "9-4",
+              },
+              Object {
+                "label": "选项六",
+                "value": "9-5",
+              },
+              Object {
+                "label": "选项七",
+                "value": "9-6",
+              },
+              Object {
+                "label": "选项八",
+                "value": "9-7",
+              },
+              Object {
+                "label": "选项九",
+                "value": "9-8",
+              },
+              Object {
+                "label": "选项十",
+                "value": "9-9",
+              },
+            ],
+            "value": "9",
+          },
+        ]
+      }}"
+      optionsLayout="tree"
+      value="{{
+        Array [
+          "0",
+          "0-0",
+        ]
+      }}"
+      bind:change="handleTreeSelect"
+    />
+    <t-dropdown-item
+      defaultValue="{{
+        Array [
+          "0",
+          "0-0",
+          Array [
+            "0-0-0",
+            "0-0-1",
+          ],
+        ]
+      }}"
+      label="选项最多八字树形三列"
+      multiple="{{true}}"
+      options="{{
+        Array [
+          Object {
+            "label": "选项一",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-0-9",
+                  },
+                ],
+                "value": "0-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-1-9",
+                  },
+                ],
+                "value": "0-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-2-9",
+                  },
+                ],
+                "value": "0-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-3-9",
+                  },
+                ],
+                "value": "0-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-4-9",
+                  },
+                ],
+                "value": "0-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-5-9",
+                  },
+                ],
+                "value": "0-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-6-9",
+                  },
+                ],
+                "value": "0-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-7-9",
+                  },
+                ],
+                "value": "0-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-8-9",
+                  },
+                ],
+                "value": "0-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "0-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "0-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "0-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "0-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "0-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "0-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "0-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "0-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "0-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "0-9-9",
+                  },
+                ],
+                "value": "0-9",
+              },
+            ],
+            "value": "0",
+          },
+          Object {
+            "label": "选项二",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-0-9",
+                  },
+                ],
+                "value": "1-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-1-9",
+                  },
+                ],
+                "value": "1-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-2-9",
+                  },
+                ],
+                "value": "1-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-3-9",
+                  },
+                ],
+                "value": "1-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-4-9",
+                  },
+                ],
+                "value": "1-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-5-9",
+                  },
+                ],
+                "value": "1-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-6-9",
+                  },
+                ],
+                "value": "1-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-7-9",
+                  },
+                ],
+                "value": "1-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-8-9",
+                  },
+                ],
+                "value": "1-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "1-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "1-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "1-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "1-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "1-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "1-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "1-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "1-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "1-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "1-9-9",
+                  },
+                ],
+                "value": "1-9",
+              },
+            ],
+            "value": "1",
+          },
+          Object {
+            "label": "选项三",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-0-9",
+                  },
+                ],
+                "value": "2-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-1-9",
+                  },
+                ],
+                "value": "2-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-2-9",
+                  },
+                ],
+                "value": "2-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-3-9",
+                  },
+                ],
+                "value": "2-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-4-9",
+                  },
+                ],
+                "value": "2-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-5-9",
+                  },
+                ],
+                "value": "2-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-6-9",
+                  },
+                ],
+                "value": "2-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-7-9",
+                  },
+                ],
+                "value": "2-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-8-9",
+                  },
+                ],
+                "value": "2-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "2-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "2-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "2-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "2-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "2-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "2-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "2-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "2-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "2-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "2-9-9",
+                  },
+                ],
+                "value": "2-9",
+              },
+            ],
+            "value": "2",
+          },
+          Object {
+            "label": "选项四",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-0-9",
+                  },
+                ],
+                "value": "3-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-1-9",
+                  },
+                ],
+                "value": "3-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-2-9",
+                  },
+                ],
+                "value": "3-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-3-9",
+                  },
+                ],
+                "value": "3-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-4-9",
+                  },
+                ],
+                "value": "3-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-5-9",
+                  },
+                ],
+                "value": "3-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-6-9",
+                  },
+                ],
+                "value": "3-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-7-9",
+                  },
+                ],
+                "value": "3-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-8-9",
+                  },
+                ],
+                "value": "3-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "3-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "3-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "3-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "3-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "3-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "3-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "3-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "3-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "3-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "3-9-9",
+                  },
+                ],
+                "value": "3-9",
+              },
+            ],
+            "value": "3",
+          },
+          Object {
+            "label": "选项五",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-0-9",
+                  },
+                ],
+                "value": "4-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-1-9",
+                  },
+                ],
+                "value": "4-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-2-9",
+                  },
+                ],
+                "value": "4-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-3-9",
+                  },
+                ],
+                "value": "4-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-4-9",
+                  },
+                ],
+                "value": "4-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-5-9",
+                  },
+                ],
+                "value": "4-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-6-9",
+                  },
+                ],
+                "value": "4-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-7-9",
+                  },
+                ],
+                "value": "4-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-8-9",
+                  },
+                ],
+                "value": "4-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "4-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "4-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "4-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "4-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "4-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "4-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "4-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "4-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "4-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "4-9-9",
+                  },
+                ],
+                "value": "4-9",
+              },
+            ],
+            "value": "4",
+          },
+          Object {
+            "label": "选项六",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-0-9",
+                  },
+                ],
+                "value": "5-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-1-9",
+                  },
+                ],
+                "value": "5-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-2-9",
+                  },
+                ],
+                "value": "5-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-3-9",
+                  },
+                ],
+                "value": "5-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-4-9",
+                  },
+                ],
+                "value": "5-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-5-9",
+                  },
+                ],
+                "value": "5-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-6-9",
+                  },
+                ],
+                "value": "5-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-7-9",
+                  },
+                ],
+                "value": "5-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-8-9",
+                  },
+                ],
+                "value": "5-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "5-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "5-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "5-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "5-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "5-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "5-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "5-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "5-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "5-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "5-9-9",
+                  },
+                ],
+                "value": "5-9",
+              },
+            ],
+            "value": "5",
+          },
+          Object {
+            "label": "选项七",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-0-9",
+                  },
+                ],
+                "value": "6-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-1-9",
+                  },
+                ],
+                "value": "6-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-2-9",
+                  },
+                ],
+                "value": "6-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-3-9",
+                  },
+                ],
+                "value": "6-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-4-9",
+                  },
+                ],
+                "value": "6-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-5-9",
+                  },
+                ],
+                "value": "6-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-6-9",
+                  },
+                ],
+                "value": "6-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-7-9",
+                  },
+                ],
+                "value": "6-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-8-9",
+                  },
+                ],
+                "value": "6-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "6-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "6-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "6-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "6-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "6-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "6-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "6-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "6-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "6-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "6-9-9",
+                  },
+                ],
+                "value": "6-9",
+              },
+            ],
+            "value": "6",
+          },
+          Object {
+            "label": "选项八",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-0-9",
+                  },
+                ],
+                "value": "7-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-1-9",
+                  },
+                ],
+                "value": "7-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-2-9",
+                  },
+                ],
+                "value": "7-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-3-9",
+                  },
+                ],
+                "value": "7-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-4-9",
+                  },
+                ],
+                "value": "7-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-5-9",
+                  },
+                ],
+                "value": "7-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-6-9",
+                  },
+                ],
+                "value": "7-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-7-9",
+                  },
+                ],
+                "value": "7-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-8-9",
+                  },
+                ],
+                "value": "7-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "7-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "7-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "7-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "7-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "7-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "7-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "7-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "7-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "7-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "7-9-9",
+                  },
+                ],
+                "value": "7-9",
+              },
+            ],
+            "value": "7",
+          },
+          Object {
+            "label": "选项九",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-0-9",
+                  },
+                ],
+                "value": "8-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-1-9",
+                  },
+                ],
+                "value": "8-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-2-9",
+                  },
+                ],
+                "value": "8-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-3-9",
+                  },
+                ],
+                "value": "8-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-4-9",
+                  },
+                ],
+                "value": "8-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-5-9",
+                  },
+                ],
+                "value": "8-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-6-9",
+                  },
+                ],
+                "value": "8-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-7-9",
+                  },
+                ],
+                "value": "8-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-8-9",
+                  },
+                ],
+                "value": "8-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "8-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "8-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "8-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "8-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "8-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "8-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "8-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "8-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "8-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "8-9-9",
+                  },
+                ],
+                "value": "8-9",
+              },
+            ],
+            "value": "8",
+          },
+          Object {
+            "label": "选项十",
+            "options": Array [
+              Object {
+                "label": "选项一",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-0-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-0-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-0-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-0-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-0-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-0-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-0-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-0-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-0-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-0-9",
+                  },
+                ],
+                "value": "9-0",
+              },
+              Object {
+                "label": "选项二",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-1-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-1-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-1-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-1-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-1-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-1-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-1-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-1-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-1-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-1-9",
+                  },
+                ],
+                "value": "9-1",
+              },
+              Object {
+                "label": "选项三",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-2-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-2-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-2-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-2-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-2-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-2-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-2-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-2-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-2-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-2-9",
+                  },
+                ],
+                "value": "9-2",
+              },
+              Object {
+                "label": "选项四",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-3-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-3-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-3-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-3-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-3-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-3-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-3-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-3-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-3-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-3-9",
+                  },
+                ],
+                "value": "9-3",
+              },
+              Object {
+                "label": "选项五",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-4-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-4-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-4-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-4-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-4-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-4-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-4-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-4-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-4-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-4-9",
+                  },
+                ],
+                "value": "9-4",
+              },
+              Object {
+                "label": "选项六",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-5-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-5-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-5-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-5-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-5-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-5-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-5-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-5-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-5-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-5-9",
+                  },
+                ],
+                "value": "9-5",
+              },
+              Object {
+                "label": "选项七",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-6-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-6-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-6-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-6-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-6-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-6-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-6-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-6-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-6-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-6-9",
+                  },
+                ],
+                "value": "9-6",
+              },
+              Object {
+                "label": "选项八",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-7-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-7-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-7-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-7-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-7-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-7-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-7-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-7-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-7-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-7-9",
+                  },
+                ],
+                "value": "9-7",
+              },
+              Object {
+                "label": "选项九",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-8-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-8-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-8-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-8-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-8-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-8-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-8-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-8-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-8-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-8-9",
+                  },
+                ],
+                "value": "9-8",
+              },
+              Object {
+                "label": "选项十",
+                "options": Array [
+                  Object {
+                    "label": "选项一",
+                    "value": "9-9-0",
+                  },
+                  Object {
+                    "label": "选项二",
+                    "value": "9-9-1",
+                  },
+                  Object {
+                    "label": "选项三",
+                    "value": "9-9-2",
+                  },
+                  Object {
+                    "label": "选项四",
+                    "value": "9-9-3",
+                  },
+                  Object {
+                    "label": "选项五",
+                    "value": "9-9-4",
+                  },
+                  Object {
+                    "label": "选项六",
+                    "value": "9-9-5",
+                  },
+                  Object {
+                    "label": "选项七",
+                    "value": "9-9-6",
+                  },
+                  Object {
+                    "label": "选项八",
+                    "value": "9-9-7",
+                  },
+                  Object {
+                    "label": "选项九",
+                    "value": "9-9-8",
+                  },
+                  Object {
+                    "label": "选项十",
+                    "value": "9-9-9",
+                  },
+                ],
+                "value": "9-9",
+              },
+            ],
+            "value": "9",
+          },
+        ]
+      }}"
+      optionsLayout="tree"
+    />
+  </t-dropdown-menu>
+</tree>
+`;
diff --git a/src/dropdown-menu/dropdown-menu.wxml b/src/dropdown-menu/dropdown-menu.wxml
index 46b48fbe1..eac2ed672 100644
--- a/src/dropdown-menu/dropdown-menu.wxml
+++ b/src/dropdown-menu/dropdown-menu.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{ classPrefix }} {{prefix}}-class" id="t-bar">
+<view style="{{_._style([style, customStyle])}}" class="{{ classPrefix }} class {{prefix}}-class" id="t-bar">
   <view
     wx:for="{{menus}}"
     wx:key="index"
diff --git a/src/empty/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/empty/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..c4da1269d
--- /dev/null
+++ b/src/empty/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty Empty base demo works fine 1`] = `
+<base>
+  <t-empty
+    description="描述文字"
+    icon="info-circle-filled"
+  />
+</base>
+`;
+
+exports[`Empty Empty buttonEmpty demo works fine 1`] = `
+<buttonEmpty>
+  <t-empty
+    description="描述文字"
+    icon="info-circle-filled"
+  >
+    <t-button
+      size="large"
+      slot="action"
+      theme="primary"
+    >
+      操作按钮
+    </t-button>
+  </t-empty>
+</buttonEmpty>
+`;
+
+exports[`Empty Empty imageEmpty demo works fine 1`] = `
+<imageEmpty>
+  <t-empty
+    description="描述文字"
+    image="https://tdesign.gtimg.com/miniprogram/images/empty1.png"
+    tClass="empty-cls"
+    tClassImage="t-empty__image"
+  />
+</imageEmpty>
+`;
diff --git a/src/empty/empty.wxml b/src/empty/empty.wxml
index 5d3a80938..875007238 100644
--- a/src/empty/empty.wxml
+++ b/src/empty/empty.wxml
@@ -2,7 +2,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 <wxs src="./empty.wxs" module="utils" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{prefix}}-class {{classPrefix}}">
+<view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{classPrefix}}">
   <view aria-hidden="true" class="{{classPrefix}}__thumb">
     <t-image wx:if="{{image}}" t-class="{{prefix}}-class-image" src="{{image}}" mode="aspectFit" />
     <template
diff --git a/src/fab/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/fab/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..71a8ffadf
--- /dev/null
+++ b/src/fab/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fab Fab advance demo works fine 1`] = `
+<advance>
+  <t-fab
+    buttonProps="{{
+      Object {
+        "icon": "call",
+        "openType": "getPhoneNumber",
+      }
+    }}"
+    icon="add"
+    text="获取手机号"
+    bind:click="handleClick"
+  />
+</advance>
+`;
+
+exports[`Fab Fab base demo works fine 1`] = `
+<base>
+  <t-fab
+    ariaLabel="增加"
+    icon="add"
+    bind:click="handleClick"
+  />
+</base>
+`;
diff --git a/src/footer/__test__/__snapshots__/index.test.js.snap b/src/footer/__test__/__snapshots__/index.test.js.snap
index 7bb32e2df..24c3c66df 100644
--- a/src/footer/__test__/__snapshots__/index.test.js.snap
+++ b/src/footer/__test__/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`Footer :base 1`] = `
 <main>
   <main>
     <wx-view
-      class="t-footer"
+      class="t-footer class t-class"
       style=""
     >
       <wx-view
diff --git a/src/footer/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/footer/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..c43514740
--- /dev/null
+++ b/src/footer/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer Footer base demo works fine 1`] = `
+<base>
+  <t-footer
+    copyright="Copyright © 2021-2031 TD.All Rights Reserved."
+    theme="text"
+  />
+</base>
+`;
+
+exports[`Footer Footer link demo works fine 1`] = `
+<link>
+  <wx-view
+    class="footer-example"
+  >
+    <t-footer
+      copyright="Copyright © 2021-2031 TD.All Rights Reserved."
+      textLinkList="{{
+        Array [
+          Object {
+            "name": "底部链接",
+            "openType": "navigate",
+            "url": "/pages/index",
+          },
+        ]
+      }}"
+      theme="text"
+    />
+  </wx-view>
+  <wx-view
+    class="footer-example"
+  >
+    <t-footer
+      copyright="Copyright © 2021-2031 TD.All Rights Reserved."
+      textLinkList="{{
+        Array [
+          Object {
+            "name": "底部链接",
+            "openType": "navigate",
+            "url": "/pages/index",
+          },
+          Object {
+            "name": "底部链接",
+            "openType": "navigateBack",
+            "url": "",
+          },
+        ]
+      }}"
+      theme="text"
+    />
+  </wx-view>
+</link>
+`;
+
+exports[`Footer Footer logo demo works fine 1`] = `
+<logo>
+  <wx-view
+    class="footer-example"
+  >
+    <t-footer
+      logo="{{
+        Object {
+          "icon": "https://tdesign.gtimg.com/miniprogram/images/logo2.png",
+          "title": "品牌名称",
+        }
+      }}"
+      theme="logo"
+    />
+  </wx-view>
+  <wx-view
+    class="footer-example"
+  >
+    <t-footer
+      logo="{{
+        Object {
+          "url": "https://tdesign.gtimg.com/miniprogram/images/logo1.png",
+        }
+      }}"
+      theme="logo"
+    />
+  </wx-view>
+</logo>
+`;
diff --git a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..24c3c66df
--- /dev/null
+++ b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer :base 1`] = `
+<main>
+  <main>
+    <wx-view
+      class="t-footer class t-class"
+      style=""
+    >
+      <wx-view
+        class="t-footer__copyright-info"
+      >
+        
+      </wx-view>
+    </wx-view>
+  </main>
+</main>
+`;
diff --git a/src/footer/footer.ts b/src/footer/footer.ts
index e9714e686..820d7ace8 100644
--- a/src/footer/footer.ts
+++ b/src/footer/footer.ts
@@ -7,9 +7,12 @@ const name = `${prefix}-footer`;
 
 @wxComponent()
 export default class Footer extends SuperComponent {
+  externalClasses = [`${prefix}-class`];
+
   properties = props;
 
   data = {
+    prefix,
     classPrefix: name,
   };
 }
diff --git a/src/footer/footer.wxml b/src/footer/footer.wxml
index f809d29a6..56e00b31f 100644
--- a/src/footer/footer.wxml
+++ b/src/footer/footer.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}}">
+<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
   <!-- theme 为 logo -->
   <block wx:if="{{theme === 'logo'}}">
     <view class="{{classPrefix}}__logo">
diff --git a/src/grid-item/grid-item.wxml b/src/grid-item/grid-item.wxml
index 79af83fc4..c919e34b2 100644
--- a/src/grid-item/grid-item.wxml
+++ b/src/grid-item/grid-item.wxml
@@ -7,7 +7,7 @@
 <wxs module="_" src="../common/utils.wxs" />
 
 <view
-  class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} class {{prefix}}-class"
   style="{{_._style([gridItemStyle, style, customStyle])}}"
   hover-class="{{hover ? classPrefix + '--hover':''}}"
   hover-stay-time="{{200}}"
diff --git a/src/grid/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/grid/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..320807661
--- /dev/null
+++ b/src/grid/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,362 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid Grid badge demo works fine 1`] = `
+<badge>
+  <t-grid
+    class="t-grid badge"
+  >
+    <t-grid-item
+      badgeProps="{{
+        Object {
+          "dot": true,
+        }
+      }}"
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      badgeProps="{{
+        Object {
+          "count": 8,
+        }
+      }}"
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      badgeProps="{{
+        Object {
+          "count": 13,
+        }
+      }}"
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      badgeProps="{{
+        Object {
+          "count": "NEW",
+        }
+      }}"
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+  </t-grid>
+</badge>
+`;
+
+exports[`Grid Grid base demo works fine 1`] = `
+<base>
+  <t-grid
+    class="block"
+    column="{{5}}"
+  >
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="最多四字"
+    />
+  </t-grid>
+  <t-grid
+    class="block"
+  >
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="最多五个字"
+    />
+  </t-grid>
+  <t-grid
+    class="block"
+    column="{{3}}"
+  >
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="最多六个文字"
+    />
+  </t-grid>
+</base>
+`;
+
+exports[`Grid Grid border demo works fine 1`] = `
+<border>
+  <wx-view
+    class="block"
+  >
+    <t-grid
+      border="{{
+        Object {
+          "color": "#f6f6f6",
+        }
+      }}"
+      column="{{3}}"
+    >
+      <t-grid-item
+        image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+        text="标题文字"
+      />
+      <t-grid-item
+        image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+        text="标题文字"
+      />
+      <t-grid-item
+        image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+        text="标题文字"
+      />
+    </t-grid>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-grid
+      align="left"
+      border="{{
+        Object {
+          "color": "#f6f6f6",
+        }
+      }}"
+      column="{{2}}"
+    >
+      <t-grid-item
+        description="描述文字"
+        image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+        layout="horizontal"
+        text="标题文字"
+      />
+      <t-grid-item
+        description="描述文字"
+        image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+        layout="horizontal"
+        text="标题最多六字"
+      />
+    </t-grid>
+  </wx-view>
+</border>
+`;
+
+exports[`Grid Grid card demo works fine 1`] = `
+<card>
+  <t-grid
+    class="block"
+    column="{{4}}"
+    theme="card"
+  >
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="最多五个字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="最多五个字"
+    />
+  </t-grid>
+</card>
+`;
+
+exports[`Grid Grid description demo works fine 1`] = `
+<description>
+  <wx-view
+    class="block"
+  >
+    <t-grid
+      column="{{3}}"
+    >
+      <t-grid-item
+        description="描述文字"
+        image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+        text="标题文字"
+      />
+      <t-grid-item
+        description="描述文字"
+        image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+        text="标题文字"
+      />
+      <t-grid-item
+        description="描述文字"
+        image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+        text="标题文字"
+      />
+    </t-grid>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-grid
+      align="left"
+      column="{{2}}"
+    >
+      <t-grid-item
+        description="描述文字"
+        image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+        layout="horizontal"
+        text="标题文字"
+      />
+      <t-grid-item
+        description="描述文字"
+        image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+        layout="horizontal"
+        text="标题文字"
+      />
+    </t-grid>
+  </wx-view>
+</description>
+`;
+
+exports[`Grid Grid icon-grid demo works fine 1`] = `
+<icon-grid>
+  <t-grid
+    class="block"
+  >
+    <t-grid-item
+      icon="share"
+      text="分享"
+    />
+    <t-grid-item
+      icon="star"
+      text="收藏"
+    />
+    <t-grid-item
+      icon="download"
+      text="保存"
+    />
+    <t-grid-item
+      icon="edit-1"
+      text="编辑"
+    />
+  </t-grid>
+</icon-grid>
+`;
+
+exports[`Grid Grid multiple demo works fine 1`] = `
+<multiple>
+  <t-grid
+    class="block"
+    column="{{4}}"
+  >
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="最多五个字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="最多五个字"
+    />
+  </t-grid>
+</multiple>
+`;
+
+exports[`Grid Grid scroll demo works fine 1`] = `
+<scroll>
+  <t-grid
+    class="block"
+    column="{{0}}"
+  >
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="标题文字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+      text="最多五个字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+      text="最多五个字"
+    />
+    <t-grid-item
+      image="https://tdesign.gtimg.com/miniprogram/images/example3.png"
+      text="最多五个字"
+    />
+  </t-grid>
+</scroll>
+`;
diff --git a/src/grid/grid.wxml b/src/grid/grid.wxml
index e463b28b0..d497d7c52 100644
--- a/src/grid/grid.wxml
+++ b/src/grid/grid.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [theme])}} {{prefix}}-class">
+<view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [theme])}} class {{prefix}}-class">
   <view wx:if="{{column > 0}}" class="{{classPrefix}}__content" style="{{ contentStyle }}">
     <slot />
   </view>
diff --git a/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..8dade2ad2
--- /dev/null
+++ b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,3671 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon Icon base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="demo__list"
+  >
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="add-circle"
+        name="add-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        add-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="add-rectangle"
+        name="add-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        add-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="add"
+        name="add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="app"
+        name="app"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        app
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down-rectangle"
+        name="arrow-down-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down"
+        name="arrow-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left"
+        name="arrow-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-right"
+        name="arrow-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up"
+        name="arrow-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="attach"
+        name="attach"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        attach
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="backtop-rectangle"
+        name="backtop-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        backtop-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="backtop"
+        name="backtop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        backtop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="backward"
+        name="backward"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        backward
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="barcode"
+        name="barcode"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        barcode
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="books"
+        name="books"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        books
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="browse-off"
+        name="browse-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        browse-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="browse"
+        name="browse"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        browse
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bulletpoint"
+        name="bulletpoint"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bulletpoint
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calendar"
+        name="calendar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calendar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="call"
+        name="call"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        call
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-down-small"
+        name="caret-down-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-down-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-down"
+        name="caret-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-left-small"
+        name="caret-left-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-left-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-left"
+        name="caret-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-right-small"
+        name="caret-right-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-right-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-right"
+        name="caret-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-up-small"
+        name="caret-up-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-up-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-up"
+        name="caret-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cart"
+        name="cart"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cart
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-bar"
+        name="chart-bar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-bar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-bubble"
+        name="chart-bubble"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-bubble
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-pie"
+        name="chart-pie"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-pie
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart"
+        name="chart"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat"
+        name="chat"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-circle-filled"
+        name="check-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-circle"
+        name="check-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-rectangle-filled"
+        name="check-rectangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-rectangle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-rectangle"
+        name="check-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check"
+        name="check"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down-circle"
+        name="chevron-down-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down-rectangle"
+        name="chevron-down-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down"
+        name="chevron-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-circle"
+        name="chevron-left-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-double"
+        name="chevron-left-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-rectangle"
+        name="chevron-left-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left"
+        name="chevron-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-circle"
+        name="chevron-right-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-double"
+        name="chevron-right-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-rectangle"
+        name="chevron-right-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right"
+        name="chevron-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up-circle"
+        name="chevron-up-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up-rectangle"
+        name="chevron-up-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up"
+        name="chevron-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="circle"
+        name="circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="clear"
+        name="clear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        clear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close-circle-filled"
+        name="close-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close-circle"
+        name="close-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close-rectangle"
+        name="close-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close"
+        name="close"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloud-download"
+        name="cloud-download"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloud-download
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloud-upload"
+        name="cloud-upload"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloud-upload
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloud"
+        name="cloud"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloud
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="code"
+        name="code"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        code
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="control-platform"
+        name="control-platform"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        control-platform
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="creditcard"
+        name="creditcard"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        creditcard
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dashboard"
+        name="dashboard"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dashboard
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="delete"
+        name="delete"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        delete
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="desktop"
+        name="desktop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        desktop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="discount-filled"
+        name="discount-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        discount-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="discount"
+        name="discount"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        discount
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="download"
+        name="download"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        download
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="edit-1"
+        name="edit-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        edit-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="edit"
+        name="edit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        edit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ellipsis"
+        name="ellipsis"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ellipsis
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="enter"
+        name="enter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        enter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="error-circle-filled"
+        name="error-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        error-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="error-circle"
+        name="error-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        error-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="error"
+        name="error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-add"
+        name="file-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-copy"
+        name="file-copy"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-copy
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-excel"
+        name="file-excel"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-excel
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-icon"
+        name="file-icon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-icon
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-image"
+        name="file-image"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-image
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-paste"
+        name="file-paste"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-paste
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-pdf"
+        name="file-pdf"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-pdf
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-powerpoint"
+        name="file-powerpoint"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-powerpoint
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-unknown"
+        name="file-unknown"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-unknown
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-word"
+        name="file-word"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-word
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file"
+        name="file"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter-clear"
+        name="filter-clear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter-clear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter"
+        name="filter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flag"
+        name="flag"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flag
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-add"
+        name="folder-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-open"
+        name="folder-open"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-open
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder"
+        name="folder"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fork"
+        name="fork"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fork
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-horizontal-align-bottom"
+        name="format-horizontal-align-bottom"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-horizontal-align-bottom
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-horizontal-align-center"
+        name="format-horizontal-align-center"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-horizontal-align-center
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-horizontal-align-top"
+        name="format-horizontal-align-top"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-horizontal-align-top
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-vertical-align-center"
+        name="format-vertical-align-center"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-vertical-align-center
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-vertical-align-left"
+        name="format-vertical-align-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-vertical-align-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-vertical-align-right"
+        name="format-vertical-align-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-vertical-align-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="forward"
+        name="forward"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        forward
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fullscreen-exit"
+        name="fullscreen-exit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fullscreen-exit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fullscreen"
+        name="fullscreen"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fullscreen
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gender-female"
+        name="gender-female"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gender-female
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gender-male"
+        name="gender-male"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gender-male
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gift"
+        name="gift"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gift
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="heart-filled"
+        name="heart-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        heart-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="heart"
+        name="heart"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        heart
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="help-circle-filled"
+        name="help-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        help-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="help-circle"
+        name="help-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        help-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="help"
+        name="help"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        help
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="history"
+        name="history"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        history
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="home"
+        name="home"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        home
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hourglass"
+        name="hourglass"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hourglass
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image-error"
+        name="image-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image"
+        name="image"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="info-circle-filled"
+        name="info-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        info-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="info-circle"
+        name="info-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        info-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="internet"
+        name="internet"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        internet
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="jump"
+        name="jump"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        jump
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="laptop"
+        name="laptop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        laptop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="layers"
+        name="layers"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        layers
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="link-unlink"
+        name="link-unlink"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        link-unlink
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="link"
+        name="link"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        link
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="loading"
+        name="loading"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        loading
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location"
+        name="location"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lock-off"
+        name="lock-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lock-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lock-on"
+        name="lock-on"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lock-on
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="login"
+        name="login"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        login
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-android"
+        name="logo-android"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-android
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-apple-filled"
+        name="logo-apple-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-apple-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-apple"
+        name="logo-apple"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-apple
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-chrome-filled"
+        name="logo-chrome-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-chrome-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-chrome"
+        name="logo-chrome"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-chrome
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-codepen"
+        name="logo-codepen"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-codepen
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-github-filled"
+        name="logo-github-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-github-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-github"
+        name="logo-github"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-github
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-ie-filled"
+        name="logo-ie-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-ie-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-ie"
+        name="logo-ie"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-ie
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-qq"
+        name="logo-qq"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-qq
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-wechat"
+        name="logo-wechat"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-wechat
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-wecom"
+        name="logo-wecom"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-wecom
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-windows-filled"
+        name="logo-windows-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-windows-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-windows"
+        name="logo-windows"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-windows
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logout"
+        name="logout"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logout
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mail"
+        name="mail"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mail
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="menu-fold"
+        name="menu-fold"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        menu-fold
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="menu-unfold"
+        name="menu-unfold"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        menu-unfold
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-circle-filled"
+        name="minus-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-circle"
+        name="minus-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-rectangle"
+        name="minus-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mirror"
+        name="mirror"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mirror
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile-vibrate"
+        name="mobile-vibrate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile-vibrate
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile"
+        name="mobile"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="money-circle"
+        name="money-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        money-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="more"
+        name="more"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        more
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="move"
+        name="move"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        move
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="next"
+        name="next"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        next
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="notification-filled"
+        name="notification-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        notification-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="notification"
+        name="notification"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        notification
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="order-adjustment-column"
+        name="order-adjustment-column"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        order-adjustment-column
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="order-ascending"
+        name="order-ascending"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        order-ascending
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="order-descending"
+        name="order-descending"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        order-descending
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="page-first"
+        name="page-first"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        page-first
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="page-last"
+        name="page-last"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        page-last
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pause-circle-filled"
+        name="pause-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pause-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="photo"
+        name="photo"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        photo
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pin-filled"
+        name="pin-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pin-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pin"
+        name="pin"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pin
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-circle-filled"
+        name="play-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-circle-stroke"
+        name="play-circle-stroke"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-circle-stroke
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-circle"
+        name="play-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play"
+        name="play"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="poweroff"
+        name="poweroff"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        poweroff
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="precise-monitor"
+        name="precise-monitor"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        precise-monitor
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="previous"
+        name="previous"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        previous
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="print"
+        name="print"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        print
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="qrcode"
+        name="qrcode"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        qrcode
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="queue"
+        name="queue"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        queue
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rectangle"
+        name="rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="refresh"
+        name="refresh"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        refresh
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="relativity"
+        name="relativity"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        relativity
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="remove"
+        name="remove"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        remove
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rollback"
+        name="rollback"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rollback
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rollfront"
+        name="rollfront"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rollfront
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="root-list"
+        name="root-list"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        root-list
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rotation"
+        name="rotation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rotation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="round"
+        name="round"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        round
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="save"
+        name="save"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        save
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="scan"
+        name="scan"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        scan
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="search"
+        name="search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="secured"
+        name="secured"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        secured
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="server"
+        name="server"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        server
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="service"
+        name="service"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        service
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="setting"
+        name="setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="share"
+        name="share"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        share
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shop"
+        name="shop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="slash"
+        name="slash"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        slash
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sound"
+        name="sound"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sound
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="star-filled"
+        name="star-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        star-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="star"
+        name="star"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        star
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="stop-circle-1"
+        name="stop-circle-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        stop-circle-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="stop-circle-filled"
+        name="stop-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        stop-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="stop-circle"
+        name="stop-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        stop-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="stop"
+        name="stop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        stop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="swap-left"
+        name="swap-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        swap-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="swap-right"
+        name="swap-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        swap-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="swap"
+        name="swap"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        swap
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="thumb-down"
+        name="thumb-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        thumb-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="thumb-up"
+        name="thumb-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        thumb-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="time-filled"
+        name="time-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        time-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="time"
+        name="time"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        time
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="tips"
+        name="tips"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        tips
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="tools"
+        name="tools"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        tools
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="unfold-less"
+        name="unfold-less"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        unfold-less
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="unfold-more"
+        name="unfold-more"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        unfold-more
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="upload"
+        name="upload"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        upload
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="usb"
+        name="usb"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        usb
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="user-add"
+        name="user-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        user-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="user-avatar"
+        name="user-avatar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        user-avatar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="user-circle"
+        name="user-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        user-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="user-clear"
+        name="user-clear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        user-clear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="user-talk"
+        name="user-talk"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        user-talk
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="user"
+        name="user"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        user
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="usergroup-add"
+        name="usergroup-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        usergroup-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="usergroup-clear"
+        name="usergroup-clear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        usergroup-clear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="usergroup"
+        name="usergroup"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        usergroup
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="video"
+        name="video"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        video
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="view-column"
+        name="view-column"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        view-column
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="view-list"
+        name="view-list"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        view-list
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="view-module"
+        name="view-module"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        view-module
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="wallet"
+        name="wallet"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        wallet
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="wifi"
+        name="wifi"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        wifi
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="zoom-in"
+        name="zoom-in"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        zoom-in
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="zoom-out"
+        name="zoom-out"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        zoom-out
+      </wx-view>
+    </wx-view>
+  </wx-view>
+</base>
+`;
+
+exports[`Icon Icon custom demo works fine 1`] = `
+<custom>
+  <wx-view
+    class="demo__list"
+  >
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="a-0"
+        data-type="prefix"
+        name="a-0"
+        prefix="icon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        a-0
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="a-1h"
+        data-type="prefix"
+        name="a-1h"
+        prefix="icon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        a-1h
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="a-2h"
+        data-type="prefix"
+        name="a-2h"
+        prefix="icon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        a-2h
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="a-3h"
+        data-type="prefix"
+        name="a-3h"
+        prefix="icon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        a-3h
+      </wx-view>
+    </wx-view>
+  </wx-view>
+</custom>
+`;
+
+exports[`Icon Icon iconImage demo works fine 1`] = `
+<iconImage>
+  <wx-view
+    class="demo__list"
+  >
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="https://tdesign.gtimg.com/miniprogram/images/icon1.png"
+        name="https://tdesign.gtimg.com/miniprogram/images/icon1.png"
+        size="24"
+        bind:click="onIconTap"
+      />
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="https://tdesign.gtimg.com/miniprogram/images/icon2.png"
+        name="https://tdesign.gtimg.com/miniprogram/images/icon2.png"
+        size="24"
+        bind:click="onIconTap"
+      />
+    </wx-view>
+  </wx-view>
+</iconImage>
+`;
diff --git a/src/icon/icon.ts b/src/icon/icon.ts
index cf7d13417..71087981f 100644
--- a/src/icon/icon.ts
+++ b/src/icon/icon.ts
@@ -8,7 +8,7 @@ const name = `${prefix}-icon`;
 
 @wxComponent()
 export default class Icon extends SuperComponent {
-  externalClasses = ['class', `${prefix}-class`];
+  externalClasses = [`${prefix}-class`];
 
   properties = props;
 
diff --git a/src/image-viewer/__test__/__snapshots__/index.test.js.snap b/src/image-viewer/__test__/__snapshots__/index.test.js.snap
index 57cc26655..57c1ce502 100644
--- a/src/image-viewer/__test__/__snapshots__/index.test.js.snap
+++ b/src/image-viewer/__test__/__snapshots__/index.test.js.snap
@@ -9,7 +9,7 @@ exports[`image-viewer :base 1`] = `
 >
   <wx-view
     ariaHidden="{{false}}"
-    class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
     style=""
   >
     <t-loading
@@ -79,7 +79,7 @@ exports[`image-viewer :base 2`] = `
 >
   <wx-view
     ariaHidden="{{false}}"
-    class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
     style=""
   >
     <t-loading
@@ -149,7 +149,7 @@ exports[`image-viewer :base 3`] = `
 >
   <wx-view
     ariaHidden="{{false}}"
-    class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
     style=""
   >
     <t-loading
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..e737bf1af
--- /dev/null
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageViewer ImageViewer base demo works fine 1`] = `
+<base>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="clickHandle"
+  >
+    基础图片预览
+  </t-button>
+  <t-toast
+    id="t-toast"
+  />
+  <t-image-viewer
+    closeBtn="{{false}}"
+    deleteBtn="{{false}}"
+    images="{{Array []}}"
+    showIndex="{{false}}"
+    visible="{{false}}"
+    bind:change="onChange"
+    bind:close="onClose"
+    bind:delete="onDelete"
+  />
+</base>
+`;
+
+exports[`ImageViewer ImageViewer delete demo works fine 1`] = `
+<delete>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="clickHandle"
+  >
+    带操作图片预览
+  </t-button>
+  <t-toast
+    id="t-toast"
+  />
+  <t-image-viewer
+    closeBtn="{{false}}"
+    deleteBtn="{{false}}"
+    images="{{Array []}}"
+    showIndex="{{false}}"
+    visible="{{false}}"
+    bind:change="onChange"
+    bind:close="onClose"
+    bind:delete="onDelete"
+  />
+</delete>
+`;
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..57c1ce502
--- /dev/null
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`image-viewer :base 1`] = `
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
+>
+  <wx-view
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
+  >
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
+    >
+      <wx-view
+        class="class t-class"
+        style="width: 44rpx; height: 44rpx;"
+      >
+        <wx-view
+          class="t-loading t-loading--horizontal"
+          style=""
+        >
+          <wx-view
+            ariaLabel="加载中"
+            ariaRole="img"
+            class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+            style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+          >
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+            />
+          </wx-view>
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            class="t-loading__text t-loading__text--horizontal t-class-text"
+          />
+        </wx-view>
+      </wx-view>
+    </t-loading>
+  </wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
+`;
+
+exports[`image-viewer :base 2`] = `
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
+>
+  <wx-view
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
+  >
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
+    >
+      <wx-view
+        class="class t-class"
+        style="width: 44rpx; height: 44rpx;"
+      >
+        <wx-view
+          class="t-loading t-loading--horizontal"
+          style=""
+        >
+          <wx-view
+            ariaLabel="加载中"
+            ariaRole="img"
+            class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+            style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+          >
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+            />
+          </wx-view>
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            class="t-loading__text t-loading__text--horizontal t-class-text"
+          />
+        </wx-view>
+      </wx-view>
+    </t-loading>
+  </wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
+`;
+
+exports[`image-viewer :base 3`] = `
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
+>
+  <wx-view
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
+  >
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
+    >
+      <wx-view
+        class="class t-class"
+        style="width: 44rpx; height: 44rpx;"
+      >
+        <wx-view
+          class="t-loading t-loading--horizontal"
+          style=""
+        >
+          <wx-view
+            ariaLabel="加载中"
+            ariaRole="img"
+            class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+            style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+          >
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+            />
+            <wx-view
+              class="t-loading__dot"
+              style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+            />
+          </wx-view>
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            class="t-loading__text t-loading__text--horizontal t-class-text"
+          />
+        </wx-view>
+      </wx-view>
+    </t-loading>
+  </wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
+`;
diff --git a/src/image-viewer/image-viewer.wxml b/src/image-viewer/image-viewer.wxml
index 217d75ffe..c8133fa9e 100644
--- a/src/image-viewer/image-viewer.wxml
+++ b/src/image-viewer/image-viewer.wxml
@@ -4,7 +4,7 @@
 <view
   wx:if="{{visible}}"
   id="{{classPrefix}}"
-  class="{{classPrefix}} {{prefix}}-class"
+  class="{{classPrefix}} class {{prefix}}-class"
   style="{{_._style([style, customStyle])}}"
 >
   <view
diff --git a/src/image/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/image/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..7bbd75ec6
--- /dev/null
+++ b/src/image/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,210 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image Image base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="tr"
+  >
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        裁切
+      </wx-view>
+      <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
+        height="72"
+        mode="aspectFill"
+        src="https://tdesign.gtimg.com/miniprogram/images/image1.jpeg"
+        width="72"
+      />
+    </wx-view>
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        适应高
+      </wx-view>
+      <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
+        height="72"
+        mode="heightFix"
+        src="https://tdesign.gtimg.com/miniprogram/images/image1.jpeg"
+        width="72"
+      />
+    </wx-view>
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        拉伸
+      </wx-view>
+      <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
+        height="72"
+        src="https://tdesign.gtimg.com/miniprogram/images/image1.jpeg"
+        width="72"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="tr"
+  >
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        方形
+      </wx-view>
+      <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
+        height="72"
+        mode="aspectFill"
+        src="https://tdesign.gtimg.com/miniprogram/images/image1.jpeg"
+        width="72"
+      />
+    </wx-view>
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        圆角方形
+      </wx-view>
+      <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
+        height="72"
+        shape="round"
+        src="https://tdesign.gtimg.com/miniprogram/images/image1.jpeg"
+        width="72"
+      />
+    </wx-view>
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        圆形
+      </wx-view>
+      <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
+        height="72"
+        shape="circle"
+        src="https://tdesign.gtimg.com/miniprogram/images/image1.jpeg"
+        width="72"
+      />
+    </wx-view>
+  </wx-view>
+</base>
+`;
+
+exports[`Image Image size demo works fine 1`] = `
+<size>
+  <t-image
+    mode="aspectFill"
+    shape="round"
+    src="https://tdesign.gtimg.com/miniprogram/images/image1.jpeg"
+    tClass="size-l"
+  />
+</size>
+`;
+
+exports[`Image Image status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="tr"
+  >
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        加载默认提示
+      </wx-view>
+      <t-image
+        height="72"
+        id="loading-img"
+        shape="round"
+        width="72"
+      />
+    </wx-view>
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        加载自定义提示
+      </wx-view>
+      <t-image
+        height="72"
+        id="loading-img-custom"
+        loading=""
+        shape="round"
+        width="72"
+      >
+        <t-loading
+          loading="{{true}}"
+          size="40rpx"
+          slot="loading"
+          theme="circular"
+        />
+      </t-image>
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="tr"
+  >
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        失败默认提示
+      </wx-view>
+      <t-image
+        height="72"
+        id="loading-img"
+        shape="round"
+        src=""
+        width="72"
+      />
+    </wx-view>
+    <wx-view
+      class="col"
+    >
+      <wx-view
+        class="text"
+      >
+        失败自定义提示
+      </wx-view>
+      <t-image
+        error=""
+        height="72"
+        shape="round"
+        src=""
+        width="72"
+      >
+        <wx-text
+          class="error-text"
+          slot="error"
+        >
+          加载失败
+        </wx-text>
+      </t-image>
+    </wx-view>
+  </wx-view>
+</status>
+`;
diff --git a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..f89a21495
--- /dev/null
+++ b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`image :base 1`] = `
+<main>
+  <t-image>
+    <wx-view
+      ariaHidden="{{false}}"
+      class="t-class t-image t-image__mask t-image--failed t-image--shape-square"
+      style=""
+    >
+      <wx-view
+        class="t-class-load"
+        style="font-size: 44rpx"
+      >
+        <t-icon>
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="加载失败"
+            ariaRole="img"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+    </wx-view>
+    <wx-image
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-class t-image t-image--shape-square"
+      hidden="{{true}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="scaleToFill"
+      showMenuByLongpress="{{false}}"
+      src=""
+      style=""
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
+</main>
+`;
+
+exports[`image :success 1`] = `
+<main>
+  <t-image
+    id="root"
+    bind:load="handleLoad"
+  >
+    <wx-image
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      class="t-class t-image t-image--shape-square"
+      hidden="{{false}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="heightFix"
+      showMenuByLongpress="{{false}}"
+      src="https://www.tencent.com/img/index/menu_logo.png"
+      style="height: 0px; width: 0.00px;"
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
+</main>
+`;
diff --git a/src/image/image.wxml b/src/image/image.wxml
index 4d0dbfd4a..0f60ede20 100644
--- a/src/image/image.wxml
+++ b/src/image/image.wxml
@@ -4,7 +4,7 @@
 <view
   wx:if="{{isLoading}}"
   style="{{_._style([innerStyle, style, customStyle])}}"
-  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
+  class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
   aria-hidden="{{ariaHidden}}"
 >
   <t-loading
diff --git a/src/indexes-anchor/indexes-anchor.wxml b/src/indexes-anchor/indexes-anchor.wxml
index 3d81f52f4..bbe6d8ea4 100644
--- a/src/indexes-anchor/indexes-anchor.wxml
+++ b/src/indexes-anchor/indexes-anchor.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view class="{{classPrefix}} {{prefix}}-class" style="{{_._style([style, customStyle])}}">
+<view class="{{classPrefix}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}">
   <view class="{{_.cls(classPrefix + '__wrapper', [['sticky', sticky], ['active', active]])}}" style="{{anchorStyle}}">
     <view class="{{classPrefix}}__slot">
       <slot />
diff --git a/src/indexes/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/indexes/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..5913a473c
--- /dev/null
+++ b/src/indexes/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,655 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Indexes Indexes base demo works fine 1`] = `
+<base>
+  <t-indexes
+    indexList="{{Array []}}"
+    bind:select="onSelect"
+  >
+    <t-indexes-anchor
+      index="A"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="阿坝"
+      />
+      <t-cell
+        ariaRole="button"
+        title="阿拉善"
+      />
+      <t-cell
+        ariaRole="button"
+        title="阿里"
+      />
+      <t-cell
+        ariaRole="button"
+        title="安康"
+      />
+      <t-cell
+        ariaRole="button"
+        title="安庆"
+      />
+      <t-cell
+        ariaRole="button"
+        title="鞍山"
+      />
+      <t-cell
+        ariaRole="button"
+        title="安顺"
+      />
+      <t-cell
+        ariaRole="button"
+        title="安阳"
+      />
+      <t-cell
+        ariaRole="button"
+        title="澳门"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="B"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="北京"
+      />
+      <t-cell
+        ariaRole="button"
+        title="白银"
+      />
+      <t-cell
+        ariaRole="button"
+        title="保定"
+      />
+      <t-cell
+        ariaRole="button"
+        title="宝鸡"
+      />
+      <t-cell
+        ariaRole="button"
+        title="保山"
+      />
+      <t-cell
+        ariaRole="button"
+        title="包头"
+      />
+      <t-cell
+        ariaRole="button"
+        title="巴中"
+      />
+      <t-cell
+        ariaRole="button"
+        title="北海"
+      />
+      <t-cell
+        ariaRole="button"
+        title="蚌埠"
+      />
+      <t-cell
+        ariaRole="button"
+        title="本溪"
+      />
+      <t-cell
+        ariaRole="button"
+        title="毕节"
+      />
+      <t-cell
+        ariaRole="button"
+        title="滨州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="百色"
+      />
+      <t-cell
+        ariaRole="button"
+        title="亳州"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="C"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="重庆"
+      />
+      <t-cell
+        ariaRole="button"
+        title="成都"
+      />
+      <t-cell
+        ariaRole="button"
+        title="长沙"
+      />
+      <t-cell
+        ariaRole="button"
+        title="长春"
+      />
+      <t-cell
+        ariaRole="button"
+        title="沧州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="常德"
+      />
+      <t-cell
+        ariaRole="button"
+        title="昌都"
+      />
+      <t-cell
+        ariaRole="button"
+        title="长治"
+      />
+      <t-cell
+        ariaRole="button"
+        title="常州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="巢湖"
+      />
+      <t-cell
+        ariaRole="button"
+        title="潮州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="承德"
+      />
+      <t-cell
+        ariaRole="button"
+        title="郴州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="赤峰"
+      />
+      <t-cell
+        ariaRole="button"
+        title="池州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="崇左"
+      />
+      <t-cell
+        ariaRole="button"
+        title="楚雄"
+      />
+      <t-cell
+        ariaRole="button"
+        title="滁州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="朝阳"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="D"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="大连"
+      />
+      <t-cell
+        ariaRole="button"
+        title="东莞"
+      />
+      <t-cell
+        ariaRole="button"
+        title="大理"
+      />
+      <t-cell
+        ariaRole="button"
+        title="丹东"
+      />
+      <t-cell
+        ariaRole="button"
+        title="大庆"
+      />
+      <t-cell
+        ariaRole="button"
+        title="大同"
+      />
+      <t-cell
+        ariaRole="button"
+        title="大兴安岭"
+      />
+      <t-cell
+        ariaRole="button"
+        title="德宏"
+      />
+      <t-cell
+        ariaRole="button"
+        title="德阳"
+      />
+      <t-cell
+        ariaRole="button"
+        title="德州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="定西"
+      />
+      <t-cell
+        ariaRole="button"
+        title="迪庆"
+      />
+      <t-cell
+        ariaRole="button"
+        title="东营"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="E"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="鄂尔多斯"
+      />
+      <t-cell
+        ariaRole="button"
+        title="恩施"
+      />
+      <t-cell
+        ariaRole="button"
+        title="鄂州"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="F"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="福州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="防城港"
+      />
+      <t-cell
+        ariaRole="button"
+        title="佛山"
+      />
+      <t-cell
+        ariaRole="button"
+        title="抚顺"
+      />
+      <t-cell
+        ariaRole="button"
+        title="抚州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="阜新"
+      />
+      <t-cell
+        ariaRole="button"
+        title="阜阳"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="G"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="广州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="桂林"
+      />
+      <t-cell
+        ariaRole="button"
+        title="贵阳"
+      />
+      <t-cell
+        ariaRole="button"
+        title="甘南"
+      />
+      <t-cell
+        ariaRole="button"
+        title="赣州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="甘孜"
+      />
+      <t-cell
+        ariaRole="button"
+        title="广安"
+      />
+      <t-cell
+        ariaRole="button"
+        title="广元"
+      />
+      <t-cell
+        ariaRole="button"
+        title="贵港"
+      />
+      <t-cell
+        ariaRole="button"
+        title="果洛"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="J"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="揭阳"
+      />
+      <t-cell
+        ariaRole="button"
+        title="吉林"
+      />
+      <t-cell
+        ariaRole="button"
+        title="晋江"
+      />
+      <t-cell
+        ariaRole="button"
+        title="吉安"
+      />
+      <t-cell
+        ariaRole="button"
+        title="胶州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="嘉兴"
+      />
+      <t-cell
+        ariaRole="button"
+        title="济南"
+      />
+      <t-cell
+        ariaRole="button"
+        title="鸡西"
+      />
+      <t-cell
+        ariaRole="button"
+        title="荆州"
+      />
+      <t-cell
+        ariaRole="button"
+        title="江门"
+      />
+      <t-cell
+        ariaRole="button"
+        title="基隆"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="K"
+    />
+    <t-cell-group>
+      <t-cell
+        ariaRole="button"
+        title="昆明"
+      />
+      <t-cell
+        ariaRole="button"
+        title="开封"
+      />
+      <t-cell
+        ariaRole="button"
+        title="康定"
+      />
+      <t-cell
+        ariaRole="button"
+        title="喀什"
+      />
+    </t-cell-group>
+  </t-indexes>
+</base>
+`;
+
+exports[`Indexes Indexes custom demo works fine 1`] = `
+<custom>
+  <t-indexes
+    indexList="{{
+      Array [
+        1,
+        3,
+        5,
+        7,
+        8,
+        10,
+        "#",
+      ]
+    }}"
+    stickyOffset="{{8}}"
+    tClass="wrapper"
+    bind:change="onChange"
+  >
+    <t-indexes-anchor
+      index="{{1}}"
+    >
+      <wx-view
+        class="capsule"
+      >
+        1
+      </wx-view>
+    </t-indexes-anchor>
+    <t-cell-group>
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{false}}"
+        title="列表内容"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="{{3}}"
+    >
+      <wx-view
+        class="capsule"
+      >
+        3
+      </wx-view>
+    </t-indexes-anchor>
+    <t-cell-group>
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{false}}"
+        title="列表内容"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="{{5}}"
+    >
+      <wx-view
+        class="capsule"
+      >
+        5
+      </wx-view>
+    </t-indexes-anchor>
+    <t-cell-group>
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{false}}"
+        title="列表内容"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="{{7}}"
+    >
+      <wx-view
+        class="capsule"
+      >
+        7
+      </wx-view>
+    </t-indexes-anchor>
+    <t-cell-group>
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{false}}"
+        title="列表内容"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="{{8}}"
+    >
+      <wx-view
+        class="capsule"
+      >
+        8
+      </wx-view>
+    </t-indexes-anchor>
+    <t-cell-group>
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{false}}"
+        title="列表内容"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="{{10}}"
+    >
+      <wx-view
+        class="capsule"
+      >
+        10
+      </wx-view>
+    </t-indexes-anchor>
+    <t-cell-group>
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{false}}"
+        title="列表内容"
+      />
+    </t-cell-group>
+    <t-indexes-anchor
+      index="#"
+    >
+      <wx-view
+        class="capsule"
+      >
+        #
+      </wx-view>
+    </t-indexes-anchor>
+    <t-cell-group>
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{true}}"
+        title="列表内容"
+      />
+      <t-cell
+        bordered="{{false}}"
+        title="列表内容"
+      />
+    </t-cell-group>
+  </t-indexes>
+</custom>
+`;
diff --git a/src/indexes/indexes.wxml b/src/indexes/indexes.wxml
index 589cc4e40..0969d413a 100644
--- a/src/indexes/indexes.wxml
+++ b/src/indexes/indexes.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class">
+<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
   <view
     class="{{classPrefix}}__sidebar {{prefix}}-class-sidebar"
     id="id-{{classPrefix}}__bar"
diff --git a/src/input/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/input/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..9f4fa98b0
--- /dev/null
+++ b/src/input/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Input align demo works fine 1`] = `
+<align>
+  <t-input
+    label="左对齐"
+    placeholder="请输入文字"
+  />
+  <t-input
+    align="center"
+    label="居中"
+    placeholder="请输入文字"
+  />
+  <t-input
+    align="right"
+    label="右对齐"
+    placeholder="请输入文字"
+  />
+</align>
+`;
+
+exports[`Input Input banner demo works fine 1`] = `
+<banner>
+  <wx-view
+    class="input-example"
+  >
+    <t-input
+      label="标签文字"
+      placeholder="请输入文字"
+      style="border-radius: 12rpx;"
+    />
+  </wx-view>
+</banner>
+`;
+
+exports[`Input Input base demo works fine 1`] = `
+<base>
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+  />
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字(选填)"
+  />
+  <t-input
+    placeholder="请输入文字"
+  />
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+    tips="辅助说明"
+  />
+</base>
+`;
+
+exports[`Input Input bordered demo works fine 1`] = `
+<bordered>
+  <wx-view
+    class="input-example"
+  >
+    <wx-view
+      class="input-example__label"
+    >
+       标签文字 
+    </wx-view>
+    <t-input
+      borderless="{{true}}"
+      placeholder="请输入文字"
+      style="border: 2rpx solid rgba(220,220,220,1);border-radius: 12rpx;"
+      suffixIcon="{{
+        Object {
+          "ariaLabel": "提示",
+          "name": "error-circle-filled",
+        }
+      }}"
+    />
+  </wx-view>
+</bordered>
+`;
+
+exports[`Input Input custom demo works fine 1`] = `
+<custom>
+  <wx-view
+    class="input-example custom-theme"
+  >
+    <t-input
+      label="标签文字"
+      placeholder="请输入文字"
+    />
+  </wx-view>
+</custom>
+`;
+
+exports[`Input Input label demo works fine 1`] = `
+<wx-label>
+  <t-input
+    label="标签超长时最多十个字"
+    placeholder="请输入文字"
+  />
+</wx-label>
+`;
+
+exports[`Input Input layout demo works fine 1`] = `
+<layout>
+  <t-input
+    label="标签文字"
+    layout="vertical"
+    placeholder="请输入文字"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "提示",
+        "name": "error-circle-filled",
+      }
+    }}"
+  />
+</layout>
+`;
+
+exports[`Input Input maxlength demo works fine 1`] = `
+<maxlength>
+  <t-input
+    label="标签文字"
+    maxlength="{{10}}"
+    placeholder="请输入文字"
+    tips="最大输入10个字符"
+  />
+  <t-input
+    label="标签文字"
+    maxcharacter="{{10}}"
+    placeholder="请输入文字"
+    tips="最大输入10个字符，汉字算两个"
+  />
+</maxlength>
+`;
+
+exports[`Input Input prefix demo works fine 1`] = `
+<prefix>
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+    prefixIcon="app"
+  />
+  <t-input
+    placeholder="请输入文字"
+    prefixIcon="app"
+  />
+</prefix>
+`;
+
+exports[`Input Input size demo works fine 1`] = `
+<size>
+  <t-input
+    label="小规格H48"
+    placeholder="请输入文字"
+    size="small"
+  />
+  <t-input
+    label="中规格H56"
+    placeholder="请输入文字"
+  />
+</size>
+`;
+
+exports[`Input Input special demo works fine 1`] = `
+<special>
+  <t-input
+    clearable="{{true}}"
+    label="输入密码"
+    type="password"
+    value="123456"
+  />
+  <t-input
+    label="验证码"
+    placeholder="输入验证码"
+  >
+    <wx-view
+      class="suffix"
+      slot="suffix"
+    >
+      <wx-view
+        class="suffix--line"
+      />
+      <wx-image
+        ariaLabel="验证码"
+        ariaRole="img"
+        class="image"
+        mode="heightFix"
+        src="https://wwcdn.weixin.qq.com/node/wework/images/202010241547.ac6876be9c.png"
+      />
+    </wx-view>
+  </t-input>
+  <t-input
+    label="手机号"
+    placeholder="输入手机号码"
+    tips=""
+    type="number"
+    value="17600600600"
+    bind:change="onPhoneInput"
+  >
+    <wx-view
+      slot="suffix"
+      style="display: flex; align-items: center"
+    >
+      <wx-view
+        class="suffix--line"
+      />
+      <wx-view
+        ariaRole="button"
+        class="verify"
+      >
+         发送验证码 
+      </wx-view>
+    </wx-view>
+  </t-input>
+  <t-input
+    align="right"
+    label="价格"
+    placeholder="0.00"
+    suffix="元"
+    tClassTips="tips"
+    tips=""
+    bind:change="onPriceInput"
+  />
+  <t-input
+    align="right"
+    label="数量"
+    placeholder="填写个数"
+    suffix="个"
+    type="number"
+  />
+</special>
+`;
+
+exports[`Input Input status demo works fine 1`] = `
+<status>
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+    status="error"
+    tips="辅助说明"
+    value="已输入文字"
+  />
+  <t-input
+    disabled="{{true}}"
+    label="标签文字"
+    value="不可编辑文字"
+  />
+</status>
+`;
+
+exports[`Input Input suffix demo works fine 1`] = `
+<suffix>
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "提示",
+        "name": "error-circle-filled",
+      }
+    }}"
+    bind:click="click"
+  />
+  <t-input
+    label="标签文字"
+    placeholder="请输入手机号码"
+  >
+    <t-button
+      size="extra-small"
+      slot="suffix"
+      theme="primary"
+    >
+       操作按钮 
+    </t-button>
+  </t-input>
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "通讯录",
+        "name": "user-avatar",
+      }
+    }}"
+  />
+</suffix>
+`;
diff --git a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..8b4bedbf4
--- /dev/null
+++ b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`input props : clearable && label && suffix 1`] = `
+<t-input
+  class="base"
+>
+  <wx-view
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
+  >
+    <wx-view
+      class="t-input__icon--prefix"
+    />
+    <wx-view
+      ariaHidden="{{true}}"
+      class="t-input__label"
+    >
+      <wx-text
+        class="t-class-label"
+      >
+        tdesign
+      </wx-text>
+    </wx-view>
+    <wx-view
+      class="t-input__wrap"
+    >
+      <wx-view
+        class="t-input__content t-input--default"
+      >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel="tdesign"
+          ariaRole="textbox"
+          ariaRoledescription="tdesign"
+          autoFocus="{{false}}"
+          class="t-input__control t-input__control--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value="input输入框"
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+        />
+        <wx-view
+          class="t-input__wrap--clearable-icon"
+          bind:tap="clearInput"
+        >
+          <t-icon
+            class=""
+            tClass="t-class-clearable"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="清除"
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-close-circle-filled t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
+        </wx-view>
+        <wx-view
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
+        >
+          <wx-text>
+            后置内容
+          </wx-text>
+        </wx-view>
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        >
+          <t-icon
+            class=""
+            tClass="t-class-suffix-icon"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel=""
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-app t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </wx-view>
+</t-input>
+`;
+
+exports[`input slots : label 1`] = `
+<t-input
+  class="base"
+>
+  <wx-view
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
+  >
+    <wx-view
+      class="t-input__icon--prefix"
+    />
+    <wx-view
+      ariaHidden="{{true}}"
+      class="t-input__label"
+    >
+      <wx-text
+        slot="label"
+      >
+        标签文字
+        <wx-text
+          style="color: #e34d59"
+        >
+          *
+        </wx-text>
+      </wx-text>
+    </wx-view>
+    <wx-view
+      class="t-input__wrap"
+    >
+      <wx-view
+        class="t-input__content t-input--default"
+      >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel=""
+          ariaRole="textbox"
+          ariaRoledescription=""
+          autoFocus="{{false}}"
+          class="t-input__control t-input__control--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+        />
+        <wx-view
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
+        />
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        />
+      </wx-view>
+    </wx-view>
+  </wx-view>
+</t-input>
+`;
diff --git a/src/input/input.ts b/src/input/input.ts
index 8841efa65..f7de681a8 100644
--- a/src/input/input.ts
+++ b/src/input/input.ts
@@ -13,7 +13,6 @@ export default class Input extends SuperComponent {
   };
 
   externalClasses = [
-    'class',
     `${prefix}-class`,
     `${prefix}-class-prefix-icon`,
     `${prefix}-class-label`,
diff --git a/src/link/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/link/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..6d0a9ef88
--- /dev/null
+++ b/src/link/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link Link content demo works fine 1`] = `
+<content>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      size="small"
+      theme="primary"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+    />
+  </wx-view>
+</content>
+`;
+
+exports[`Link Link prefix demo works fine 1`] = `
+<prefix>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      prefixIcon="link"
+      size="small"
+      theme="primary"
+    />
+    <t-link
+      content="跳转链接"
+      prefixIcon="link"
+      size="small"
+    />
+  </wx-view>
+</prefix>
+`;
+
+exports[`Link Link size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="S号链接"
+      disabled="{{true}}"
+      size="small"
+      suffixIcon="jump"
+      theme="primary"
+    />
+    <t-link
+      content="M号链接"
+      disabled="{{true}}"
+      suffixIcon="jump"
+      theme="primary"
+    />
+    <t-link
+      content="L号链接"
+      disabled="{{true}}"
+      size="large"
+      suffixIcon="jump"
+      theme="primary"
+    />
+  </wx-view>
+</size>
+`;
+
+exports[`Link Link status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      size="small"
+      status="disabled"
+      suffixIcon="jump"
+      theme="primary"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      status="disabled"
+      suffixIcon="jump"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      status="disabled"
+      suffixIcon="jump"
+      theme="danger"
+    />
+  </wx-view>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      size="small"
+      status="disabled"
+      suffixIcon="jump"
+      theme="warning"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      status="disabled"
+      suffixIcon="jump"
+      theme="success"
+    />
+  </wx-view>
+</status>
+`;
+
+exports[`Link Link suffix demo works fine 1`] = `
+<suffix>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      size="small"
+      suffixIcon="jump"
+      theme="primary"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      suffixIcon="jump"
+    />
+  </wx-view>
+</suffix>
+`;
+
+exports[`Link Link theme demo works fine 1`] = `
+<theme>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      size="small"
+      suffixIcon="jump"
+      theme="primary"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      suffixIcon="jump"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      suffixIcon="jump"
+      theme="danger"
+    />
+  </wx-view>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      size="small"
+      suffixIcon="jump"
+      theme="warning"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      suffixIcon="jump"
+      theme="success"
+    />
+  </wx-view>
+</theme>
+`;
+
+exports[`Link Link underline demo works fine 1`] = `
+<underline>
+  <wx-view
+    class="link-example"
+  >
+    <t-link
+      content="跳转链接"
+      size="small"
+      theme="primary"
+      underline="{{true}}"
+    />
+    <t-link
+      content="跳转链接"
+      size="small"
+      underline="{{true}}"
+    />
+  </wx-view>
+</underline>
+`;
diff --git a/src/link/link.wxml b/src/link/link.wxml
index b52032cf4..d84061346 100644
--- a/src/link/link.wxml
+++ b/src/link/link.wxml
@@ -2,7 +2,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <navigator
-  class="{{className}} {{prefix}}-class"
+  class="{{className}} class {{prefix}}-class"
   style="{{_._style([style, customStyle])}}"
   target="{{navigatorProps.target}}"
   url="{{navigatorProps.url}}"
diff --git a/src/loading/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/loading/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..f2d47f834
--- /dev/null
+++ b/src/loading/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,189 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loading Loading base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="loading-container-flex"
+  >
+    <t-loading
+      class="wrapper"
+      size="40rpx"
+      theme="circular"
+    />
+    <t-loading
+      class="wrapper"
+      size="40rpx"
+      theme="spinner"
+    />
+    <t-loading
+      class="wrapper"
+      size="80rpx"
+      theme="dots"
+    />
+  </wx-view>
+</base>
+`;
+
+exports[`Loading Loading duration demo works fine 1`] = `
+<duration>
+  <t-loading
+    duration="{{1200}}"
+    size="52rpx"
+    tClassText="text-l"
+    text="加载中..."
+    theme="circular"
+  />
+  <wx-view
+    class="slider-container"
+  >
+    <t-slider
+      class="slider-class"
+      label="{{true}}"
+      max="{{1500}}"
+      min="{{100}}"
+      value="{{800}}"
+      bind:change="durationChange"
+    />
+  </wx-view>
+</duration>
+`;
+
+exports[`Loading Loading error demo works fine 1`] = `
+<error>
+  <t-loading
+    theme="error"
+    bind:reload="reloadPage"
+  />
+</error>
+`;
+
+exports[`Loading Loading horizontal demo works fine 1`] = `
+<horizontal>
+  <wx-view
+    class="loading-container-flex"
+  >
+    <t-loading
+      class="wrapper"
+      size="40rpx"
+      text="加载中..."
+      theme="circular"
+    />
+    <t-loading
+      class="wrapper"
+      inheritColor="{{true}}"
+      size="40rpx"
+      text="加载中..."
+      theme="spinner"
+    />
+  </wx-view>
+</horizontal>
+`;
+
+exports[`Loading Loading loadingProgress demo works fine 1`] = `
+<loadingProgress>
+  <t-loading
+    loading="{{false}}"
+    progress="{{100}}"
+    theme="bar"
+  />
+</loadingProgress>
+`;
+
+exports[`Loading Loading size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="loading-size-demo"
+  >
+    <t-loading
+      class="large"
+      size="64rpx"
+      text="加载中..."
+      theme="circular"
+    />
+    <wx-view
+      class="demo-desc"
+    >
+      中尺寸
+    </wx-view>
+    <t-loading
+      class="middle"
+      size="56rpx"
+      text="加载中..."
+      theme="circular"
+    />
+    <wx-view
+      class="demo-desc"
+    >
+      小尺寸
+    </wx-view>
+    <t-loading
+      size="48rpx"
+      text="加载中..."
+      theme="circular"
+    />
+  </wx-view>
+</size>
+`;
+
+exports[`Loading Loading status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="loading-container-flex"
+  >
+    <t-switch
+      colors="{{
+        Array [
+          "#00A870",
+        ]
+      }}"
+      slot="note"
+      value="{{false}}"
+      bind:change="switchChange"
+    />
+    <span
+      class="text-info"
+    >
+       请求结束，隐藏loading加载 
+    </span>
+  </wx-view>
+  <t-loading
+    delay="{{1000}}"
+    loading="{{false}}"
+    size="40rpx"
+    text="加载中..."
+    theme="circular"
+  />
+</status>
+`;
+
+exports[`Loading Loading text demo works fine 1`] = `
+<wx-text>
+  <t-loading
+    indicator="{{false}}"
+    text="加载中..."
+  />
+</wx-text>
+`;
+
+exports[`Loading Loading vertical demo works fine 1`] = `
+<vertical>
+  <div
+    class="box"
+  >
+    <t-loading
+      class="wrapper"
+      layout="vertical"
+      size="40rpx"
+      text="加载中"
+      theme="circular"
+    />
+    <t-loading
+      class="wrapper"
+      layout="vertical"
+      size="40rpx"
+      text="加载中"
+      theme="spinner"
+    />
+  </div>
+</vertical>
+`;
diff --git a/src/loading/loading.ts b/src/loading/loading.ts
index a7d717cba..f568ed150 100644
--- a/src/loading/loading.ts
+++ b/src/loading/loading.ts
@@ -9,7 +9,7 @@ const name = `${prefix}-loading`;
 export interface LoadingProps extends TdLoadingProps {}
 @wxComponent()
 export default class Loading extends SuperComponent {
-  externalClasses = ['class', `${prefix}-class`, `${prefix}-class-text`, `${prefix}-class-indicator`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-text`, `${prefix}-class-indicator`];
 
   data = {
     prefix,
diff --git a/src/message/__test__/__snapshots__/index.test.js.snap b/src/message/__test__/__snapshots__/index.test.js.snap
index 91656d628..42453af0f 100644
--- a/src/message/__test__/__snapshots__/index.test.js.snap
+++ b/src/message/__test__/__snapshots__/index.test.js.snap
@@ -31,7 +31,7 @@ exports[`message props : style && customStyle 1`] = `
         }
       }}"
       ariaRole="alert"
-      class="t-message t-class t-message--warning"
+      class="t-message class t-class t-message--warning"
       id="t-message"
       style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
     >
diff --git a/src/message/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/message/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..49b5f72ef
--- /dev/null
+++ b/src/message/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message Message base demo works fine 1`] = `
+<base>
+  <t-message
+    id="t-message"
+  />
+  <wx-view
+    class="message-example"
+  >
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showTextMessage"
+    >
+      纯文字的通知
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showIconMessage"
+    >
+      带图标的通知
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showCloseMessage"
+    >
+      带关闭的通知
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showScrollMessage"
+    >
+      可滚动多通知
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showBtnMessage"
+    >
+      带按钮的通知
+    </t-button>
+  </wx-view>
+</base>
+`;
+
+exports[`Message Message theme demo works fine 1`] = `
+<theme>
+  <t-message
+    id="t-message"
+  />
+  <wx-view
+    class="message-example"
+  >
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showInfoMessage"
+    >
+      普通通知
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showSuccessMessage"
+    >
+      成功通知
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showWarnMessage"
+    >
+      警示通知
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      tClass="external-class"
+      theme="primary"
+      variant="outline"
+      bind:tap="showErrorMessage"
+    >
+      错误通知
+    </t-button>
+  </wx-view>
+</theme>
+`;
diff --git a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..42453af0f
--- /dev/null
+++ b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`message props : style && customStyle 1`] = `
+<main>
+  <t-message
+    id="t-message"
+  >
+    <wx-view
+      animation="{{
+        Object {
+          "actions": Array [
+            Object {
+              "animates": Array [
+                Object {
+                  "args": Array [
+                    66,
+                  ],
+                  "type": "translateY",
+                },
+              ],
+              "option": Object {
+                "transformOrigin": "50% 50% 0",
+                "transition": Object {
+                  "delay": 0,
+                  "duration": 500,
+                  "timingFunction": "ease",
+                },
+              },
+            },
+          ],
+        }
+      }}"
+      ariaRole="alert"
+      class="t-message class t-class t-message--warning"
+      id="t-message"
+      style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
+    >
+      <wx-view
+        class="t-message__icon--left"
+      >
+        <t-icon
+          class=""
+          tClass="t-class-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-error-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+      <wx-view
+        class="t-message__text-wrap "
+        id="t-message__text-wrap"
+        style="text-align: left"
+      >
+        <wx-view
+          animation="{{Array []}}"
+          class="t-message__text t-class-content"
+          id="t-message__text"
+        >
+          这是一条带关闭的消息通知
+        </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-message__icon--right"
+        bind:tap="handleClose"
+      >
+        <t-icon
+          class=""
+          tClass="t-class-close-btn"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+    </wx-view>
+  </t-message>
+</main>
+`;
diff --git a/src/message/message.wxml b/src/message/message.wxml
index b8c2d111d..d9bb27c84 100644
--- a/src/message/message.wxml
+++ b/src/message/message.wxml
@@ -5,7 +5,7 @@
 
 <block wx:if="{{visible}}">
   <view
-    class="{{classPrefix}} {{prefix}}-class {{classPrefix}}--{{theme}}"
+    class="{{classPrefix}} class {{prefix}}-class {{classPrefix}}--{{theme}}"
     style="{{_._style([this.getMessageStyles(zIndex, offset, wrapTop), style, customStyle])}}"
     animation="{{showAnimation}}"
     id="{{classPrefix}}"
diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap
index 39c0e589f..141416919 100644
--- a/src/navbar/__test__/__snapshots__/index.test.js.snap
+++ b/src/navbar/__test__/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`navbar :base 1`] = `
 <main>
   <t-navbar>
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--visible-animation t-class"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
       style=""
     >
       <wx-view
@@ -39,7 +39,7 @@ exports[`navbar :base 2`] = `
 <main>
   <t-navbar>
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--hide-animation t-class"
+      class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
       style=""
     >
       <wx-view
@@ -74,7 +74,7 @@ exports[`navbar :base 3`] = `
 <main>
   <t-navbar>
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--hide t-class"
+      class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
       style=""
     >
       <wx-view
@@ -109,7 +109,7 @@ exports[`navbar :fixed 1`] = `
 <main>
   <t-navbar>
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--visible-animation t-class"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
       style=""
     >
       <wx-view
@@ -144,7 +144,7 @@ exports[`navbar :menu button 1`] = `
 <main>
   <t-navbar>
     <wx-view
-      class="t-navbar t-navbar--fixed  t-class"
+      class="t-navbar t-navbar--fixed  class t-class"
       style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
     >
       <wx-view
diff --git a/src/navbar/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/navbar/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..b8f9953f7
--- /dev/null
+++ b/src/navbar/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbar Navbar back-home demo works fine 1`] = `
+<back-home>
+  <t-navbar
+    title="标题文字"
+  >
+    <wx-view
+      class="custom-capsule"
+      slot="capsule"
+    >
+      <t-icon
+        ariaLabel="返回"
+        ariaRole="button"
+        class="custom-capsule__icon"
+        name="chevron-left"
+        size="20"
+      />
+      <t-icon
+        ariaLabel="首页"
+        ariaRole="button"
+        class="custom-capsule__icon"
+        name="home"
+        size="20"
+      />
+    </wx-view>
+  </t-navbar>
+</back-home>
+`;
+
+exports[`Navbar Navbar base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="block"
+  >
+    <t-navbar
+      tClassTitle="nav-title"
+      title="标题文字"
+    />
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-navbar
+      class="block"
+      leftArrow="{{true}}"
+      title="标题文字"
+      bind:go-back="handleBack"
+    />
+  </wx-view>
+</base>
+`;
+
+exports[`Navbar Navbar custom-color demo works fine 1`] = `
+<custom-color>
+  <t-navbar
+    class="custom-navbar"
+    leftArrow="{{true}}"
+    title="标题文字"
+  />
+</custom-color>
+`;
+
+exports[`Navbar Navbar img demo works fine 1`] = `
+<img>
+  <t-navbar>
+    <wx-view
+      class="custom-left"
+      slot="left"
+    >
+      <t-image
+        ariaLabel="导航栏图片"
+        src="https://tdesign.gtimg.com/miniprogram/images/logo1.png"
+        tClass="custom-image"
+      />
+    </wx-view>
+  </t-navbar>
+</img>
+`;
+
+exports[`Navbar Navbar left-title demo works fine 1`] = `
+<left-title>
+  <wx-view
+    class="block"
+  >
+    <t-navbar
+      leftArrow="{{true}}"
+      title="标题居中"
+    />
+  </wx-view>
+  <t-navbar
+    leftArrow="{{true}}"
+  >
+    <wx-view
+      class="custom-title"
+      slot="left"
+    >
+      标题左对齐
+    </wx-view>
+  </t-navbar>
+  <wx-view
+    class="demo-desc"
+  >
+    标题尺寸
+  </wx-view>
+  <t-navbar
+    leftArrow="{{true}}"
+  >
+    <wx-text
+      class="left-text"
+      slot="left"
+    >
+      返回
+    </wx-text>
+  </t-navbar>
+  <wx-view
+    class="header-title"
+  >
+    大标题尺寸
+  </wx-view>
+</left-title>
+`;
+
+exports[`Navbar Navbar search demo works fine 1`] = `
+<search>
+  <t-navbar
+    leftIcon="slot"
+  >
+    <wx-view
+      class="search-box"
+      slot="left"
+    >
+      <t-search
+        placeholder="搜索内容"
+        shape="round"
+      />
+    </wx-view>
+  </t-navbar>
+</search>
+`;
diff --git a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..141416919
--- /dev/null
+++ b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`navbar :base 1`] = `
+<main>
+  <t-navbar>
+    <wx-view
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
+    >
+      <wx-view
+        class="t-navbar__placeholder"
+      />
+      <wx-view
+        class="t-navbar__content"
+      >
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-navbar>
+</main>
+`;
+
+exports[`navbar :base 2`] = `
+<main>
+  <t-navbar>
+    <wx-view
+      class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
+      style=""
+    >
+      <wx-view
+        class="t-navbar__placeholder"
+      />
+      <wx-view
+        class="t-navbar__content"
+      >
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-navbar>
+</main>
+`;
+
+exports[`navbar :base 3`] = `
+<main>
+  <t-navbar>
+    <wx-view
+      class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
+      style=""
+    >
+      <wx-view
+        class="t-navbar__placeholder"
+      />
+      <wx-view
+        class="t-navbar__content"
+      >
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-navbar>
+</main>
+`;
+
+exports[`navbar :fixed 1`] = `
+<main>
+  <t-navbar>
+    <wx-view
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
+    >
+      <wx-view
+        class="t-navbar__placeholder"
+      />
+      <wx-view
+        class="t-navbar__content"
+      >
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-navbar>
+</main>
+`;
+
+exports[`navbar :menu button 1`] = `
+<main>
+  <t-navbar>
+    <wx-view
+      class="t-navbar t-navbar--fixed  class t-class"
+      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
+    >
+      <wx-view
+        class="t-navbar__placeholder"
+      />
+      <wx-view
+        class="t-navbar__content"
+      >
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-navbar>
+</main>
+`;
diff --git a/src/navbar/navbar.wxml b/src/navbar/navbar.wxml
index faf825f2e..5455da7a9 100644
--- a/src/navbar/navbar.wxml
+++ b/src/navbar/navbar.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 <view
-  class="{{_.cls(classPrefix, ['fixed', fixed])}} {{visibleClass}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, ['fixed', fixed])}} {{visibleClass}} class {{prefix}}-class"
   style="{{_._style([boxStyle, style, customStyle])}}"
 >
   <view wx:if="{{fixed}}" class="{{classPrefix}}__placeholder" />
diff --git a/src/notice-bar/__test__/__snapshots__/index.test.js.snap b/src/notice-bar/__test__/__snapshots__/index.test.js.snap
index 7a851cc5e..5bd421747 100644
--- a/src/notice-bar/__test__/__snapshots__/index.test.js.snap
+++ b/src/notice-bar/__test__/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ exports[`notice-bar props : marquee 1`] = `
     class="base"
   >
     <wx-view
-      class="t-notice-bar t-notice-bar--info t-class"
+      class="t-notice-bar t-notice-bar--info class t-class"
       style=""
     >
       <wx-view
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..ed9ad0337
--- /dev/null
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoticeBar NoticeBar base demo works fine 1`] = `
+<base>
+  <t-notice-bar
+    content="这是一条普通的通知信息"
+    prefixIcon="{{false}}"
+    visible="{{true}}"
+  />
+</base>
+`;
+
+exports[`NoticeBar NoticeBar custom demo works fine 1`] = `
+<custom>
+  <t-notice-bar
+    content="提示文字描述提示文字描述提示文字描述"
+    prefixIcon="sound"
+    suffixIcon="chevron-right"
+    tClass="external-class"
+    tClassPrefixIcon="external-class-prefix-icon"
+    visible="{{true}}"
+  />
+</custom>
+`;
+
+exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
+<customization>
+  <t-notice-bar
+    suffixIcon="slot"
+    visible="{{true}}"
+  >
+    <wx-view
+      slot="content"
+    >
+      
+    提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
+    
+      <wx-view
+        class="extra"
+      >
+        <t-link
+          content="详情"
+          navigatorProps="{{
+            Object {
+              "url": "/pages/xxx/xxx",
+            }
+          }}"
+          theme="primary"
+        />
+      </wx-view>
+    </wx-view>
+    <wx-view
+      slot="suffix-icon"
+    >
+      <t-icon
+        name="close"
+        size="44rpx"
+      />
+    </wx-view>
+  </t-notice-bar>
+</customization>
+`;
+
+exports[`NoticeBar NoticeBar event demo works fine 1`] = `
+<event>
+  <t-notice-bar
+    suffixIcon="chevron-right"
+    visible="{{true}}"
+    bind:click="click"
+  >
+    <wx-view
+      slot="content"
+    >
+       这是一条普通的通知信息 
+    </wx-view>
+    <t-link
+      content="详情"
+      navigatorProps="{{
+        Object {
+          "url": "/pages/xxx/xxx",
+        }
+      }}"
+      slot="extra"
+      theme="primary"
+    />
+  </t-notice-bar>
+  <t-notice-bar
+    content="这是一条普通的通知信息"
+    suffixIcon="chevron-right"
+    visible="{{true}}"
+    bind:click="click"
+  />
+</event>
+`;
+
+exports[`NoticeBar NoticeBar iconDemo demo works fine 1`] = `
+<iconDemo>
+  <t-notice-bar
+    content="提示文字描述提示文字描述提示文字描述"
+    visible="{{true}}"
+  >
+    <wx-view
+      slot="prefix-icon"
+    >
+      <t-icon
+        name="error-circle-filled"
+      />
+    </wx-view>
+  </t-notice-bar>
+</iconDemo>
+`;
+
+exports[`NoticeBar NoticeBar scrolling demo works fine 1`] = `
+<scrolling>
+  <t-notice-bar
+    content="提示文字描述提示文字描述提示文字描述提示文字描述文"
+    marquee="{{
+      Object {
+        "delay": 0,
+        "loop": -1,
+        "speed": 80,
+      }
+    }}"
+    prefixIcon="null"
+    visible="{{true}}"
+  />
+  <t-notice-bar
+    content="提示文字描述提示文字描述提示文字描述提示文字描述文"
+    marquee="{{
+      Object {
+        "delay": 0,
+        "loop": -1,
+        "speed": 60,
+      }
+    }}"
+    visible="{{true}}"
+  />
+  <t-notice-bar
+    content="{{
+      Array [
+        "君不见",
+        "高堂明镜悲白发",
+        "朝如青丝暮成雪",
+        "人生得意须尽欢",
+        "莫使金樽空对月",
+      ]
+    }}"
+    direction="vertical"
+    prefixIcon="sound"
+    visible="{{true}}"
+    bind:click="click"
+  />
+</scrolling>
+`;
+
+exports[`NoticeBar NoticeBar theme demo works fine 1`] = `
+<theme>
+  <t-notice-bar
+    content="默认状态公告栏默认状态公告栏"
+    visible="{{true}}"
+  />
+  <t-notice-bar
+    content="成功状态公告栏成功状态公告栏"
+    theme="success"
+    visible="{{true}}"
+  />
+  <t-notice-bar
+    content="警示状态公告栏警示状态公告栏"
+    theme="warning"
+    visible="{{true}}"
+  />
+  <t-notice-bar
+    content="错误状态公告栏错误状态公告栏"
+    theme="error"
+    visible="{{true}}"
+  />
+</theme>
+`;
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..5bd421747
--- /dev/null
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`notice-bar props : marquee 1`] = `
+<main>
+  <t-notice-bar
+    class="base"
+  >
+    <wx-view
+      class="t-notice-bar t-notice-bar--info class t-class"
+      style=""
+    >
+      <wx-view
+        class="t-notice-bar__prefix-icon"
+        bind:tap="clickPrefixIcon"
+      >
+        <t-icon
+          class=""
+          tClass="t-class-prefix-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-error-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+      <wx-view
+        class="t-notice-bar__content-wrap"
+        bind:tap="clickContent"
+      >
+        <wx-view
+          animation="{{
+            Object {
+              "actions": Array [
+                Object {
+                  "animates": Array [
+                    Object {
+                      "args": Array [
+                        -350,
+                      ],
+                      "type": "translateX",
+                    },
+                  ],
+                  "option": Object {
+                    "transformOrigin": "50% 50% 0",
+                    "transition": Object {
+                      "delay": 0,
+                      "duration": 8287.5,
+                      "timingFunction": "linear",
+                    },
+                  },
+                },
+              ],
+            }
+          }}"
+          class="t-notice-bar__content t-class-content "
+        >
+           提示文字描述提示文字描述提示文字描述提示文字描述文 
+        </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-notice-bar__extra t-class-extra"
+        bind:tap="clickExtra"
+      />
+      <wx-view
+        class="t-notice-bar__suffix-icon"
+        bind:tap="clickSuffixIcon"
+      />
+    </wx-view>
+  </t-notice-bar>
+</main>
+`;
diff --git a/src/notice-bar/notice-bar.wxml b/src/notice-bar/notice-bar.wxml
index e30485324..2e1cbd85e 100644
--- a/src/notice-bar/notice-bar.wxml
+++ b/src/notice-bar/notice-bar.wxml
@@ -4,7 +4,7 @@
 <view
   wx:if="{{visible}}"
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{classPrefix}}--{{theme}} {{prefix}}-class"
+  class="{{classPrefix}} {{classPrefix}}--{{theme}} class {{prefix}}-class"
 >
   <!-- prefixIcon -->
   <view class="{{classPrefix}}__prefix-icon" bind:tap="clickPrefixIcon">
diff --git a/src/overlay/__test__/__snapshots__/index.test.js.snap b/src/overlay/__test__/__snapshots__/index.test.js.snap
index dcf6309ec..7a06bb8be 100644
--- a/src/overlay/__test__/__snapshots__/index.test.js.snap
+++ b/src/overlay/__test__/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ exports[`overlay :base 1`] = `
     <wx-view
       ariaLabel="关闭"
       ariaRole="button"
-      class="t-overlay t-fade-enter t-fade-enter-active"
+      class="t-overlay t-fade-enter t-fade-enter-active class"
       style="z-index:11000;"
       bind:tap="handleClick"
       catch:touchmove="noop"
diff --git a/src/overlay/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/overlay/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..d8af8fe83
--- /dev/null
+++ b/src/overlay/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Overlay Overlay base demo works fine 1`] = `
+<base>
+  <t-overlay
+    visible="{{false}}"
+    bind:click="handleOverlayClick"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleClick"
+  >
+    基础用法
+  </t-button>
+</base>
+`;
diff --git a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..7a06bb8be
--- /dev/null
+++ b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`overlay :base 1`] = `
+<main>
+  <t-overlay>
+    <wx-view
+      ariaLabel="关闭"
+      ariaRole="button"
+      class="t-overlay t-fade-enter t-fade-enter-active class"
+      style="z-index:11000;"
+      bind:tap="handleClick"
+      catch:touchmove="noop"
+      bind:transitionend="onTransitionEnd"
+    />
+  </t-overlay>
+</main>
+`;
diff --git a/src/overlay/overlay.wxml b/src/overlay/overlay.wxml
index a4f1b8cfe..55750dd46 100644
--- a/src/overlay/overlay.wxml
+++ b/src/overlay/overlay.wxml
@@ -2,7 +2,7 @@
 
 <view
   wx:if="{{realVisible && preventScrollThrough}}"
-  class="{{prefix}}-overlay {{transitionClass}}"
+  class="{{prefix}}-overlay {{transitionClass}} class"
   style="{{_._style(['z-index:' + _zIndex, computedStyle, style, customStyle])}}"
   bind:tap="handleClick"
   catchtouchmove="noop"
@@ -14,7 +14,7 @@
 </view>
 <view
   wx:elif="{{realVisible}}"
-  class="{{prefix}}-overlay {{transitionClass}}"
+  class="{{prefix}}-overlay {{transitionClass}} class"
   style="{{_._style(['z-index:' + _zIndex, computedStyle, style, customStyle])}}"
   bind:tap="handleClick"
   bind:transitionend="onTransitionEnd"
diff --git a/src/picker-item/picker-item.ts b/src/picker-item/picker-item.ts
index 2406857b5..46ab74c11 100644
--- a/src/picker-item/picker-item.ts
+++ b/src/picker-item/picker-item.ts
@@ -24,7 +24,7 @@ export default class PickerItem extends SuperComponent {
     },
   };
 
-  externalClasses = ['class', `${prefix}-class`];
+  externalClasses = [`${prefix}-class`];
 
   properties = props;
 
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index 7cf667a1a..7e9ca22d2 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -9,6 +9,7 @@ exports[`picker :base 1`] = `
   bind:pick="onColumnChange"
 >
   <t-popup
+    class="class"
     bind:visible-change="onPopupChange"
   >
     <wx-view
@@ -163,7 +164,7 @@ exports[`picker :base 1`] = `
       <wx-view
         ariaLabel="关闭"
         ariaRole="button"
-        class="t-overlay t-fade-enter t-fade-enter-active"
+        class="t-overlay t-fade-enter t-fade-enter-active class"
         style="z-index:11000;"
         bind:tap="handleClick"
         catch:touchmove="noop"
diff --git a/src/picker/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..208b682f3
--- /dev/null
+++ b/src/picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,289 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Picker Picker area demo works fine 1`] = `
+<area>
+  <t-cell
+    arrow="{{true}}"
+    class="block"
+    hover="{{true}}"
+    note=""
+    title="选择地区"
+    bind:click="onAreaPicker"
+  />
+  <t-picker
+    cancelBtn="取消"
+    confirmBtn="确认"
+    title="选择地区"
+    value=""
+    visible=""
+    bind:cancel="onPickerCancel"
+    bind:change="onPickerChange"
+    bind:pick="onColumnChange"
+  >
+    <t-picker-item
+      options="{{
+        Array [
+          Object {
+            "label": "北京市",
+            "value": "110000",
+          },
+          Object {
+            "label": "广东省",
+            "value": "440000",
+          },
+        ]
+      }}"
+    />
+    <t-picker-item
+      options="{{
+        Array [
+          Object {
+            "label": "北京市",
+            "value": "110100",
+          },
+        ]
+      }}"
+    />
+    <t-picker-item
+      options="{{
+        Array [
+          Object {
+            "label": "东城区",
+            "value": "110101",
+          },
+          Object {
+            "label": "西城区",
+            "value": "110102",
+          },
+          Object {
+            "label": "朝阳区",
+            "value": "110105",
+          },
+          Object {
+            "label": "丰台区",
+            "value": "110106",
+          },
+          Object {
+            "label": "石景山区",
+            "value": "110107",
+          },
+          Object {
+            "label": "海淀区",
+            "value": "110108",
+          },
+          Object {
+            "label": "门头沟区",
+            "value": "110109",
+          },
+          Object {
+            "label": "房山区",
+            "value": "110111",
+          },
+          Object {
+            "label": "通州区",
+            "value": "110112",
+          },
+          Object {
+            "label": "顺义区",
+            "value": "110113",
+          },
+          Object {
+            "label": "昌平区",
+            "value": "110114",
+          },
+          Object {
+            "label": "大兴区",
+            "value": "110115",
+          },
+          Object {
+            "label": "怀柔区",
+            "value": "110116",
+          },
+          Object {
+            "label": "平谷区",
+            "value": "110117",
+          },
+          Object {
+            "label": "密云区",
+            "value": "110118",
+          },
+          Object {
+            "label": "延庆区",
+            "value": "110119",
+          },
+        ]
+      }}"
+    />
+  </t-picker>
+</area>
+`;
+
+exports[`Picker Picker base demo works fine 1`] = `
+<base>
+  <t-cell
+    arrow="{{true}}"
+    class="block"
+    hover="{{true}}"
+    note=""
+    title="选择城市"
+    bind:click="onCityPicker"
+  />
+  <t-cell
+    arrow="{{true}}"
+    class="block"
+    hover="{{true}}"
+    note=""
+    title="选择时间"
+    bind:click="onSeasonPicker"
+  />
+  <t-picker
+    cancelBtn="取消"
+    confirmBtn="确认"
+    data-key="city"
+    title="选择城市"
+    value=""
+    visible=""
+    bind:cancel="onPickerCancel"
+    bind:change="onPickerChange"
+    bind:pick="onColumnChange"
+  >
+    <t-picker-item
+      options="{{
+        Array [
+          Object {
+            "label": "北京市",
+            "value": "北京市",
+          },
+          Object {
+            "label": "上海市",
+            "value": "上海市",
+          },
+          Object {
+            "label": "广州市",
+            "value": "广州市",
+          },
+          Object {
+            "label": "深圳市",
+            "value": "深圳市",
+          },
+          Object {
+            "label": "成都市",
+            "value": "成都市",
+          },
+        ]
+      }}"
+    />
+  </t-picker>
+  <t-picker
+    cancelBtn="取消"
+    confirmBtn="确认"
+    data-key="date"
+    title="选择时间"
+    value=""
+    visible=""
+    bind:cancel="onPickerCancel"
+    bind:change="onPickerChange"
+    bind:pick="onColumnChange"
+  >
+    <t-picker-item
+      options="{{
+        Array [
+          Object {
+            "label": "2021年",
+            "value": "2021",
+          },
+          Object {
+            "label": "2020年",
+            "value": "2020",
+          },
+          Object {
+            "label": "2019年",
+            "value": "2019",
+          },
+        ]
+      }}"
+    />
+    <t-picker-item
+      options="{{
+        Array [
+          Object {
+            "label": "春",
+            "value": "春",
+          },
+          Object {
+            "label": "夏",
+            "value": "夏",
+          },
+          Object {
+            "label": "秋",
+            "value": "秋",
+          },
+          Object {
+            "label": "冬",
+            "value": "冬",
+          },
+        ]
+      }}"
+    />
+  </t-picker>
+</base>
+`;
+
+exports[`Picker Picker with-title demo works fine 1`] = `
+<with-title>
+  <t-cell
+    arrow="{{true}}"
+    class="block"
+    hover="{{true}}"
+    note=""
+    title="带标题选择器"
+    bind:click="onTitlePicker"
+  />
+  <t-cell
+    arrow="{{true}}"
+    class="block"
+    hover="{{true}}"
+    note=""
+    title="无标题选择器"
+    bind:click="onWithoutTitlePicker"
+  />
+  <t-picker
+    cancelBtn="取消"
+    confirmBtn="确认"
+    data-key="city"
+    title=""
+    value=""
+    visible=""
+    bind:cancel="onPickerCancel"
+    bind:change="onPickerChange"
+    bind:pick="onColumnChange"
+  >
+    <t-picker-item
+      options="{{
+        Array [
+          Object {
+            "label": "北京市",
+            "value": "北京市",
+          },
+          Object {
+            "label": "上海市",
+            "value": "上海市",
+          },
+          Object {
+            "label": "广州市",
+            "value": "广州市",
+          },
+          Object {
+            "label": "深圳市",
+            "value": "深圳市",
+          },
+          Object {
+            "label": "成都市",
+            "value": "成都市",
+          },
+        ]
+      }}"
+    />
+  </t-picker>
+</with-title>
+`;
diff --git a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..7e9ca22d2
--- /dev/null
+++ b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`picker :base 1`] = `
+<t-picker
+  data-key="yearSeasons"
+  id="yearSeasons"
+  bind:cancel="onPickerCancel"
+  bind:change="onPickerChange"
+  bind:pick="onColumnChange"
+>
+  <t-popup
+    class="class"
+    bind:visible-change="onPopupChange"
+  >
+    <wx-view
+      ariaModal="{{true}}"
+      ariaRole="dialog"
+      class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+      style="z-index:11500;"
+      bind:transitionend="onTransitionEnd"
+    >
+      <wx-view
+        class="t-popup__content t-class-content"
+      >
+        <wx-view
+          class="t-popup__close"
+          bind:tap="handleClose"
+        />
+        <wx-view
+          class="t-picker t-class"
+          slot="content"
+          style=""
+        >
+          <wx-view
+            class="t-picker__toolbar"
+          >
+            <wx-view
+              class="t-picker__cancel t-class-cancel"
+              bind:tap="onCancel"
+            >
+              取消
+            </wx-view>
+            <wx-view
+              class="t-picker__title t-class-title"
+            >
+              
+            </wx-view>
+            <wx-view
+              class="t-picker__confirm t-class-confirm"
+              bind:tap="onConfirm"
+            >
+              确认
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="t-picker__main"
+          >
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
+      2021年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
+      2020年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
+      2019年
+    
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
+      春
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
+      夏
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
+      秋
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{3}}"
+                  >
+                    
+      冬
+    
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <wx-view
+              class="t-picker__mask t-picker__mask--top"
+            />
+            <wx-view
+              class="t-picker__mask t-picker__mask--bottom"
+            />
+            <wx-view
+              class="t-picker__indicator"
+            />
+          </wx-view>
+        </wx-view>
+      </wx-view>
+    </wx-view>
+    <t-overlay
+      class="test"
+      id="popup-overlay"
+      bind:tap="handleOverlayClick"
+    >
+      <wx-view
+        ariaLabel="关闭"
+        ariaRole="button"
+        class="t-overlay t-fade-enter t-fade-enter-active class"
+        style="z-index:11000;"
+        bind:tap="handleClick"
+        catch:touchmove="noop"
+        bind:transitionend="onTransitionEnd"
+      />
+    </t-overlay>
+  </t-popup>
+</t-picker>
+`;
diff --git a/src/picker/picker.wxml b/src/picker/picker.wxml
index d29d02304..282ee82aa 100644
--- a/src/picker/picker.wxml
+++ b/src/picker/picker.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
+<t-popup class="class" visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
   <view slot="content" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class">
     <view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
       <view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
diff --git a/src/popup/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/popup/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..78b71e956
--- /dev/null
+++ b/src/popup/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popup Popup base demo works fine 1`] = `
+<base>
+  <t-popup
+    placement="top"
+    visible=""
+    bind:visible-change="onVisibleChange"
+  >
+    <wx-view
+      class="block block--"
+    >
+      
+    </wx-view>
+  </t-popup>
+  <t-button
+    block="{{true}}"
+    data-item="{{
+      Object {
+        "text": "顶部弹出",
+        "value": "top",
+      }
+    }}"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="handlePopup"
+  >
+    顶部弹出
+  </t-button>
+  <t-button
+    block="{{true}}"
+    data-item="{{
+      Object {
+        "text": "左侧弹出",
+        "value": "left",
+      }
+    }}"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="handlePopup"
+  >
+    左侧弹出
+  </t-button>
+  <t-button
+    block="{{true}}"
+    data-item="{{
+      Object {
+        "text": "中间弹出",
+        "value": "center",
+      }
+    }}"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="handlePopup"
+  >
+    中间弹出
+  </t-button>
+  <t-button
+    block="{{true}}"
+    data-item="{{
+      Object {
+        "text": "底部弹出",
+        "value": "bottom",
+      }
+    }}"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="handlePopup"
+  >
+    底部弹出
+  </t-button>
+  <t-button
+    block="{{true}}"
+    data-item="{{
+      Object {
+        "text": "右侧弹出",
+        "value": "right",
+      }
+    }}"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="handlePopup"
+  >
+    右侧弹出
+  </t-button>
+</base>
+`;
+
+exports[`Popup Popup custom-close demo works fine 1`] = `
+<custom-close>
+  <t-popup
+    placement="center"
+    visible=""
+    bind:visible-change="onVisibleChange"
+  >
+    <wx-view
+      class="block"
+    >
+      <t-icon
+        color="#fff"
+        name="close-circle"
+        size="32"
+        tClass="close-btn"
+        bind:tap="onClose"
+      />
+    </wx-view>
+  </t-popup>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handlePopup"
+  >
+    居中弹出层-带自定义关闭按钮
+  </t-button>
+</custom-close>
+`;
+
+exports[`Popup Popup with-title demo works fine 1`] = `
+<with-title>
+  <t-popup
+    placement="bottom"
+    visible=""
+    bind:visible-change="onVisibleChange"
+  >
+    <wx-view
+      class="block"
+    >
+      <wx-view
+        class="header"
+      >
+        <wx-view
+          ariaRole="button"
+          class="btn btn--cancel"
+        >
+          取消
+        </wx-view>
+        <wx-view
+          class="title"
+        >
+          标题文字
+        </wx-view>
+        <wx-view
+          ariaRole="button"
+          class="btn btn--confirm"
+        >
+          确定
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-popup>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handlePopup"
+  >
+    底部弹出层-带标题及操作
+  </t-button>
+</with-title>
+`;
diff --git a/src/popup/popup.ts b/src/popup/popup.ts
index 9d8a6069b..2984cb132 100644
--- a/src/popup/popup.ts
+++ b/src/popup/popup.ts
@@ -13,7 +13,7 @@ const name = `${prefix}-popup`;
 
 @wxComponent()
 export default class Popup extends SuperComponent {
-  externalClasses = ['class', `${prefix}-class`, `${prefix}-class-content`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
 
   behaviors = [transition()];
 
diff --git a/src/progress/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/progress/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..644903c51
--- /dev/null
+++ b/src/progress/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Progress Progress base demo works fine 1`] = `
+<base>
+  <t-progress
+    percentage="80"
+  />
+  <t-progress
+    percentage="80"
+    theme="plump"
+  />
+  <t-progress
+    percentage="30"
+    theme="circle"
+  />
+</base>
+`;
+
+exports[`Progress Progress circle demo works fine 1`] = `
+<circle>
+  <t-progress
+    percentage="80"
+    theme="circle"
+  />
+  <t-progress
+    percentage="88"
+    status="warning"
+    theme="circle"
+  />
+  <t-progress
+    percentage="88"
+    status="error"
+    theme="circle"
+  />
+  <t-progress
+    percentage="88"
+    status="success"
+    theme="circle"
+  />
+</circle>
+`;
+
+exports[`Progress Progress custom demo works fine 1`] = `
+<custom>
+  <t-progress
+    color="#CD04FF"
+    percentage="88"
+    tClassLabel="external-class-label"
+    trackColor="#EAC9FF"
+  />
+  <t-progress
+    percentage="88"
+    tClassBar="external-class-bar"
+  />
+</custom>
+`;
+
+exports[`Progress Progress line demo works fine 1`] = `
+<line>
+  <t-progress
+    percentage="80"
+  />
+  <t-progress
+    percentage="88"
+    status="warning"
+  />
+  <t-progress
+    percentage="88"
+    status="error"
+  />
+  <t-progress
+    percentage="88"
+    status="success"
+  />
+</line>
+`;
+
+exports[`Progress Progress plump demo works fine 1`] = `
+<plump>
+  <t-progress
+    percentage="80"
+    theme="plump"
+  />
+  <t-progress
+    percentage="88"
+    status="warning"
+    theme="plump"
+  />
+  <t-progress
+    percentage="88"
+    status="error"
+    theme="plump"
+  />
+  <t-progress
+    percentage="88"
+    status="success"
+    theme="plump"
+  />
+</plump>
+`;
+
+exports[`Progress Progress transition demo works fine 1`] = `
+<transition>
+  <t-progress
+    percentage="{{88}}"
+  />
+  <wx-view
+    class="button-group"
+  >
+    <t-button
+      size="small"
+      theme="primary"
+      variant="plain"
+      bind:tap="clickReduce"
+    >
+      减少
+    </t-button>
+    <wx-view
+      class="space"
+    />
+    <t-button
+      size="small"
+      theme="primary"
+      bind:tap="clickAdd"
+    >
+      增加
+    </t-button>
+  </wx-view>
+</transition>
+`;
diff --git a/src/progress/progress.wxml b/src/progress/progress.wxml
index 9245f8322..d1d02e58e 100644
--- a/src/progress/progress.wxml
+++ b/src/progress/progress.wxml
@@ -2,7 +2,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 <wxs src="./progress.wxs" module="this" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}}">
+<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class">
   <view
     aria-role="progressbar"
     role="progressbar"
diff --git a/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..82fb2de61
--- /dev/null
+++ b/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,210 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = `
+<base>
+  <t-pull-down-refresh
+    loadingProps="{{
+      Object {
+        "size": "50rpx",
+      }
+    }}"
+    loadingTexts="{{
+      Array [
+        "下拉刷新",
+        "松手刷新",
+        "正在刷新",
+        "刷新完成",
+      ]
+    }}"
+    value="{{false}}"
+    bind:refresh="onPullDownRefresh"
+    bind:scroll="onScroll"
+  >
+    <wx-view
+      class="demo"
+    >
+      <wx-view
+        class="demo-title"
+      >
+        PullDownRefresh 下拉刷新
+      </wx-view>
+      <wx-view
+        class="demo-desc"
+      >
+        用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
+      </wx-view>
+      <wx-view
+        class="pulldown-reflesh__content"
+      >
+        <t-skeleton
+          loading="{{true}}"
+          rowCol="{{
+            Array [
+              Object {
+                "borderRadius": "24rpx",
+                "height": "342rpx",
+                "width": "100%",
+              },
+            ]
+          }}"
+        />
+        <wx-view
+          class="row"
+        >
+          <t-skeleton
+            loading="{{true}}"
+            rowCol="{{
+              Array [
+                Array [
+                  Object {
+                    "width": "327rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "width": "200rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "borderRadius": "24rpx",
+                    "size": "327rpx",
+                  },
+                ],
+              ]
+            }}"
+          />
+          <t-skeleton
+            loading="{{true}}"
+            rowCol="{{
+              Array [
+                Array [
+                  Object {
+                    "width": "327rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "width": "200rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "borderRadius": "24rpx",
+                    "size": "327rpx",
+                  },
+                ],
+              ]
+            }}"
+          />
+        </wx-view>
+        <wx-view
+          class="row"
+        >
+          <t-skeleton
+            loading="{{true}}"
+            rowCol="{{
+              Array [
+                Array [
+                  Object {
+                    "width": "327rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "width": "200rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "borderRadius": "24rpx",
+                    "size": "327rpx",
+                  },
+                ],
+              ]
+            }}"
+          />
+          <t-skeleton
+            loading="{{true}}"
+            rowCol="{{
+              Array [
+                Array [
+                  Object {
+                    "width": "327rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "width": "200rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "borderRadius": "24rpx",
+                    "size": "327rpx",
+                  },
+                ],
+              ]
+            }}"
+          />
+        </wx-view>
+        <wx-view
+          class="row"
+        >
+          <t-skeleton
+            loading="{{true}}"
+            rowCol="{{
+              Array [
+                Array [
+                  Object {
+                    "width": "327rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "width": "200rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "borderRadius": "24rpx",
+                    "size": "327rpx",
+                  },
+                ],
+              ]
+            }}"
+          />
+          <t-skeleton
+            loading="{{true}}"
+            rowCol="{{
+              Array [
+                Array [
+                  Object {
+                    "width": "327rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "width": "200rpx",
+                  },
+                ],
+                Array [
+                  Object {
+                    "borderRadius": "24rpx",
+                    "size": "327rpx",
+                  },
+                ],
+              ]
+            }}"
+          />
+        </wx-view>
+        <wx-view
+          class="text"
+        >
+          拖拽该区域演示 顶部下拉刷新
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-pull-down-refresh>
+</base>
+`;
diff --git a/src/pull-down-refresh/pull-down-refresh.wxml b/src/pull-down-refresh/pull-down-refresh.wxml
index 21b790d4e..08e0e8bdd 100644
--- a/src/pull-down-refresh/pull-down-refresh.wxml
+++ b/src/pull-down-refresh/pull-down-refresh.wxml
@@ -2,7 +2,7 @@
 
 <scroll-view
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{prefix}}-class"
+  class="{{classPrefix}} class {{prefix}}-class"
   scroll-top="{{scrollTop}}"
   bind:touchstart="onTouchStart"
   bind:touchmove="onTouchMove"
diff --git a/src/radio-group/radio-group.ts b/src/radio-group/radio-group.ts
index fbe13d8bc..14904f2b3 100644
--- a/src/radio-group/radio-group.ts
+++ b/src/radio-group/radio-group.ts
@@ -7,7 +7,7 @@ const name = `${prefix}-radio-group`;
 
 @wxComponent()
 export default class RadioGroup extends SuperComponent {
-  externalClasses = ['class', `${prefix}-class`];
+  externalClasses = [`${prefix}-class`];
 
   data = {
     prefix,
diff --git a/src/radio/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/radio/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..524dd53d7
--- /dev/null
+++ b/src/radio/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio Radio align demo works fine 1`] = `
+<align>
+  <t-radio
+    defaultChecked="{{true}}"
+    label="单选"
+    value="radio1"
+  />
+  <wx-view
+    class="block"
+  />
+  <t-radio
+    align="right"
+    defaultChecked="{{true}}"
+    label="单选"
+    value="radio2"
+  />
+</align>
+`;
+
+exports[`Radio Radio base demo works fine 1`] = `
+<base>
+  <t-radio-group
+    defaultValue="radio1"
+    bind:change="onChange"
+  >
+    <t-radio
+      label="单选"
+      value="radio1"
+    />
+    <t-radio
+      label="单选"
+      value="radio2"
+    />
+    <t-radio
+      label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选"
+      value="radio3"
+    />
+    <t-radio
+      content="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
+      label="单选"
+      value="radio4"
+    />
+  </t-radio-group>
+</base>
+`;
+
+exports[`Radio Radio card demo works fine 1`] = `
+<card>
+  <t-radio-group
+    defaultValue="radio1"
+    tClass="theme-card"
+  >
+    <t-radio
+      defaultChecked="{{true}}"
+      label="单选"
+      value="radio1"
+    />
+    <t-radio
+      label="单选"
+      value="radio2"
+    />
+    <t-radio
+      label="单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行"
+      value="radio3"
+    />
+  </t-radio-group>
+</card>
+`;
+
+exports[`Radio Radio horizontal demo works fine 1`] = `
+<horizontal>
+  <t-radio-group
+    borderless="{{true}}"
+    defaultValue="0"
+    tClass="box"
+  >
+    <t-radio
+      block="{{false}}"
+      label="单选标题"
+      value="0"
+    />
+    <t-radio
+      block="{{false}}"
+      label="单选标题"
+      value="1"
+    />
+    <t-radio
+      block="{{false}}"
+      label="上限四字"
+      value="2"
+    />
+  </t-radio-group>
+</horizontal>
+`;
+
+exports[`Radio Radio special demo works fine 1`] = `
+<special>
+  <t-radio-group
+    value="{{0}}"
+    bind:change="onChange"
+  >
+    <wx-view
+      class="card card--active"
+    >
+      <t-icon
+        name="check"
+        tClass="card__icon"
+      />
+      <t-radio
+        borderless="{{true}}"
+        content="描述信息描述信息描述信息描述信息描述信息"
+        icon="none"
+        label="单选"
+        value="{{0}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card "
+    >
+      <t-radio
+        borderless="{{true}}"
+        content="描述信息描述信息描述信息描述信息描述信息"
+        icon="none"
+        label="单选"
+        value="{{1}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card "
+    >
+      <t-radio
+        borderless="{{true}}"
+        content="描述信息描述信息描述信息描述信息描述信息"
+        icon="none"
+        label="单选"
+        value="{{2}}"
+      />
+    </wx-view>
+  </t-radio-group>
+  <wx-view
+    class="demo-desc"
+    style="margin: 48rpx 32rpx 32rpx"
+  >
+    横向卡片单选框
+  </wx-view>
+  <t-radio-group
+    tClass="horizontal-box"
+    value="{{0}}"
+    bind:change="onChange1"
+  >
+    <wx-view
+      class="card card--active"
+    >
+      <t-icon
+        name="check"
+        tClass="card__icon"
+      />
+      <t-radio
+        borderless="{{true}}"
+        icon="none"
+        label="单选"
+        value="{{0}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card "
+    >
+      <t-radio
+        borderless="{{true}}"
+        icon="none"
+        label="单选"
+        value="{{1}}"
+      />
+    </wx-view>
+    <wx-view
+      class="card "
+    >
+      <t-radio
+        borderless="{{true}}"
+        icon="none"
+        label="单选"
+        value="{{2}}"
+      />
+    </wx-view>
+  </t-radio-group>
+</special>
+`;
+
+exports[`Radio Radio status demo works fine 1`] = `
+<status>
+  <t-radio-group
+    defaultValue="radio1"
+    disabled="{{true}}"
+  >
+    <t-radio
+      label="单选"
+      value="radio1"
+    />
+    <t-radio
+      label="单选"
+      value="radio2"
+    />
+  </t-radio-group>
+</status>
+`;
+
+exports[`Radio Radio theme demo works fine 1`] = `
+<theme>
+  <t-radio
+    defaultChecked="{{true}}"
+    icon="line"
+    label="单选"
+  />
+  <wx-view
+    class="gutter"
+    style="height: 32rpx"
+  />
+  <t-radio
+    defaultChecked="{{true}}"
+    icon="dot"
+    label="单选"
+  />
+</theme>
+`;
diff --git a/src/radio/radio.wxml b/src/radio/radio.wxml
index d3d5f39e4..c9e6fd356 100644
--- a/src/radio/radio.wxml
+++ b/src/radio/radio.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [align, ['block', block]])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [align, ['block', block]])}} class {{prefix}}-class"
   disabled="{{disabled}}"
   aria-role="radio"
   aria-checked="{{checked}}"
diff --git a/src/rate/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/rate/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..972ac2855
--- /dev/null
+++ b/src/rate/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,273 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rate Rate action demo works fine 1`] = `
+<action>
+  <wx-view
+    class="demo-desc"
+  >
+    只可选全星时
+  </wx-view>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      点击或滑动
+    </wx-view>
+    <t-rate
+      value="{{3.5}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    只可选半星时
+  </wx-view>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      点击或滑动
+    </wx-view>
+    <t-rate
+      allowHalf="{{true}}"
+      defaultValue="{{3}}"
+      variant="filled"
+    />
+  </wx-view>
+</action>
+`;
+
+exports[`Rate Rate base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      实心评分
+    </wx-view>
+    <t-rate
+      value="{{3}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+</base>
+`;
+
+exports[`Rate Rate color demo works fine 1`] = `
+<color>
+  <wx-view
+    class="demo-rate custom-color"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      填充评分
+    </wx-view>
+    <t-rate
+      allowHalf="{{true}}"
+      defaultValue="{{3}}"
+      variant="filled"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      线描评分
+    </wx-view>
+    <t-rate
+      color="#00a870"
+      defaultValue="{{3}}"
+    />
+  </wx-view>
+</color>
+`;
+
+exports[`Rate Rate count demo works fine 1`] = `
+<count>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      自定义评分数量
+    </wx-view>
+    <t-rate
+      count="{{3}}"
+      value="{{2}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+</count>
+`;
+
+exports[`Rate Rate custom demo works fine 1`] = `
+<custom>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      自定义评分
+    </wx-view>
+    <t-rate
+      icon="thumb-up"
+      value="{{3}}"
+      bind:change="onChange"
+    />
+  </wx-view>
+</custom>
+`;
+
+exports[`Rate Rate show-text demo works fine 1`] = `
+<show-text>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      带描述评分
+    </wx-view>
+    <t-rate
+      data-index="{{0}}"
+      showText="{{true}}"
+      texts="{{
+        Array [
+          "1分",
+          "2分",
+          "3分",
+          "4分",
+          "5分",
+        ]
+      }}"
+      value="{{3}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      带描述评分
+    </wx-view>
+    <t-rate
+      data-index="{{1}}"
+      showText="{{true}}"
+      value="{{3}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      带描述评分
+    </wx-view>
+    <t-rate
+      data-index="{{2}}"
+      showText="{{true}}"
+      value="{{0}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+</show-text>
+`;
+
+exports[`Rate Rate size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      大尺寸 24
+    </wx-view>
+    <t-rate
+      data-index="{{0}}"
+      value="{{3}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      小尺寸 20
+    </wx-view>
+    <t-rate
+      data-index="{{1}}"
+      size="{{20}}"
+      value="{{3}}"
+      variant="filled"
+      bind:change="onChange"
+    />
+  </wx-view>
+</size>
+`;
+
+exports[`Rate Rate special demo works fine 1`] = `
+<special>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="rate-wrapper"
+    >
+      <t-rate
+        size="30"
+        value="{{4}}"
+        bind:change="onChange"
+      />
+    </wx-view>
+    <wx-view
+      class="desc desc--active"
+    >
+      可以前往
+    </wx-view>
+  </wx-view>
+</special>
+`;
+
+exports[`Rate Rate un-filled demo works fine 1`] = `
+<un-filled>
+  <wx-view
+    class="demo-rate"
+  >
+    <wx-view
+      class="demo-rate__title"
+    >
+      请点击评分
+    </wx-view>
+    <t-rate
+      value="{{3}}"
+      bind:change="onChange"
+    />
+  </wx-view>
+</un-filled>
+`;
diff --git a/src/rate/rate.wxml b/src/rate/rate.wxml
index 1d11b0df6..8b07be02e 100644
--- a/src/rate/rate.wxml
+++ b/src/rate/rate.wxml
@@ -1,7 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 <wxs src="./rate.wxs" module="utils" />
 
-<view class="{{classPrefix}}" style="{{_._style([style, customStyle])}}">
+<view class="{{classPrefix}} class" style="{{_._style([style, customStyle])}}">
   <view
     class="{{classPrefix}}__wrapper {{prefix}}-class"
     style="font-size:{{ utils.regSize(size) }}"
diff --git a/src/result/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/result/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..48f613fe6
--- /dev/null
+++ b/src/result/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Result Result custom demo works fine 1`] = `
+<custom>
+  <t-result
+    image="https://tdesign.gtimg.com/miniprogram/images/result-image.png"
+    tClassImage="external-class-image"
+  >
+    <wx-view
+      slot="title"
+    >
+       自定义结果 
+    </wx-view>
+    <wx-view
+      slot="description"
+    >
+       描述文字 
+    </wx-view>
+  </t-result>
+</custom>
+`;
+
+exports[`Result Result description demo works fine 1`] = `
+<description>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="success"
+        title="成功状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="error"
+        title="失败状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="warning"
+        title="警示状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="default"
+        title="默认状态"
+      />
+    </wx-view>
+  </wx-view>
+</description>
+`;
+
+exports[`Result Result theme demo works fine 1`] = `
+<theme>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        theme="success"
+        title="成功状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        theme="error"
+        title="失败状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        theme="warning"
+        title="警示状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        theme="default"
+        title="默认状态"
+      />
+    </wx-view>
+  </wx-view>
+</theme>
+`;
diff --git a/src/result/result.wxml b/src/result/result.wxml
index 7415bd177..875bdb518 100644
--- a/src/result/result.wxml
+++ b/src/result/result.wxml
@@ -3,7 +3,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{classPrefix}}--theme-{{theme}} {{prefix}}-class"
+  class="{{classPrefix}} {{classPrefix}}--theme-{{theme}} class {{prefix}}-class"
 >
   <view aria-hidden="true" class="{{classPrefix}}__thumb">
     <t-image wx:if="{{image}}" t-class="{{prefix}}-class-image" src="{{image}}" mode="aspectFit" />
diff --git a/src/search/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..92f819f43
--- /dev/null
+++ b/src/search/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search Search base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="example-search"
+  >
+    <t-search
+      placeholder="搜索预设文案"
+      value=""
+    />
+  </wx-view>
+</base>
+`;
+
+exports[`Search Search status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="example-search"
+  >
+    <t-search
+      placeholder="搜索预设文案"
+    />
+  </wx-view>
+  <wx-view
+    class="space"
+  />
+  <wx-view
+    class="example-search"
+  >
+    <t-search
+      placeholder="搜索预设文案"
+      shape="round"
+    />
+  </wx-view>
+</status>
+`;
diff --git a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..f3abf4ef5
--- /dev/null
+++ b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`search Props :base 1`] = `
+<main>
+  <t-search
+    class="search"
+  >
+    <wx-view
+      class="class t-search t-class"
+      style=""
+    >
+      <wx-view
+        class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
+      >
+        <t-icon
+          class="t-icon t-class-left"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style="font-size: 24px;"
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-search t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+        <wx-input
+          class="t-input__keyword t-class-input"
+          confirmType="search"
+          disabled="{{false}}"
+          focus="{{false}}"
+          name="input"
+          placeholder=""
+          placeholderClass="t-search__placeholder t-search__placeholder--normal"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+        />
+      </wx-view>
+      <wx-view
+        ariaRole="button"
+        class="t-search__search-action t-class-action"
+        bind:tap="onActionClick"
+      >
+        
+    提交
+  
+      </wx-view>
+    </wx-view>
+  </t-search>
+</main>
+`;
diff --git a/src/search/search.ts b/src/search/search.ts
index 81c9fa31c..9b55bcc24 100644
--- a/src/search/search.ts
+++ b/src/search/search.ts
@@ -8,7 +8,6 @@ const name = `${prefix}-search`;
 @wxComponent()
 export default class Search extends SuperComponent {
   externalClasses = [
-    'class',
     `${prefix}-class`,
     `${prefix}-class-input-container`,
     `${prefix}-class-input`,
diff --git a/src/side-bar-item/side-bar-item.wxml b/src/side-bar-item/side-bar-item.wxml
index 135acf4d9..08a7d1be7 100644
--- a/src/side-bar-item/side-bar-item.wxml
+++ b/src/side-bar-item/side-bar-item.wxml
@@ -3,7 +3,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
-  class="{{_.cls(classPrefix, [['active', active], ['disabled', disabled]])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [['active', active], ['disabled', disabled]])}} class {{prefix}}-class"
   style="{{_._style([style, customStyle])}}"
   bind:tap="handleClick"
   aria-role="button"
diff --git a/src/side-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/side-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..c7bd01d42
--- /dev/null
+++ b/src/side-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,2073 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SideBar SideBar base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="side-bar-wrapper"
+  >
+    <t-side-bar
+      value="{{1}}"
+      bind:change="onSideBarChange"
+    >
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        label="选项一"
+        value="{{0}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "dot": true,
+          }
+        }}"
+        label="选项二"
+        value="{{1}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        label="选项三"
+        value="{{2}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "count": 6,
+          }
+        }}"
+        label="选项四"
+        value="{{3}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        label="选项五"
+        value="{{4}}"
+      />
+    </t-side-bar>
+    <wx-scroll-view
+      class="content"
+      scrollTop="{{0}}"
+      scrollWithAnimation="{{true}}"
+      scrollY="{{true}}"
+      bind:scroll="onScroll"
+    >
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题一
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题二
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题三
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题四
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题五
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+    </wx-scroll-view>
+  </wx-view>
+</base>
+`;
+
+exports[`SideBar SideBar custom demo works fine 1`] = `
+<custom>
+  <wx-view
+    class="side-bar-wrapper"
+  >
+    <t-side-bar
+      value="{{1}}"
+      bind:change="onSideBarChange"
+    >
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        label="选项一"
+        value="{{0}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "dot": true,
+          }
+        }}"
+        label="选项二"
+        value="{{1}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        label="选项三"
+        value="{{2}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "count": 6,
+          }
+        }}"
+        label="选项四"
+        value="{{3}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        label="选项五"
+        value="{{4}}"
+      />
+    </t-side-bar>
+    <wx-scroll-view
+      class="content"
+      scrollTop="{{0}}"
+      scrollWithAnimation="{{true}}"
+      scrollY="{{true}}"
+      bind:scroll="onScroll"
+    >
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题一
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题二
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题三
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题四
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题五
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+    </wx-scroll-view>
+  </wx-view>
+</custom>
+`;
+
+exports[`SideBar SideBar switch demo works fine 1`] = `
+<wx-switch>
+  <wx-view
+    class="side-bar-wrapper"
+  >
+    <t-side-bar
+      value="{{1}}"
+      bind:change="onSideBarChange"
+    >
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        disabled=""
+        label="选项一"
+        value="{{0}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "dot": true,
+          }
+        }}"
+        disabled=""
+        label="选项二"
+        value="{{1}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        disabled=""
+        label="选项三"
+        value="{{2}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "count": 8,
+          }
+        }}"
+        disabled=""
+        label="选项四"
+        value="{{3}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        disabled="{{true}}"
+        label="选项五"
+        value="{{4}}"
+      />
+    </t-side-bar>
+    <wx-view
+      class="content"
+      style="transform: translateY(-100%)"
+    >
+      <wx-scroll-view
+        class="section"
+        scrollWithAnimation="{{true}}"
+        scrollY="{{true}}"
+        showScrollbar="{{false}}"
+      >
+        <wx-view
+          class="title"
+        >
+          标题一
+        </wx-view>
+        <t-cell-group>
+          <t-cell
+            title="标题文字0"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字1"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字2"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字3"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字4"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字5"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字6"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字7"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字8"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字9"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字10"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字11"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+        </t-cell-group>
+      </wx-scroll-view>
+      <wx-scroll-view
+        class="section"
+        scrollWithAnimation="{{true}}"
+        scrollY="{{true}}"
+        showScrollbar="{{false}}"
+      >
+        <wx-view
+          class="title"
+        >
+          标题二
+        </wx-view>
+        <t-cell-group>
+          <t-cell
+            title="标题文字0"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字1"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字2"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字3"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字4"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字5"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字6"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字7"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字8"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字9"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+        </t-cell-group>
+      </wx-scroll-view>
+      <wx-scroll-view
+        class="section"
+        scrollWithAnimation="{{true}}"
+        scrollY="{{true}}"
+        showScrollbar="{{false}}"
+      >
+        <wx-view
+          class="title"
+        >
+          标题三
+        </wx-view>
+        <t-cell-group>
+          <t-cell
+            title="标题文字0"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字1"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字2"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字3"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字4"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字5"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+        </t-cell-group>
+      </wx-scroll-view>
+      <wx-scroll-view
+        class="section"
+        scrollWithAnimation="{{true}}"
+        scrollY="{{true}}"
+        showScrollbar="{{false}}"
+      >
+        <wx-view
+          class="title"
+        >
+          标题四
+        </wx-view>
+        <t-cell-group>
+          <t-cell
+            title="标题文字0"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字1"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字2"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字3"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字4"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字5"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字6"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+          <t-cell
+            title="标题文字7"
+          >
+            <t-image
+              lazy="{{true}}"
+              shape="round"
+              slot="image"
+              src="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+              tClass="image"
+            />
+          </t-cell>
+        </t-cell-group>
+      </wx-scroll-view>
+      <wx-scroll-view
+        class="section"
+        scrollWithAnimation="{{true}}"
+        scrollY="{{true}}"
+        showScrollbar="{{false}}"
+      >
+        <wx-view
+          class="title"
+        >
+          标题五
+        </wx-view>
+        <t-cell-group />
+      </wx-scroll-view>
+    </wx-view>
+  </wx-view>
+</wx-switch>
+`;
+
+exports[`SideBar SideBar with-icon demo works fine 1`] = `
+<with-icon>
+  <wx-view
+    class="side-bar-wrapper"
+  >
+    <t-side-bar
+      value="{{1}}"
+      bind:change="onSideBarChange"
+    >
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        icon="app"
+        label="选项一"
+        value="{{0}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "dot": true,
+          }
+        }}"
+        icon="app"
+        label="选项二"
+        value="{{1}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        icon="app"
+        label="选项三"
+        value="{{2}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{
+          Object {
+            "count": 6,
+          }
+        }}"
+        icon="app"
+        label="选项四"
+        value="{{3}}"
+      />
+      <t-side-bar-item
+        badgeProps="{{Object {}}}"
+        icon="app"
+        label="选项五"
+        value="{{4}}"
+      />
+    </t-side-bar>
+    <wx-scroll-view
+      class="content"
+      scrollTop="{{0}}"
+      scrollWithAnimation="{{true}}"
+      scrollY="{{true}}"
+      bind:scroll="onScroll"
+    >
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题一
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题二
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题三
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题四
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+      <wx-view
+        class="section"
+      >
+        <wx-view
+          class="title"
+        >
+          标题五
+        </wx-view>
+        <t-grid
+          border="{{false}}"
+          column="{{3}}"
+        >
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+          <t-grid-item
+            image="https://tdesign.gtimg.com/miniprogram/images/example2.png"
+            imageProps="{{
+              Object {
+                "lazy": true,
+                "shape": "round",
+              }
+            }}"
+            text="标题文字"
+          />
+        </t-grid>
+      </wx-view>
+    </wx-scroll-view>
+  </wx-view>
+</with-icon>
+`;
diff --git a/src/side-bar/side-bar.wxml b/src/side-bar/side-bar.wxml
index c7458979a..b251c7fa3 100644
--- a/src/side-bar/side-bar.wxml
+++ b/src/side-bar/side-bar.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view class="{{classPrefix}} {{prefix}}-class" style="{{_._style([style, customStyle])}}">
+<view class="{{classPrefix}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}">
   <slot />
   <view class="{{classPrefix}}__padding"></view>
 </view>
diff --git a/src/skeleton/__test__/__snapshots__/index.test.js.snap b/src/skeleton/__test__/__snapshots__/index.test.js.snap
index b0b6de149..129491bfe 100644
--- a/src/skeleton/__test__/__snapshots__/index.test.js.snap
+++ b/src/skeleton/__test__/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ exports[`skeleton Props :inner rowCol 1`] = `
     class="skeleton"
   >
     <wx-view
-      class="t-skeleton t-class "
+      class="t-skeleton class t-class "
       style=""
     >
       <wx-view
@@ -44,7 +44,7 @@ exports[`skeleton Props :text rowCol 1`] = `
     class="skeleton"
   >
     <wx-view
-      class="t-skeleton t-class "
+      class="t-skeleton class t-class "
       style=""
     >
       <wx-view
@@ -106,7 +106,7 @@ exports[`skeleton Props :text rowCol2 1`] = `
     class="skeleton"
   >
     <wx-view
-      class="t-skeleton t-class "
+      class="t-skeleton class t-class "
       style=""
     >
       <wx-view
diff --git a/src/skeleton/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/skeleton/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..a855e9ad7
--- /dev/null
+++ b/src/skeleton/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,277 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton Skeleton animation demo works fine 1`] = `
+<animation>
+  <wx-view>
+    <wx-view
+      class="demo-section__desc"
+    >
+      渐变加载效果
+    </wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-skeleton
+        animation="gradient"
+        loading="{{true}}"
+        theme="paragraph"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__desc"
+    >
+      闪烁加载效果
+    </wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-skeleton
+        animation="flashed"
+        loading="{{true}}"
+        theme="paragraph"
+      />
+    </wx-view>
+  </wx-view>
+</animation>
+`;
+
+exports[`Skeleton Skeleton cell-group demo works fine 1`] = `
+<cell-group>
+  <wx-view
+    class="group"
+  >
+    <t-skeleton
+      class="group-avatar"
+      loading="{{true}}"
+      rowCol="{{
+        Array [
+          Object {
+            "size": "48px",
+            "type": "circle",
+          },
+        ]
+      }}"
+    />
+    <t-skeleton
+      class="group-content"
+      loading="{{true}}"
+      rowCol="{{
+        Array [
+          Object {
+            "width": "50%",
+          },
+          Object {
+            "width": "100%",
+          },
+        ]
+      }}"
+    />
+  </wx-view>
+  <wx-view
+    class="group"
+  >
+    <t-skeleton
+      class="group-avatar"
+      loading="{{true}}"
+      rowCol="{{
+        Array [
+          Object {
+            "size": "48px",
+            "type": "rect",
+          },
+        ]
+      }}"
+    />
+    <t-skeleton
+      class="group-content"
+      loading="{{true}}"
+      rowCol="{{
+        Array [
+          Object {
+            "width": "50%",
+          },
+          Object {
+            "width": "100%",
+          },
+        ]
+      }}"
+    />
+  </wx-view>
+</cell-group>
+`;
+
+exports[`Skeleton Skeleton grid demo works fine 1`] = `
+<grid>
+  <wx-view
+    class="wrapper"
+  >
+    <t-skeleton
+      loading="{{true}}"
+      rowCol="{{
+        Array [
+          Array [
+            Object {
+              "borderRadius": "6px",
+              "height": "48px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "6px",
+              "height": "48px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "6px",
+              "height": "48px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "6px",
+              "height": "48px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "6px",
+              "height": "48px",
+              "width": "48px",
+            },
+          ],
+          Array [
+            Object {
+              "borderRadius": "3px",
+              "height": "16px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "3px",
+              "height": "16px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "3px",
+              "height": "16px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "3px",
+              "height": "16px",
+              "width": "48px",
+            },
+            Object {
+              "borderRadius": "3px",
+              "height": "16px",
+              "width": "48px",
+            },
+          ],
+        ]
+      }}"
+    />
+  </wx-view>
+</grid>
+`;
+
+exports[`Skeleton Skeleton image-group demo works fine 1`] = `
+<image-group>
+  <wx-view
+    class="group"
+  >
+    <t-skeleton
+      loading="{{true}}"
+      rowCol="{{
+        Array [
+          Object {
+            "borderRadius": "12px",
+            "size": "163.5px",
+          },
+          1,
+          Object {
+            "width": "61%",
+          },
+        ]
+      }}"
+    />
+    <t-skeleton
+      loading="{{true}}"
+      rowCol="{{
+        Array [
+          Object {
+            "borderRadius": "12px",
+            "size": "163.5px",
+          },
+          1,
+          Object {
+            "width": "61%",
+          },
+        ]
+      }}"
+    />
+  </wx-view>
+</image-group>
+`;
+
+exports[`Skeleton Skeleton theme demo works fine 1`] = `
+<theme>
+  <wx-view>
+    <wx-view
+      class="demo-section__desc"
+    >
+      头像骨架屏
+    </wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-skeleton
+        loading="{{true}}"
+        theme="avatar"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__desc"
+    >
+      图片骨架屏
+    </wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-skeleton
+        loading="{{true}}"
+        theme="image"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__desc"
+    >
+      文本骨架屏
+    </wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-skeleton
+        loading="{{true}}"
+        theme="text"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__desc"
+    >
+      段落骨架屏
+    </wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-skeleton
+        loading="{{true}}"
+        theme="paragraph"
+      />
+    </wx-view>
+  </wx-view>
+</theme>
+`;
diff --git a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..129491bfe
--- /dev/null
+++ b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`skeleton Props :inner rowCol 1`] = `
+<main>
+  <t-skeleton
+    class="skeleton"
+  >
+    <wx-view
+      class="t-skeleton class t-class "
+      style=""
+    >
+      <wx-view
+        class="t-skeleton__content"
+      >
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:24%;height:32rpx;margin-right:32rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:76%;height:32rpx"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="height:16px"
+          />
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-skeleton>
+</main>
+`;
+
+exports[`skeleton Props :text rowCol 1`] = `
+<main>
+  <t-skeleton
+    class="skeleton"
+  >
+    <wx-view
+      class="t-skeleton class t-class "
+      style=""
+    >
+      <wx-view
+        class="t-skeleton__content"
+      >
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:686rpx;height:32rpx"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="height:16px"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="height:16px"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:440rpx;height:16px"
+          />
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-skeleton>
+</main>
+`;
+
+exports[`skeleton Props :text rowCol2 1`] = `
+<main>
+  <t-skeleton
+    class="skeleton"
+  >
+    <wx-view
+      class="t-skeleton class t-class "
+      style=""
+    >
+      <wx-view
+        class="t-skeleton__content"
+      >
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:343px;height:16px"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="height:16px"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="height:16px"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:14px;height:16px;margin-right:10px;margin-left:10px"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:small;height:small"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:220px;height:16px"
+          />
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-skeleton>
+</main>
+`;
diff --git a/src/skeleton/skeleton.wxml b/src/skeleton/skeleton.wxml
index 8950a8c1c..4cb7141ab 100644
--- a/src/skeleton/skeleton.wxml
+++ b/src/skeleton/skeleton.wxml
@@ -1,7 +1,7 @@
 <wxs src="./skeleton.wxs" module="this" />
 <wxs src="../common/utils.wxs" module="_" />
 
-<view wx:if="{{ loading }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class ">
+<view wx:if="{{ loading }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class ">
   <view wx:if="{{ parsedRowcols.length }}" class="{{classPrefix}}__content">
     <view
       wx:for="{{parsedRowcols}}"
@@ -21,6 +21,6 @@
     </view>
   </view>
 </view>
-<view wx:else class="{{classPrefix}}__content">
+<view wx:else class="class {{classPrefix}}__content">
   <slot />
 </view>
diff --git a/src/slider/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/slider/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..449b41ed5
--- /dev/null
+++ b/src/slider/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,243 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider Slider base demo works fine 1`] = `
+<base>
+  <t-slider
+    defaultValue="{{23}}"
+  />
+</base>
+`;
+
+exports[`Slider Slider capsule demo works fine 1`] = `
+<capsule>
+  <t-slider
+    defaultValue="{{30}}"
+    theme="capsule"
+  />
+  <t-slider
+    defaultValue="{{
+      Array [
+        40,
+        60,
+      ]
+    }}"
+    range="{{true}}"
+    theme="capsule"
+  />
+  <t-slider
+    defaultValue="{{
+      Array [
+        40,
+        60,
+      ]
+    }}"
+    label="\${value}"
+    range="{{true}}"
+    theme="capsule"
+  />
+  <t-slider
+    defaultValue="{{60}}"
+    marks="{{
+      Object {
+        "0": "0",
+        "100": "100",
+        "20": "20",
+        "40": "40",
+        "60": "60",
+        "80": "80",
+      }
+    }}"
+    step="{{20}}"
+    theme="capsule"
+  />
+  <t-slider
+    defaultValue="{{
+      Array [
+        20,
+        80,
+      ]
+    }}"
+    marks="{{
+      Object {
+        "0": "0",
+        "100": "100",
+        "20": "20",
+        "40": "40",
+        "60": "60",
+        "80": "80",
+      }
+    }}"
+    range="{{true}}"
+    step="{{20}}"
+    theme="capsule"
+  />
+</capsule>
+`;
+
+exports[`Slider Slider disabled demo works fine 1`] = `
+<disabled>
+  <t-slider
+    disabled="{{true}}"
+    value="{{35}}"
+  />
+  <wx-view
+    class="wrapper"
+  >
+    <t-slider
+      disabled="{{true}}"
+      label="\${value}"
+      range="{{true}}"
+      showExtremeValue="{{true}}"
+      value="{{
+        Array [
+          40,
+          60,
+        ]
+      }}"
+    />
+  </wx-view>
+  <wx-view
+    class="wrapper"
+  >
+    <t-slider
+      disabled="{{true}}"
+      marks="{{
+        Object {
+          "0": "0",
+          "100": "100",
+          "20": "20",
+          "40": "40",
+          "60": "60",
+          "80": "80",
+        }
+      }}"
+      range="{{true}}"
+      step="{{20}}"
+      value="{{
+        Array [
+          20,
+          60,
+        ]
+      }}"
+    />
+  </wx-view>
+</disabled>
+`;
+
+exports[`Slider Slider label demo works fine 1`] = `
+<wx-label>
+  <wx-view
+    class="wrapper"
+  >
+    <t-slider
+      label="\${value}"
+      value="{{35}}"
+      bind:change="handleChange"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    带数值双游标滑块
+  </wx-view>
+  <wx-view
+    class="wrapper"
+  >
+    <t-slider
+      defaultValue="{{
+        Array [
+          40,
+          60,
+        ]
+      }}"
+      label="\${value}"
+      range="{{true}}"
+      showExtremeValue="{{true}}"
+    />
+  </wx-view>
+</wx-label>
+`;
+
+exports[`Slider Slider max demo works fine 1`] = `
+<max>
+  <t-slider
+    colors="{{
+      Array [
+        "#0052D9",
+        "#E7E7E7",
+      ]
+    }}"
+    defaultValue="30"
+    label="{{true}}"
+    max="{{200}}"
+    min="{{30}}"
+  />
+</max>
+`;
+
+exports[`Slider Slider range demo works fine 1`] = `
+<range>
+  <t-slider
+    defaultValue="{{
+      Array [
+        35,
+        65,
+      ]
+    }}"
+    range="{{true}}"
+  />
+</range>
+`;
+
+exports[`Slider Slider step demo works fine 1`] = `
+<step>
+  <wx-view
+    class="wrapper"
+  >
+    <t-slider
+      defaultValue="{{60}}"
+      marks="{{
+        Object {
+          "0": "0",
+          "100": "100",
+          "20": "20",
+          "40": "40",
+          "60": "60",
+          "80": "80",
+        }
+      }}"
+      step="{{20}}"
+      bind:change="handleChange"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    带刻度双游标滑块
+  </wx-view>
+  <wx-view
+    class="wrapper"
+  >
+    <t-slider
+      defaultValue="{{
+        Array [
+          20,
+          60,
+        ]
+      }}"
+      marks="{{
+        Object {
+          "0": "0",
+          "100": "100",
+          "20": "20",
+          "40": "40",
+          "60": "60",
+          "80": "80",
+        }
+      }}"
+      range="{{true}}"
+      step="{{20}}"
+    />
+  </wx-view>
+</step>
+`;
diff --git a/src/slider/slider.ts b/src/slider/slider.ts
index 9d1ab1b47..0754fc177 100644
--- a/src/slider/slider.ts
+++ b/src/slider/slider.ts
@@ -35,7 +35,6 @@ interface boundingClientRect {
 @wxComponent()
 export default class Slider extends SuperComponent {
   externalClasses = [
-    'class',
     `${prefix}-class`,
     `${prefix}-class-bar`,
     `${prefix}-class-bar-active`,
diff --git a/src/step-item/step-item.wxml b/src/step-item/step-item.wxml
index 29d84c88b..aaeec4684 100644
--- a/src/step-item/step-item.wxml
+++ b/src/step-item/step-item.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} class {{prefix}}-class"
   bind:tap="onTap"
 >
   <!-- icon  -->
diff --git a/src/stepper/__test__/__snapshots__/index.test.js.snap b/src/stepper/__test__/__snapshots__/index.test.js.snap
index 7eb2b40e0..24d454a7f 100644
--- a/src/stepper/__test__/__snapshots__/index.test.js.snap
+++ b/src/stepper/__test__/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`stepper event : input 1`] = `
 <wx-view
-  class="t-stepper t-stepper--medium t-class"
+  class="t-stepper t-stepper--medium class t-class"
   style=""
 >
   <wx-view
@@ -72,7 +72,7 @@ exports[`stepper event : input 1`] = `
 
 exports[`stepper event : input 2`] = `
 <wx-view
-  class="t-stepper t-stepper--medium t-class"
+  class="t-stepper t-stepper--medium class t-class"
   style=""
 >
   <wx-view
diff --git a/src/stepper/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/stepper/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..8cea7b6e8
--- /dev/null
+++ b/src/stepper/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stepper Stepper base demo works fine 1`] = `
+<base>
+  <wx-view
+    class="stepper-example"
+  >
+    <t-stepper
+      defaultValue="3"
+      theme="filled"
+    />
+  </wx-view>
+</base>
+`;
+
+exports[`Stepper Stepper min-max demo works fine 1`] = `
+<min-max>
+  <wx-view
+    class="stepper-example"
+  >
+    <t-stepper
+      defaultValue="0"
+      theme="filled"
+    />
+    <t-stepper
+      defaultValue="99"
+      max="999"
+      min="5"
+      theme="filled"
+    />
+    <t-stepper
+      defaultValue="999"
+      max="999"
+      theme="filled"
+    />
+  </wx-view>
+</min-max>
+`;
+
+exports[`Stepper Stepper size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="stepper-example"
+  >
+    <t-stepper
+      size="large"
+      theme="filled"
+      value="{{3}}"
+      bind:change="handleChange"
+    />
+    <t-stepper
+      defaultValue="3"
+      max="99"
+      theme="filled"
+    />
+    <t-stepper
+      defaultValue="3"
+      size="small"
+      theme="filled"
+    />
+  </wx-view>
+</size>
+`;
+
+exports[`Stepper Stepper status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="stepper-example"
+  >
+    <t-stepper
+      disabled="{{true}}"
+      theme="filled"
+    />
+  </wx-view>
+</status>
+`;
+
+exports[`Stepper Stepper theme demo works fine 1`] = `
+<theme>
+  <wx-view
+    class="stepper-example"
+  >
+    <t-stepper
+      defaultValue="3"
+      theme="filled"
+    />
+    <t-stepper
+      defaultValue="3"
+      theme="outline"
+    />
+    <t-stepper
+      defaultValue="3"
+    />
+  </wx-view>
+</theme>
+`;
diff --git a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..24d454a7f
--- /dev/null
+++ b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stepper event : input 1`] = `
+<wx-view
+  class="t-stepper t-stepper--medium class t-class"
+  style=""
+>
+  <wx-view
+    ariaDisabled="{{false}}"
+    ariaLabel="减少2"
+    ariaRole="button"
+    class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
+    catch:tap="minusValue"
+  >
+    <t-icon
+      class="t-stepper__minus-icon"
+    >
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
+  </wx-view>
+  <wx-view
+    class="t-stepper__input--normal "
+  >
+    <wx-input
+      class="t-stepper__input t-stepper__input--medium t-class-input"
+      disabled="{{false}}"
+      style=""
+      type="number"
+      value="{{4}}"
+      catch:blur="blurHandle"
+      catch:focus="focusHandle"
+      catch:input="inputHandle"
+    />
+  </wx-view>
+  <wx-view
+    ariaDisabled="{{false}}"
+    ariaLabel="增加2"
+    ariaRole="button"
+    class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
+    catch:tap="plusValue"
+  >
+    <t-icon
+      class="t-stepper__plus-icon"
+    >
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
+  </wx-view>
+</wx-view>
+`;
+
+exports[`stepper event : input 2`] = `
+<wx-view
+  class="t-stepper t-stepper--medium class t-class"
+  style=""
+>
+  <wx-view
+    ariaDisabled="{{false}}"
+    ariaLabel="减少2"
+    ariaRole="button"
+    class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
+    catch:tap="minusValue"
+  >
+    <t-icon
+      class="t-stepper__minus-icon"
+    >
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
+  </wx-view>
+  <wx-view
+    class="t-stepper__input--normal "
+  >
+    <wx-input
+      class="t-stepper__input t-stepper__input--medium t-class-input"
+      disabled="{{false}}"
+      style=""
+      type="number"
+      value="{{4}}"
+      catch:blur="blurHandle"
+      catch:focus="focusHandle"
+      catch:input="inputHandle"
+    />
+  </wx-view>
+  <wx-view
+    ariaDisabled="{{false}}"
+    ariaLabel="增加2"
+    ariaRole="button"
+    class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
+    catch:tap="plusValue"
+  >
+    <t-icon
+      class="t-stepper__plus-icon"
+    >
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
+  </wx-view>
+</wx-view>
+`;
diff --git a/src/stepper/stepper.wxml b/src/stepper/stepper.wxml
index 8f1486bf3..2e5dbfb6d 100644
--- a/src/stepper/stepper.wxml
+++ b/src/stepper/stepper.wxml
@@ -1,6 +1,9 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{classPrefix}}--{{size}} {{prefix}}-class">
+<view
+  style="{{_._style([style, customStyle])}}"
+  class="{{classPrefix}} {{classPrefix}}--{{size}} class {{prefix}}-class"
+>
   <view
     class="{{classPrefix}}__minus {{classPrefix}}__minus--{{theme}} {{classPrefix}}__icon--{{size}} {{ disabled || disableMinus || currentValue <= min ? classPrefix + '--' + theme + '-disabled': ''}} {{prefix}}-class-minus"
     catchtap="minusValue"
diff --git a/src/steps/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/steps/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..53c0744ff
--- /dev/null
+++ b/src/steps/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,430 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Steps Steps horizontal demo works fine 1`] = `
+<horizontal>
+  <wx-view
+    class="demo-desc"
+  >
+    水平带序号步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      bind:change="onFirstChange"
+    >
+      <t-step-item
+        content="辅助信息"
+        title="已完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="当前步骤"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+    </t-steps>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    水平带图标步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      bind:change="onSecondChange"
+    >
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="已完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="当前步骤"
+      />
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="未完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="未完成"
+      />
+    </t-steps>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    水平简略步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      theme="dot"
+      bind:change="onThirdChange"
+    >
+      <t-step-item
+        content="辅助信息"
+        title="已完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="当前步骤"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+    </t-steps>
+  </wx-view>
+</horizontal>
+`;
+
+exports[`Steps Steps special demo works fine 1`] = `
+<special>
+  <wx-view
+    class="demo-desc"
+  >
+    垂直自定义步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{3}}"
+      layout="vertical"
+      theme="dot"
+      bind:change="onCascader"
+    >
+      <t-step-item
+        title="已完成步骤"
+      >
+        <t-icon
+          color="rgba(0, 0, 0, .4)"
+          name="chevron-right"
+          size="22"
+          slot="title-right"
+        />
+      </t-step-item>
+      <t-step-item
+        title="已完成步骤"
+      >
+        <t-icon
+          color="rgba(0, 0, 0, .4)"
+          name="chevron-right"
+          size="22"
+          slot="title-right"
+        />
+      </t-step-item>
+      <t-step-item
+        title="已完成步骤"
+      >
+        <t-icon
+          color="rgba(0, 0, 0, .4)"
+          name="chevron-right"
+          size="22"
+          slot="title-right"
+        />
+      </t-step-item>
+      <t-step-item
+        title="当前步骤"
+      >
+        <t-icon
+          color="rgba(0, 0, 0, .4)"
+          name="chevron-right"
+          size="22"
+          slot="title-right"
+        />
+      </t-step-item>
+    </t-steps>
+    <t-button
+      block="{{true}}"
+      style="margin-top: 32rpx; display: block"
+      bind:tap="toNext"
+    >
+      下一步
+    </t-button>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    纯展示步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{5}}"
+      layout="vertical"
+      readonly="{{true}}"
+      theme="dot"
+    >
+      <t-step-item
+        content="可自定义此处内容"
+        title="步骤展示"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="步骤展示"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="步骤展示"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="步骤展示"
+      />
+    </t-steps>
+  </wx-view>
+</special>
+`;
+
+exports[`Steps Steps status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      currentStatus="error"
+      bind:change="onFirstChange"
+    >
+      <t-step-item
+        content="辅助信息"
+        title="已完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="错误步骤"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+    </t-steps>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      currentStatus="error"
+      bind:change="onSecondChange"
+    >
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="已完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="错误步骤"
+      />
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="未完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        icon="cart"
+        title="未完成"
+      />
+    </t-steps>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      currentStatus="error"
+      theme="dot"
+      bind:change="onThirdChange"
+    >
+      <t-step-item
+        content="辅助信息"
+        title="已完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="错误步骤"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+      <t-step-item
+        content="辅助信息"
+        title="未完成"
+      />
+    </t-steps>
+  </wx-view>
+</status>
+`;
+
+exports[`Steps Steps vertical demo works fine 1`] = `
+<vertical>
+  <wx-view
+    class="demo-desc"
+  >
+    垂直带序号步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      layout="vertical"
+      bind:change="onFirstChange"
+    >
+      <t-step-item
+        content="可自定义此处内容"
+        title="已完成步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="当前步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="未完成步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="未完成步骤"
+      />
+    </t-steps>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    垂直带图标步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      layout="vertical"
+      bind:change="onSecondChange"
+    >
+      <t-step-item
+        content="可自定义此处内容"
+        icon="cart"
+        title="已完成步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        icon="cart"
+        title="当前步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        icon="cart"
+        title="未完成步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        icon="cart"
+        title="未完成步骤"
+      />
+    </t-steps>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    垂直简略步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      layout="vertical"
+      theme="dot"
+      bind:change="onThirdChange"
+    >
+      <t-step-item
+        content="可自定义此处内容"
+        title="已完成步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="当前步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="未完成步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="未完成步骤"
+      />
+    </t-steps>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    垂直带自定义内容步骤条
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-steps
+      current="{{1}}"
+      layout="vertical"
+      bind:change="onThirdChange"
+    >
+      <t-step-item
+        content="可自定义此处内容"
+        title="已完成步骤"
+      />
+      <t-step-item
+        content="可自定义此处内容"
+        title="当前步骤"
+      >
+        <wx-view
+          slot="extra"
+        >
+          <wx-image
+            alt="图标"
+            mode="widthFix"
+            src="https://tdesign.gtimg.com/miniprogram/images/steps1.png"
+            style="width: 100%"
+          />
+        </wx-view>
+      </t-step-item>
+      <t-step-item
+        content="可自定义此处内容"
+        title="未完成步骤"
+      />
+    </t-steps>
+  </wx-view>
+</vertical>
+`;
diff --git a/src/steps/steps.wxml b/src/steps/steps.wxml
index 2d2ea733a..b2c24b1d5 100644
--- a/src/steps/steps.wxml
+++ b/src/steps/steps.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} class {{prefix}}-class"
 >
   <slot />
 </view>
diff --git a/src/sticky/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/sticky/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..d4880de69
--- /dev/null
+++ b/src/sticky/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sticky Sticky base demo works fine 1`] = `
+<base>
+  <t-sticky>
+    <t-button
+      size="large"
+      tClass="external-class"
+      theme="primary"
+    >
+      基础吸顶
+    </t-button>
+  </t-sticky>
+</base>
+`;
+
+exports[`Sticky Sticky container demo works fine 1`] = `
+<container>
+  <wx-view
+    class="wrapper"
+  >
+    <t-sticky
+      container="{{[Function]}}"
+    >
+      <t-button
+        size="large"
+        tClass="external-class green-button"
+      >
+        指定容器
+      </t-button>
+    </t-sticky>
+  </wx-view>
+</container>
+`;
+
+exports[`Sticky Sticky offset demo works fine 1`] = `
+<offset>
+  <t-sticky
+    offsetTop="{{40}}"
+  >
+    <t-button
+      size="large"
+      tClass="external-class"
+      theme="danger"
+    >
+      吸顶距离
+    </t-button>
+  </t-sticky>
+</offset>
+`;
diff --git a/src/sticky/sticky.wxml b/src/sticky/sticky.wxml
index 4ab4a2dd7..8f0181cbb 100644
--- a/src/sticky/sticky.wxml
+++ b/src/sticky/sticky.wxml
@@ -1,7 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
-  class="{{classPrefix}} {{prefix}}-class"
+  class="{{classPrefix}} class {{prefix}}-class"
   style="{{_._style(['z-index:' + zIndex, containerStyle, style, customStyle])}}"
 >
   <view class="{{classPrefix}}__content" style="z-index:{{ zIndex }};{{ contentStyle }}">
diff --git a/src/swipe-cell/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/swipe-cell/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..2313fb8c5
--- /dev/null
+++ b/src/swipe-cell/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwipeCell SwipeCell double demo works fine 1`] = `
+<double>
+  <t-swipe-cell
+    left="{{
+      Array [
+        Object {
+          "className": "btn favor-btn",
+          "text": "选择",
+        },
+      ]
+    }}"
+    right="{{
+      Array [
+        Object {
+          "className": "btn delete-btn",
+          "text": "删除",
+        },
+      ]
+    }}"
+    bind:click="onActionClick"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左右滑操作"
+    />
+  </t-swipe-cell>
+</double>
+`;
+
+exports[`SwipeCell SwipeCell icon demo works fine 1`] = `
+<wx-icon>
+  <t-swipe-cell
+    right="{{
+      Array [
+        Object {
+          "className": "btn edit-btn",
+          "icon": Object {
+            "name": "edit",
+            "size": 16,
+          },
+          "text": "编辑",
+        },
+        Object {
+          "className": "btn delete-btn",
+          "icon": Object {
+            "name": "delete",
+            "size": 16,
+          },
+          "text": "删除",
+        },
+      ]
+    }}"
+    bind:click="onActionClick"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑-带图标文本双操作"
+    />
+  </t-swipe-cell>
+  <t-swipe-cell
+    right="{{
+      Array [
+        Object {
+          "className": "btn edit-btn",
+          "icon": "edit",
+        },
+        Object {
+          "className": "btn delete-btn",
+          "icon": "delete",
+        },
+      ]
+    }}"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑-仅带图标双操作"
+    />
+  </t-swipe-cell>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      description="一段很长很长的内容文字"
+      image="https://tdesign.gtimg.com/miniprogram/images/default.svg"
+      note="辅助信息"
+      title="左滑大列表-仅带图标双操作"
+    />
+    <wx-view
+      class="btn-wrapper"
+      slot="right"
+    >
+      <wx-view
+        class="btn edit-btn column"
+        bind:tap="onEdit"
+      >
+        <t-icon
+          class="padding-bottom"
+          name="edit"
+          size="32rpx"
+        />
+        
+      编辑
+    
+      </wx-view>
+      <wx-view
+        class="btn delete-btn column"
+        bind:tap="onDelete"
+      >
+        <t-icon
+          class="padding-bottom"
+          name="delete"
+          size="32rpx"
+        />
+        
+      删除
+    
+      </wx-view>
+    </wx-view>
+  </t-swipe-cell>
+</wx-icon>
+`;
+
+exports[`SwipeCell SwipeCell left demo works fine 1`] = `
+<left>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑单操作"
+    />
+    <wx-view
+      class="btn delete-btn"
+      slot="right"
+      bind:tap="onDelete"
+    >
+      删除
+    </wx-view>
+  </t-swipe-cell>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      description="一段很长很长的内容文字"
+      image="https://tdesign.gtimg.com/miniprogram/images/default.svg"
+      note="辅助信息"
+      title="左滑大列表"
+    />
+    <wx-view
+      class="btn delete-btn"
+      slot="right"
+      bind:tap="onDelete"
+    >
+      删除
+    </wx-view>
+  </t-swipe-cell>
+  <t-swipe-cell
+    right="{{
+      Array [
+        Object {
+          "className": "btn edit-btn",
+          "text": "编辑",
+        },
+        Object {
+          "className": "btn delete-btn",
+          "text": "删除",
+        },
+      ]
+    }}"
+    bind:click="onActionClick"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑双操作"
+    />
+  </t-swipe-cell>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑多操作"
+    />
+    <wx-view
+      class="btn-wrapper"
+      slot="right"
+    >
+      <wx-view
+        class="btn favor-btn"
+        bind:tap="onFavor"
+      >
+        收藏
+      </wx-view>
+      <wx-view
+        class="btn edit-btn"
+        bind:tap="onEdit"
+      >
+        编辑
+      </wx-view>
+      <wx-view
+        class="btn delete-btn"
+        bind:tap="onDelete"
+      >
+        删除
+      </wx-view>
+    </wx-view>
+  </t-swipe-cell>
+</left>
+`;
+
+exports[`SwipeCell SwipeCell right demo works fine 1`] = `
+<right>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="右滑单操作"
+    />
+    <wx-view
+      class="btn favor-btn"
+      slot="left"
+      bind:tap="onChoice"
+    >
+      选择
+    </wx-view>
+  </t-swipe-cell>
+</right>
+`;
diff --git a/src/swipe-cell/swipe-cell.wxml b/src/swipe-cell/swipe-cell.wxml
index 2f5c93adc..9b97d9142 100644
--- a/src/swipe-cell/swipe-cell.wxml
+++ b/src/swipe-cell/swipe-cell.wxml
@@ -3,7 +3,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
-  class="{{prefix}}-class {{classPrefix}}"
+  class="class {{prefix}}-class {{classPrefix}}"
   style="{{_._style([style, customStyle])}}"
   data-key="cell"
   capture-bind:tap="onTap"
diff --git a/src/swiper-nav/swiper-nav.wxml b/src/swiper-nav/swiper-nav.wxml
index 793606d3b..2067b056f 100644
--- a/src/swiper-nav/swiper-nav.wxml
+++ b/src/swiper-nav/swiper-nav.wxml
@@ -1,13 +1,17 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view wx:if="{{showControls}}" class="{{classPrefix}}__btn" style="{{_._style([style, customStyle])}}">
+<view
+  wx:if="{{showControls}}"
+  class="class {{prefix}}-class {{classPrefix}}__btn"
+  style="{{_._style([style, customStyle])}}"
+>
   <view class="{{classPrefix}}__btn--prev" bind:tap="nav" data-dir="prev" />
   <view class="{{classPrefix}}__btn--next" bind:tap="nav" data-dir="next" />
 </view>
 <view
   wx:if="{{total >= minShowNum}}"
   style="{{_._style([style, customStyle])}}"
-  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{direction}} {{classPrefix}}__{{type}} {{classPrefix}}--{{paginationPosition}}"
+  class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}--{{direction}} {{classPrefix}}__{{type}} {{classPrefix}}--{{paginationPosition}}"
 >
   <block wx:if="{{ type === 'dots' || type === 'dots-bar'}}">
     <view
diff --git a/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..b42790af9
--- /dev/null
+++ b/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,294 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swiper Swiper base demo works fine 1`] = `
+<base>
+  <t-swiper
+    autoplay="{{false}}"
+    current="{{0}}"
+    duration="{{500}}"
+    interval="{{5000}}"
+    list="{{
+      Array [
+        "https://tdesign.gtimg.com/miniprogram/images//swiper1.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper2.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper3.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper4.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper5.png",
+      ]
+    }}"
+    navigation="{{
+      Object {
+        "type": "dots",
+      }
+    }}"
+    bind:change="onChange"
+    bind:click="onTap"
+  />
+</base>
+`;
+
+exports[`Swiper Swiper cards demo works fine 1`] = `
+<cards>
+  <wx-view
+    class="card-theme"
+  >
+    <t-swiper
+      autoplay="{{false}}"
+      current="{{0}}"
+      duration="{{500}}"
+      imageProps="{{
+        Object {
+          "shape": "round",
+        }
+      }}"
+      interval="{{5000}}"
+      list="{{
+        Array [
+          "https://tdesign.gtimg.com/miniprogram/images//swiper1.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper2.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper3.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper4.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper5.png",
+        ]
+      }}"
+      navigation="{{
+        Object {
+          "type": "dots",
+        }
+      }}"
+      nextMargin="34px"
+      previousMargin="34px"
+      tClassNav="card-theme-nav"
+      bind:change="onChange"
+    />
+    <wx-view
+      class="box"
+      style="height: 42px"
+    />
+    <t-swiper
+      autoplay="{{false}}"
+      class="scale-card-theme"
+      current="{{0}}"
+      duration="{{500}}"
+      imageProps="{{
+        Object {
+          "shape": "round",
+        }
+      }}"
+      interval="{{5000}}"
+      list="{{
+        Array [
+          "https://tdesign.gtimg.com/miniprogram/images//swiper1.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper2.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper3.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper4.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper5.png",
+        ]
+      }}"
+      navigation="{{
+        Object {
+          "type": "dots",
+        }
+      }}"
+      nextMargin="34px"
+      previousMargin="34px"
+      tClassNav="card-theme-nav"
+      tClassNextImage="scale-candidate"
+      tClassPrevImage="scale-candidate"
+      bind:change="onChange"
+    />
+  </wx-view>
+</cards>
+`;
+
+exports[`Swiper Swiper custom demo works fine 1`] = `
+<custom>
+  <t-swiper
+    autoplay="{{true}}"
+    current="{{1}}"
+    duration="{{500}}"
+    interval="{{5000}}"
+    list="{{
+      Array [
+        "https://tdesign.gtimg.com/miniprogram/images//swiper1.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper2.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper3.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper4.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper5.png",
+      ]
+    }}"
+    navigation="{{
+      Object {
+        "type": "dots-bar",
+      }
+    }}"
+  />
+</custom>
+`;
+
+exports[`Swiper Swiper fraction demo works fine 1`] = `
+<fraction>
+  <t-swiper
+    autoplay="{{true}}"
+    current="{{2}}"
+    duration="{{500}}"
+    interval="{{5000}}"
+    list="{{
+      Array [
+        "https://tdesign.gtimg.com/miniprogram/images//swiper1.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper2.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper3.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper4.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper5.png",
+      ]
+    }}"
+    navigation="{{
+      Object {
+        "type": "fraction",
+      }
+    }}"
+    paginationPosition="bottom-right"
+  />
+</fraction>
+`;
+
+exports[`Swiper Swiper nav-btn demo works fine 1`] = `
+<nav-btn>
+  <t-swiper
+    autoplay="{{true}}"
+    current="{{3}}"
+    duration="{{500}}"
+    interval="{{5000}}"
+    list="{{
+      Array [
+        "https://tdesign.gtimg.com/miniprogram/images//swiper1.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper2.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper3.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper4.png",
+        "https://tdesign.gtimg.com/miniprogram/images//swiper5.png",
+      ]
+    }}"
+    loop="{{false}}"
+    navigation="{{
+      Object {
+        "showControls": true,
+        "type": "",
+      }
+    }}"
+  />
+</nav-btn>
+`;
+
+exports[`Swiper Swiper vertical demo works fine 1`] = `
+<vertical>
+  <wx-view
+    class="swiper-box"
+  >
+    <t-swiper
+      autoplay="{{true}}"
+      current="{{1}}"
+      direction="vertical"
+      duration="{{500}}"
+      interval="{{5000}}"
+      list="{{
+        Array [
+          "https://tdesign.gtimg.com/miniprogram/images//swiper1.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper2.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper3.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper4.png",
+          "https://tdesign.gtimg.com/miniprogram/images//swiper5.png",
+        ]
+      }}"
+      navigation="{{
+        Object {
+          "type": "dots-bar",
+        }
+      }}"
+      paginationPosition="right"
+    />
+  </wx-view>
+  <wx-view
+    class="swiper-box swiper-box-option"
+  >
+    <wx-view
+      class="cell"
+    >
+      <wx-view
+        class="label"
+      >
+        自动播放
+      </wx-view>
+      <wx-view
+        class="option"
+      >
+        <t-switch
+          tClass="swiper-switch"
+          value="{{true}}"
+          bind:change="onAutoplayChange"
+        />
+        <wx-view
+          class="option-desc"
+        >
+          开
+        </wx-view>
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="cell"
+    >
+      <wx-view
+        class="label"
+      >
+        自动播放间隔时间(单位毫秒)
+      </wx-view>
+      <wx-view
+        class="option"
+      >
+        <t-slider
+          label=""
+          max="{{5000}}"
+          min="{{1000}}"
+          step="{{500}}"
+          tClass="swiper-slider"
+          tClassBar="external-class-bar"
+          value="{{5000}}"
+          bind:change="onIntervalChange"
+        />
+        <wx-view
+          class="option-desc"
+        >
+          5000
+        </wx-view>
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="cell"
+    >
+      <wx-view
+        class="label"
+      >
+        动画持续时间(单位毫秒)
+      </wx-view>
+      <wx-view
+        class="option"
+      >
+        <t-slider
+          label=""
+          max="{{2000}}"
+          min="{{200}}"
+          step="{{100}}"
+          tClass="swiper-slider"
+          tClassBar="external-class-bar"
+          value="{{500}}"
+          bind:change="onDurationChange"
+        />
+        <wx-view
+          class="option-desc"
+        >
+          500
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </wx-view>
+</vertical>
+`;
diff --git a/src/swiper/swiper.wxml b/src/swiper/swiper.wxml
index a6458eaf5..4f805b842 100644
--- a/src/swiper/swiper.wxml
+++ b/src/swiper/swiper.wxml
@@ -3,7 +3,7 @@
 
 <import src="../common/template/image.wxml" />
 
-<view class="{{prefix}}-class {{classPrefix}}" style="{{_._style([style, customStyle])}}">
+<view class="class {{prefix}}-class {{classPrefix}}" style="{{_._style([style, customStyle])}}">
   <swiper
     class="{{classPrefix}}-host"
     autoplay="{{autoplay}}"
diff --git a/src/switch/__test__/__snapshots__/index.test.js.snap b/src/switch/__test__/__snapshots__/index.test.js.snap
index b55125c74..4f9ce97ac 100644
--- a/src/switch/__test__/__snapshots__/index.test.js.snap
+++ b/src/switch/__test__/__snapshots__/index.test.js.snap
@@ -7,7 +7,7 @@ exports[`switch Props :base 1`] = `
       ariaChecked="{{false}}"
       ariaDisabled="{{false}}"
       ariaRole="switch"
-      class="t-class t-switch"
+      class="class t-class t-switch"
       style=""
       bind:tap="handleSwitch"
     >
diff --git a/src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..9936c08d7
--- /dev/null
+++ b/src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch Switch base demo works fine 1`] = `
+<base>
+  <t-cell
+    title="基础开关"
+  >
+    <t-switch
+      defaultValue="{{true}}"
+      slot="note"
+    />
+  </t-cell>
+</base>
+`;
+
+exports[`Switch Switch color demo works fine 1`] = `
+<color>
+  <wx-view
+    class="custom-color"
+  >
+    <t-cell
+      bordered="{{false}}"
+      title="自定义颜色开关"
+    >
+      <t-switch
+        defaultValue="{{true}}"
+        slot="note"
+      />
+    </t-cell>
+  </wx-view>
+</color>
+`;
+
+exports[`Switch Switch label demo works fine 1`] = `
+<wx-label>
+  <t-cell
+    title="带文字开关"
+  >
+    <t-switch
+      label="{{
+        Array [
+          "关",
+          "开",
+        ]
+      }}"
+      slot="note"
+      value="{{true}}"
+      bind:change="handleChange"
+    />
+  </t-cell>
+  <t-cell
+    title="带图标开关"
+  >
+    <t-switch
+      defaultValue="{{true}}"
+      icon="{{
+        Array [
+          "close",
+          "check",
+        ]
+      }}"
+      slot="note"
+    />
+  </t-cell>
+</wx-label>
+`;
+
+exports[`Switch Switch size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="group"
+  >
+    <t-cell
+      title="大尺寸 32"
+    >
+      <t-switch
+        defaultValue="{{true}}"
+        size="large"
+        slot="note"
+      />
+    </t-cell>
+    <t-cell
+      title="中尺寸 28"
+    >
+      <t-switch
+        defaultValue="{{true}}"
+        slot="note"
+      />
+    </t-cell>
+    <t-cell
+      title="小尺寸 24"
+    >
+      <t-switch
+        defaultValue="{{true}}"
+        size="small"
+        slot="note"
+      />
+    </t-cell>
+  </wx-view>
+</size>
+`;
+
+exports[`Switch Switch status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="demo-desc"
+  >
+    加载状态
+  </wx-view>
+  <wx-view
+    class="group"
+  >
+    <t-cell
+      title="加载状态"
+    >
+      <t-switch
+        defaultValue="{{false}}"
+        loading="{{true}}"
+        slot="note"
+      />
+    </t-cell>
+    <t-cell
+      title="加载状态"
+    >
+      <t-switch
+        defaultValue="{{true}}"
+        loading="{{true}}"
+        slot="note"
+      />
+    </t-cell>
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    禁用状态
+  </wx-view>
+  <wx-view
+    class="group"
+  >
+    <t-cell
+      title="禁用状态"
+    >
+      <t-switch
+        disabled="{{true}}"
+        slot="note"
+      />
+    </t-cell>
+    <t-cell
+      bordered="{{false}}"
+      title="禁用状态"
+    >
+      <t-switch
+        defaultValue="{{true}}"
+        disabled="{{true}}"
+        slot="note"
+      />
+    </t-cell>
+  </wx-view>
+</status>
+`;
diff --git a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..4f9ce97ac
--- /dev/null
+++ b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`switch Props :base 1`] = `
+<main>
+  <t-switch>
+    <wx-view
+      ariaChecked="{{false}}"
+      ariaDisabled="{{false}}"
+      ariaRole="switch"
+      class="class t-class t-switch"
+      style=""
+      bind:tap="handleSwitch"
+    >
+      <wx-view
+        class="t-switch__body t-switch__body--medium t-class-body"
+      >
+        <wx-view
+          ariaHidden="{{true}}"
+          class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
+        >
+          <wx-view
+            class="t-switch__label t-switch__label--medium t-class-label"
+          />
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-switch>
+</main>
+`;
diff --git a/src/switch/switch.wxml b/src/switch/switch.wxml
index 29bb1c666..d4e90d245 100644
--- a/src/switch/switch.wxml
+++ b/src/switch/switch.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{ prefix }}-class {{classPrefix}}"
+  class="class {{ prefix }}-class {{classPrefix}}"
   bind:tap="handleSwitch"
   aria-checked="{{checked}}"
   aria-disabled="{{disabled}}"
diff --git a/src/tab-bar-item/tab-bar-item.ts b/src/tab-bar-item/tab-bar-item.ts
index cc25d6671..1fdcda025 100644
--- a/src/tab-bar-item/tab-bar-item.ts
+++ b/src/tab-bar-item/tab-bar-item.ts
@@ -8,6 +8,8 @@ const classPrefix = `${prefix}-tab-bar-item`;
 
 @wxComponent()
 export default class TabBarItem extends SuperComponent {
+  externalClasses = [`${prefix}-class`];
+
   parent = null;
 
   relations: RelationsOptions = {
diff --git a/src/tab-bar-item/tab-bar-item.wxml b/src/tab-bar-item/tab-bar-item.wxml
index b7a954622..a12fa2cb3 100644
--- a/src/tab-bar-item/tab-bar-item.wxml
+++ b/src/tab-bar-item/tab-bar-item.wxml
@@ -3,7 +3,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [['split', split], ['text-only', !icon], ['crowded', crowded], shape])}}"
+  class="{{_.cls(classPrefix, [['split', split], ['text-only', !icon], ['crowded', crowded], shape])}} class {{prefix}}-class"
 >
   <view
     class="{{_.cls(classPrefix + '__content', [['checked', isChecked], theme])}}"
diff --git a/src/tab-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/tab-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..d644b718d
--- /dev/null
+++ b/src/tab-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,296 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabBar TabBar badge demo works fine 1`] = `
+<badge>
+  <t-tab-bar
+    defaultValue="label1"
+    split="{{false}}"
+  >
+    <t-tab-bar-item
+      badgeProps="{{
+        Object {
+          "count": 16,
+        }
+      }}"
+      icon="home"
+      value="label1"
+    >
+      首页
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      badgeProps="{{
+        Object {
+          "dot": true,
+        }
+      }}"
+      icon="app"
+      value="label2"
+    >
+      软件
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      badgeProps="{{
+        Object {
+          "count": "New",
+        }
+      }}"
+      icon="chat"
+      value="label3"
+    >
+      聊天
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      badgeProps="{{
+        Object {
+          "count": "···",
+        }
+      }}"
+      icon="user"
+      value="label4"
+    >
+      我的
+    </t-tab-bar-item>
+  </t-tab-bar>
+</badge>
+`;
+
+exports[`TabBar TabBar base demo works fine 1`] = `
+<base>
+  <t-tab-bar
+    split="{{false}}"
+    theme="tag"
+    value="label_1"
+    bind:change="onChange"
+  >
+    <t-tab-bar-item
+      icon="home"
+      value="label_1"
+    >
+      
+    首页
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      icon="app"
+      value="label_2"
+    >
+      
+    应用
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      icon="chat"
+      value="label_3"
+    >
+      
+    聊天
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      icon="user"
+      value="label_4"
+    >
+      
+    我的
+  
+    </t-tab-bar-item>
+  </t-tab-bar>
+</base>
+`;
+
+exports[`TabBar TabBar custom demo works fine 1`] = `
+<custom>
+  <wx-view
+    class="wrapper"
+  >
+    <t-tab-bar
+      value="label_1"
+      bind:change="onChange"
+    >
+      <t-tab-bar-item
+        ariaLabel="首页"
+        icon="home"
+        value="label_1"
+      />
+      <t-tab-bar-item
+        ariaLabel="软件"
+        icon="app"
+        value="label_2"
+      />
+      <t-tab-bar-item
+        ariaLabel="聊天"
+        icon="chat"
+        value="label_3"
+      />
+      <t-tab-bar-item
+        ariaLabel="我的"
+        icon="user"
+        value="label_4"
+      />
+    </t-tab-bar>
+  </wx-view>
+</custom>
+`;
+
+exports[`TabBar TabBar icon-only demo works fine 1`] = `
+<icon-only>
+  <t-tab-bar
+    split="{{false}}"
+    theme="tag"
+    value="label_1"
+    bind:change="onChange"
+  >
+    <t-tab-bar-item
+      ariaLabel="首页"
+      icon="home"
+      value="label_1"
+    />
+    <t-tab-bar-item
+      ariaLabel="软件"
+      icon="app"
+      value="label_2"
+    />
+    <t-tab-bar-item
+      ariaLabel="聊天"
+      icon="chat"
+      value="label_3"
+    />
+    <t-tab-bar-item
+      ariaLabel="我的"
+      icon="user"
+      value="label_4"
+    />
+  </t-tab-bar>
+</icon-only>
+`;
+
+exports[`TabBar TabBar round demo works fine 1`] = `
+<round>
+  <t-tab-bar
+    shape="round"
+    split="{{false}}"
+    theme="tag"
+    value="label_1"
+    bind:change="onChange"
+  >
+    <t-tab-bar-item
+      ariaLabel="首页"
+      icon="home"
+      value="label_1"
+    >
+      
+    
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      ariaLabel="软件"
+      icon="app"
+      value="label_2"
+    >
+      
+    
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      ariaLabel="聊天"
+      icon="chat"
+      value="label_3"
+    >
+      
+    
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      ariaLabel="我的"
+      icon="user"
+      value="label_4"
+    >
+      
+    
+  
+    </t-tab-bar-item>
+  </t-tab-bar>
+</round>
+`;
+
+exports[`TabBar TabBar sub demo works fine 1`] = `
+<sub>
+  <t-tab-bar
+    defaultValue="label_3"
+    split="{{false}}"
+    theme="tag"
+  >
+    <t-tab-bar-item
+      subTabBar="{{Array []}}"
+      value="home"
+    >
+      
+    首页
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      subTabBar="{{Array []}}"
+      value="app"
+    >
+      
+    应用
+  
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      subTabBar="{{
+        Array [
+          Object {
+            "label": "基本信息",
+            "value": "info",
+          },
+          Object {
+            "label": "个人主页",
+            "value": "home-page",
+          },
+          Object {
+            "label": "设置",
+            "value": "setting",
+          },
+        ]
+      }}"
+      value="user"
+    >
+      
+    我的
+  
+    </t-tab-bar-item>
+  </t-tab-bar>
+</sub>
+`;
+
+exports[`TabBar TabBar text-only demo works fine 1`] = `
+<text-only>
+  <t-tab-bar
+    split="{{false}}"
+    theme="tag"
+    value="home"
+    bind:change="onChange"
+  >
+    <t-tab-bar-item
+      value="home"
+    >
+       首页 
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      value="app"
+    >
+       应用 
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      value="chat"
+    >
+       聊天 
+    </t-tab-bar-item>
+    <t-tab-bar-item
+      value="user"
+    >
+       我的 
+    </t-tab-bar-item>
+  </t-tab-bar>
+</text-only>
+`;
diff --git a/src/tab-bar/tab-bar.wxml b/src/tab-bar/tab-bar.wxml
index 2fda39ecd..64e204363 100644
--- a/src/tab-bar/tab-bar.wxml
+++ b/src/tab-bar/tab-bar.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} {{prefix}}-class"
+  class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} class {{prefix}}-class"
   aria-role="tablist"
 >
   <slot />
diff --git a/src/tab-panel/tab-panel.ts b/src/tab-panel/tab-panel.ts
index 63ce3e34b..cd1346ce7 100644
--- a/src/tab-panel/tab-panel.ts
+++ b/src/tab-panel/tab-panel.ts
@@ -7,6 +7,8 @@ const name = `${prefix}-tab-panel`;
 
 @wxComponent()
 export default class TabPanel extends SuperComponent {
+  externalClasses = [`${prefix}-class`];
+
   relations: RelationsOptions = {
     '../tabs/tabs': {
       type: 'ancestor',
diff --git a/src/tab-panel/tab-panel.wxml b/src/tab-panel/tab-panel.wxml
index d59cac82a..7bcb902c3 100644
--- a/src/tab-panel/tab-panel.wxml
+++ b/src/tab-panel/tab-panel.wxml
@@ -1,7 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
-  class="{{classPrefix}} {{active ? prefix + '-is-active': ''}}"
+  class="class {{prefix}}-class {{classPrefix}} {{active ? prefix + '-is-active': ''}}"
   style="{{_._style([style, customStyle, (hide ? 'display: none' : '')])}}"
   id="{{id}}"
   aria-role="tabpanel"
diff --git a/src/tabs/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/tabs/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..61f352ec4
--- /dev/null
+++ b/src/tabs/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,449 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs Tabs base demo works fine 1`] = `
+<base>
+  <t-tabs
+    defaultValue="{{0}}"
+    tClass="custom-tabs"
+    bind:change="onTabsChange"
+    bind:click="onTabsClick"
+  >
+    <t-tab-panel
+      label="选项"
+      value="0"
+    />
+    <t-tab-panel
+      label="选项"
+      value="1"
+    />
+  </t-tabs>
+  <t-tabs
+    defaultValue="{{0}}"
+    tClass="custom-tabs"
+    bind:change="onTabsChange"
+    bind:click="onTabsClick"
+  >
+    <t-tab-panel
+      label="选项"
+      value="0"
+    />
+    <t-tab-panel
+      label="选项"
+      value="1"
+    />
+    <t-tab-panel
+      label="上限六个文字"
+      value="2"
+    />
+  </t-tabs>
+  <t-tabs
+    defaultValue="{{0}}"
+    tClass="custom-tabs"
+    bind:change="onTabsChange"
+    bind:click="onTabsClick"
+  >
+    <t-tab-panel
+      label="选项"
+      value="0"
+    />
+    <t-tab-panel
+      label="选项"
+      value="1"
+    />
+    <t-tab-panel
+      label="选项"
+      value="2"
+    />
+    <t-tab-panel
+      label="上限四字"
+      value="2"
+    />
+  </t-tabs>
+  <t-tabs
+    defaultValue="{{0}}"
+    sticky="{{true}}"
+    stickyProps="{{
+      Object {
+        "zIndex": 2,
+      }
+    }}"
+    tClass="custom-tabs"
+    bind:change="onTabsChange"
+    bind:click="onTabsClick"
+    bind:scroll="onStickyScroll"
+  >
+    <t-tab-panel
+      label="选项"
+      value="0"
+    />
+    <t-tab-panel
+      label="选项"
+      value="1"
+    />
+    <t-tab-panel
+      label="选项"
+      value="2"
+    />
+    <t-tab-panel
+      label="选项"
+      value="3"
+    />
+    <t-tab-panel
+      label="上限三字"
+      value="4"
+    />
+  </t-tabs>
+</base>
+`;
+
+exports[`Tabs Tabs scroll demo works fine 1`] = `
+<scroll>
+  <t-tabs
+    defaultValue="{{0}}"
+    spaceEvenly="{{false}}"
+    bind:change="onTabsChange"
+    bind:click="onTabsClick"
+  >
+    <t-tab-panel
+      label="选项"
+      value="{{0}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{1}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{2}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{3}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{4}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{5}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{6}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{7}}"
+    />
+  </t-tabs>
+</scroll>
+`;
+
+exports[`Tabs Tabs size demo works fine 1`] = `
+<size>
+  <t-tabs
+    defaultValue="{{0}}"
+  >
+    <t-tab-panel
+      label="小尺寸"
+      value="0"
+    />
+    <t-tab-panel
+      label="选项"
+      value="1"
+    />
+    <t-tab-panel
+      label="选项"
+      value="2"
+    />
+    <t-tab-panel
+      label="选项"
+      value="3"
+    />
+  </t-tabs>
+  <wx-view
+    style="height: 16px"
+  />
+  <t-tabs
+    class="bigger"
+    defaultValue="{{0}}"
+  >
+    <t-tab-panel
+      label="大尺寸"
+      value="0"
+    />
+    <t-tab-panel
+      label="选项"
+      value="1"
+    />
+    <t-tab-panel
+      label="选项"
+      value="2"
+    />
+    <t-tab-panel
+      label="选项"
+      value="3"
+    />
+  </t-tabs>
+</size>
+`;
+
+exports[`Tabs Tabs status demo works fine 1`] = `
+<status>
+  <t-tabs
+    value="0"
+    bind:change="onTabsChange"
+    bind:click="onTabsClick"
+  >
+    <t-tab-panel
+      label="选中"
+      value="0"
+    />
+    <t-tab-panel
+      label="默认"
+      value="1"
+    />
+    <t-tab-panel
+      disabled="{{true}}"
+      label="禁用"
+      value="2"
+    />
+  </t-tabs>
+</status>
+`;
+
+exports[`Tabs Tabs theme demo works fine 1`] = `
+<theme>
+  <t-tabs
+    defaultValue="{{0}}"
+    theme="tag"
+  >
+    <t-tab-panel
+      label="选项"
+      value="{{0}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{1}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{2}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{3}}"
+    />
+  </t-tabs>
+  <wx-view
+    style="height: 16px"
+  />
+  <t-tabs
+    defaultValue="{{0}}"
+    spaceEvenly="{{false}}"
+    theme="tag"
+  >
+    <t-tab-panel
+      label="选项"
+      value="{{0}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{1}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{2}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{3}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{4}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{5}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{6}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{7}}"
+    />
+  </t-tabs>
+  <wx-view
+    style="height: 16px"
+  />
+  <t-tabs
+    defaultValue="{{0}}"
+    theme="card"
+  >
+    <t-tab-panel
+      label="选项"
+      value="{{0}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{1}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{2}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{3}}"
+    />
+  </t-tabs>
+  <wx-view
+    style="height: 16px"
+  />
+  <t-tabs
+    defaultValue="{{0}}"
+    spaceEvenly="{{false}}"
+    theme="card"
+  >
+    <t-tab-panel
+      label="选项"
+      value="{{0}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{1}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{2}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{3}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{4}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{5}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{6}}"
+    />
+    <t-tab-panel
+      label="选项"
+      value="{{7}}"
+    />
+  </t-tabs>
+</theme>
+`;
+
+exports[`Tabs Tabs with-badge demo works fine 1`] = `
+<with-badge>
+  <t-tabs
+    defaultValue="{{0}}"
+  >
+    <t-tab-panel
+      badgeProps="{{
+        Object {
+          "dot": true,
+          "offset": Array [
+            "-10rpx",
+            "4rpx",
+          ],
+        }
+      }}"
+      label="选项"
+      value="0"
+    />
+    <t-tab-panel
+      badgeProps="{{
+        Object {
+          "count": 8,
+          "offset": Array [
+            "-16rpx",
+            "8rpx",
+          ],
+        }
+      }}"
+      label="选项"
+      value="1"
+    />
+    <t-tab-panel
+      label="选项"
+      value="2"
+    />
+  </t-tabs>
+</with-badge>
+`;
+
+exports[`Tabs Tabs with-content demo works fine 1`] = `
+<with-content>
+  <t-tabs
+    defaultValue="{{0}}"
+    tClass="custom-tabs"
+    bind:change="onTabsChange"
+    bind:click="onTabsClick"
+  >
+    <t-tab-panel
+      label="选项一"
+      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      value="0"
+    >
+      选项一内容
+    </t-tab-panel>
+    <t-tab-panel
+      label="选项二"
+      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      value="1"
+    >
+      选项二内容
+    </t-tab-panel>
+    <t-tab-panel
+      label="选项三"
+      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      value="2"
+    >
+      选项三内容
+    </t-tab-panel>
+    <t-tab-panel
+      label="选项四"
+      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      value="3"
+    >
+      选项四内容
+    </t-tab-panel>
+  </t-tabs>
+</with-content>
+`;
+
+exports[`Tabs Tabs with-icon demo works fine 1`] = `
+<with-icon>
+  <t-tabs
+    defaultValue="{{0}}"
+  >
+    <t-tab-panel
+      icon="app"
+      label="选项"
+      value="{{0}}"
+    />
+    <t-tab-panel
+      icon="app"
+      label="选项"
+      value="{{1}}"
+    />
+    <t-tab-panel
+      icon="app"
+      label="选项"
+      value="{{2}}"
+    />
+  </t-tabs>
+</with-icon>
+`;
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index 1e9afd130..b271aff8f 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -3,7 +3,7 @@
 <wxs src="./tabs.wxs" module="filters" />
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [placement])}} {{prefix}}-class">
+<view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [placement])}} class {{prefix}}-class">
   <t-sticky
     t-class="{{_.cls(classPrefix + '__sticky', [placement])}}"
     disabled="{{ !sticky }}"
diff --git a/src/tag/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/tag/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..e5bff87a4
--- /dev/null
+++ b/src/tag/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,428 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag Tag checkable demo works fine 1`] = `
+<checkable>
+  <wx-view
+    class="wrapper"
+  >
+    <wx-view
+      class="block"
+    >
+      <wx-text>
+        light
+      </wx-text>
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        size="large"
+        variant="light"
+      />
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        defaultChecked="{{true}}"
+        size="large"
+        variant="light"
+      />
+    </wx-view>
+    <wx-view
+      class="block"
+    >
+      <wx-text>
+        dark
+      </wx-text>
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        size="large"
+        variant="dark"
+      />
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        defaultChecked="{{true}}"
+        size="large"
+        variant="dark"
+      />
+    </wx-view>
+    <wx-view
+      class="block"
+    >
+      <wx-text>
+        outline
+      </wx-text>
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        size="large"
+        variant="outline"
+      />
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        defaultChecked="{{true}}"
+        size="large"
+        variant="outline"
+      />
+    </wx-view>
+    <wx-view
+      class="block"
+    >
+      <wx-text>
+        light-outline
+      </wx-text>
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        size="large"
+        variant="light-outline"
+      />
+      <t-check-tag
+        content="{{
+          Array [
+            "已选中态",
+            "未选中态",
+          ]
+        }}"
+        defaultChecked="{{true}}"
+        size="large"
+        variant="light-outline"
+      />
+    </wx-view>
+  </wx-view>
+</checkable>
+`;
+
+exports[`Tag Tag closable demo works fine 1`] = `
+<closable>
+  <wx-view
+    class="demo"
+  >
+    <t-tag
+      closable="{{true}}"
+      variant="light"
+      bind:close="handleClose0"
+    >
+      文字标签
+    </t-tag>
+    <t-tag
+      closable="{{true}}"
+      variant="outline"
+      bind:close="handleClose1"
+    >
+      文字标签
+    </t-tag>
+  </wx-view>
+</closable>
+`;
+
+exports[`Tag Tag size demo works fine 1`] = `
+<size>
+  <wx-view
+    class="block"
+  >
+    <t-tag
+      size="extra-large"
+      variant="light"
+    >
+      加大尺寸
+    </t-tag>
+    <t-tag
+      size="large"
+      variant="light"
+    >
+      大尺寸
+    </t-tag>
+    <t-tag
+      size="medium"
+      variant="light"
+    >
+      中尺寸
+    </t-tag>
+    <t-tag
+      size="small"
+      variant="light"
+    >
+      小尺寸
+    </t-tag>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-tag
+      closable="{{true}}"
+      size="extra-large"
+      variant="light"
+    >
+      加大尺寸
+    </t-tag>
+    <t-tag
+      closable="{{true}}"
+      size="large"
+      variant="light"
+    >
+      大尺寸
+    </t-tag>
+    <t-tag
+      closable="{{true}}"
+      size="medium"
+      variant="light"
+    >
+      中尺寸
+    </t-tag>
+    <t-tag
+      closable="{{true}}"
+      size="small"
+      variant="light"
+    >
+      小尺寸
+    </t-tag>
+  </wx-view>
+</size>
+`;
+
+exports[`Tag Tag theme demo works fine 1`] = `
+<theme>
+  <wx-view
+    class="block"
+  >
+    <t-tag
+      variant="light"
+    >
+      默认
+    </t-tag>
+    <t-tag
+      theme="primary"
+      variant="light"
+    >
+      主要
+    </t-tag>
+    <t-tag
+      theme="warning"
+      variant="light"
+    >
+      警告
+    </t-tag>
+    <t-tag
+      theme="danger"
+      variant="light"
+    >
+      危险
+    </t-tag>
+    <t-tag
+      theme="success"
+      variant="light"
+    >
+      成功
+    </t-tag>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-tag>
+      默认
+    </t-tag>
+    <t-tag
+      theme="primary"
+    >
+      主要
+    </t-tag>
+    <t-tag
+      theme="warning"
+    >
+      警告
+    </t-tag>
+    <t-tag
+      theme="danger"
+    >
+      危险
+    </t-tag>
+    <t-tag
+      theme="success"
+    >
+      成功
+    </t-tag>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-tag
+      variant="outline"
+    >
+      默认
+    </t-tag>
+    <t-tag
+      theme="primary"
+      variant="outline"
+    >
+      主要
+    </t-tag>
+    <t-tag
+      theme="warning"
+      variant="outline"
+    >
+      警告
+    </t-tag>
+    <t-tag
+      theme="danger"
+      variant="outline"
+    >
+      危险
+    </t-tag>
+    <t-tag
+      theme="success"
+      variant="outline"
+    >
+      成功
+    </t-tag>
+  </wx-view>
+  <wx-view
+    class="block"
+  >
+    <t-tag
+      variant="light-outline"
+    >
+      默认
+    </t-tag>
+    <t-tag
+      theme="primary"
+      variant="light-outline"
+    >
+      主要
+    </t-tag>
+    <t-tag
+      theme="warning"
+      variant="light-outline"
+    >
+      警告
+    </t-tag>
+    <t-tag
+      theme="danger"
+      variant="light-outline"
+    >
+      危险
+    </t-tag>
+    <t-tag
+      theme="success"
+      variant="light-outline"
+    >
+      成功
+    </t-tag>
+  </wx-view>
+</theme>
+`;
+
+exports[`Tag Tag type demo works fine 1`] = `
+<type>
+  <wx-view
+    class="demo"
+  >
+    <wx-view
+      class="demo-desc"
+    >
+      基础标签
+    </wx-view>
+    <t-tag
+      variant="light"
+    >
+      标签文字
+    </t-tag>
+    <t-tag
+      variant="outline"
+    >
+      标签文字
+    </t-tag>
+  </wx-view>
+  <wx-view
+    class="demo"
+  >
+    <wx-view
+      class="demo-desc"
+    >
+      圆弧标签
+    </wx-view>
+    <t-tag
+      shape="round"
+      variant="light"
+    >
+      标签文字
+    </t-tag>
+    <t-tag
+      shape="round"
+      variant="outline"
+    >
+      标签文字
+    </t-tag>
+    <t-tag
+      shape="mark"
+      variant="outline"
+    >
+      标签文字
+    </t-tag>
+  </wx-view>
+  <wx-view
+    class="demo"
+  >
+    <wx-view
+      class="demo-desc"
+    >
+      带图标的标签
+    </wx-view>
+    <t-tag
+      icon="discount"
+      variant="light"
+    >
+       标签文字 
+    </t-tag>
+    <t-tag
+      icon="discount"
+      variant="outline"
+    >
+       标签文字 
+    </t-tag>
+  </wx-view>
+  <wx-view
+    class="demo"
+  >
+    <wx-view
+      class="demo-desc"
+    >
+      超长省略文本标签
+    </wx-view>
+    <t-tag
+      maxWidth="{{130}}"
+      variant="light"
+    >
+      超长省略文本标签超长省略文本标签
+    </t-tag>
+  </wx-view>
+</type>
+`;
diff --git a/src/tag/tag.ts b/src/tag/tag.ts
index 6f58a237e..fdfd8c8da 100644
--- a/src/tag/tag.ts
+++ b/src/tag/tag.ts
@@ -17,7 +17,7 @@ export default class Tag extends SuperComponent {
 
   properties = props;
 
-  externalClasses = ['class', `${prefix}-class`];
+  externalClasses = [`${prefix}-class`];
 
   options: WechatMiniprogram.Component.ComponentOptions = {
     multipleSlots: true,
diff --git a/src/textarea/__test__/__snapshots__/index.test.js.snap b/src/textarea/__test__/__snapshots__/index.test.js.snap
index 56e2dee2e..3e3ba44f9 100644
--- a/src/textarea/__test__/__snapshots__/index.test.js.snap
+++ b/src/textarea/__test__/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`textarea slots : label 1`] = `
   class="base"
 >
   <wx-view
-    class="t-textarea  t-class"
+    class="t-textarea  class t-class"
     style=""
   >
     <wx-view
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..66ca7a235
--- /dev/null
+++ b/src/textarea/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Textarea Textarea autosize demo works fine 1`] = `
+<autosize>
+  <t-textarea
+    autosize="{{true}}"
+    disableDefaultPadding="{{true}}"
+    label="标签文字"
+    placeholder="请输入文字"
+  />
+</autosize>
+`;
+
+exports[`Textarea Textarea base demo works fine 1`] = `
+<base>
+  <t-textarea
+    disableDefaultPadding="{{true}}"
+    placeholder="请输入文字"
+    tClass="external-class"
+  />
+</base>
+`;
+
+exports[`Textarea Textarea card demo works fine 1`] = `
+<card>
+  <wx-view
+    class="textarea-example"
+  >
+    <t-textarea
+      disableDefaultPadding="{{true}}"
+      indicator="{{true}}"
+      label="标签文字"
+      maxlength="500"
+      placeholder="请输入文字"
+      style="border-radius: 18rpx;"
+      tClass="external-class"
+    />
+  </wx-view>
+</card>
+`;
+
+exports[`Textarea Textarea custom demo works fine 1`] = `
+<custom>
+  <wx-view
+    class="textarea-example"
+  >
+    <wx-text
+      class="textarea-example__label"
+    >
+      标签文字
+    </wx-text>
+    <t-textarea
+      bordered="{{true}}"
+      disableDefaultPadding="{{true}}"
+      indicator="{{true}}"
+      maxlength="100"
+      placeholder="请输入文字"
+      style="height: 248rpx"
+      tClass="external-class"
+    />
+  </wx-view>
+</custom>
+`;
+
+exports[`Textarea Textarea disabled demo works fine 1`] = `
+<disabled>
+  <t-textarea
+    disabled="{{true}}"
+    disableDefaultPadding="{{true}}"
+    label="标签文字"
+    placeholder="请输入文字"
+    tClass="external-class"
+    value="不可编辑文字"
+  />
+</disabled>
+`;
+
+exports[`Textarea Textarea label demo works fine 1`] = `
+<wx-label>
+  <t-textarea
+    disableDefaultPadding="{{true}}"
+    label="标签文字"
+    placeholder="请输入文字"
+    tClass="external-class"
+  />
+</wx-label>
+`;
+
+exports[`Textarea Textarea maxcharacter demo works fine 1`] = `
+<maxcharacter>
+  <t-textarea
+    disableDefaultPadding="{{true}}"
+    indicator="{{true}}"
+    label="标签文字"
+    maxcharacter="200"
+    placeholder="设置最大字符个数，一个汉字表示两个字符"
+    tClass="external-class"
+  />
+</maxcharacter>
+`;
+
+exports[`Textarea Textarea maxlength demo works fine 1`] = `
+<maxlength>
+  <t-textarea
+    disableDefaultPadding="{{true}}"
+    indicator="{{true}}"
+    label="标签文字"
+    maxlength="200"
+    placeholder="设置最大字符个数"
+    tClass="external-class"
+  />
+</maxlength>
+`;
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..3e3ba44f9
--- /dev/null
+++ b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`textarea slots : label 1`] = `
+<t-textarea
+  class="base"
+>
+  <wx-view
+    class="t-textarea  class t-class"
+    style=""
+  >
+    <wx-view
+      class="t-textarea__label t-class-label"
+    >
+      <wx-text
+        slot="label"
+      >
+        标签文字
+      </wx-text>
+    </wx-view>
+    <wx-view
+      class="t-textarea__wrapper"
+    >
+      <wx-textarea
+        adjustPosition="{{true}}"
+        autoFocus="{{false}}"
+        autoHeight="{{false}}"
+        class="t-textarea__wrapper-inner  t-class-textarea"
+        confirmHold="{{false}}"
+        confirmType="return"
+        cursor="{{-1}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        disableDefaultPadding="{{false}}"
+        fixed="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        placeholder=""
+        placeholderClass="t-textarea__placeholder"
+        placeholderStyle=""
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        showConfirmBar="{{true}}"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:linechange="onLineChange"
+      />
+    </wx-view>
+  </wx-view>
+</t-textarea>
+`;
diff --git a/src/textarea/textarea.wxml b/src/textarea/textarea.wxml
index e5457dece..1403b3c09 100644
--- a/src/textarea/textarea.wxml
+++ b/src/textarea/textarea.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{bordered? classPrefix +  '--border' : ''}} {{prefix}}-class"
+  class="{{classPrefix}} {{bordered? classPrefix +  '--border' : ''}} class {{prefix}}-class"
 >
   <view class="{{classPrefix}}__label {{prefix}}-class-label">
     <block wx:if="{{label}}">{{ label }}</block>
diff --git a/src/toast/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/toast/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..e99b109ac
--- /dev/null
+++ b/src/toast/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toast Toast base demo works fine 1`] = `
+<base>
+  <t-toast
+    id="t-toast"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showText"
+  >
+    纯文本
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showMultiText"
+  >
+    多行文字
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showHorizontalText"
+  >
+    带横向图标
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showVerticalText"
+  >
+    带竖向图标
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showLoading"
+  >
+    加载状态
+  </t-button>
+</base>
+`;
+
+exports[`Toast Toast close demo works fine 1`] = `
+<close>
+  <t-toast
+    id="t-toast"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleShow"
+  >
+    显示提示
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleHide"
+  >
+    关闭提示
+  </t-button>
+</close>
+`;
+
+exports[`Toast Toast cover demo works fine 1`] = `
+<cover>
+  <t-toast
+    id="t-toast"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="handleToast"
+  >
+    禁止滑动和点击
+  </t-button>
+</cover>
+`;
+
+exports[`Toast Toast display demo works fine 1`] = `
+<display>
+  <t-toast
+    id="t-toast"
+  />
+  <t-button
+    block="{{true}}"
+    data-type="topShow"
+    size="large"
+    tClass="external-class"
+    variant="outline"
+    bind:tap="handleToast"
+  >
+    顶部展示1秒
+  </t-button>
+  <t-button
+    block="{{true}}"
+    data-type="middleShow"
+    size="large"
+    tClass="external-class"
+    variant="outline"
+    bind:tap="handleToast"
+  >
+    中间展示2秒
+  </t-button>
+  <t-button
+    block="{{true}}"
+    data-type="bottomShow"
+    size="large"
+    tClass="external-class"
+    variant="outline"
+    bind:tap="handleToast"
+  >
+    底部展示3秒
+  </t-button>
+</display>
+`;
+
+exports[`Toast Toast theme demo works fine 1`] = `
+<theme>
+  <t-toast
+    id="t-toast"
+  />
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showSuccessToast"
+  >
+    成功提示
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showWarningToast"
+  >
+    警告提示
+  </t-button>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="showErrorToast"
+  >
+    失败提示
+  </t-button>
+</theme>
+`;
diff --git a/src/toast/toast.wxml b/src/toast/toast.wxml
index 9e417b32f..fcf06800a 100644
--- a/src/toast/toast.wxml
+++ b/src/toast/toast.wxml
@@ -3,7 +3,7 @@
 
 <view
   wx:if="{{realVisible}}"
-  class="{{_.cls(classPrefix, [direction, theme, ['with-text', message]])}} {{prefix}}-class {{transitionClass}}"
+  class="{{_.cls(classPrefix, [direction, theme, ['with-text', message]])}} class {{prefix}}-class {{transitionClass}}"
   style="{{_._style([ 'top:' + (placement === 'top' ? '25%' : placement === 'bottom' ? '75%': '45%'), style, customStyle])}}"
   bind:transitionend="onTransitionEnd"
   catch:touchstart="loop"
diff --git a/src/transition/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/transition/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..21f8c7393
--- /dev/null
+++ b/src/transition/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Transition Transition appear demo works fine 1`] = `
+<appear>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="onTriggerClick"
+  >
+    Toggle attach
+  </t-button>
+</appear>
+`;
+
+exports[`Transition Transition base demo works fine 1`] = `
+<base>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="onTriggerClick"
+  >
+    Toggle
+  </t-button>
+  <t-transition
+    customStyle="font-size: 9px"
+    style="display:none"
+    visible="{{false}}"
+  >
+    <wx-view
+      class="block"
+    />
+  </t-transition>
+</base>
+`;
+
+exports[`Transition Transition custom demo works fine 1`] = `
+<custom>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="onTriggerClick"
+  >
+    Toggle
+  </t-button>
+  <t-transition
+    name="translate"
+    visible="{{false}}"
+  >
+    <wx-view
+      class="block"
+    />
+  </t-transition>
+</custom>
+`;
+
+exports[`Transition Transition destroy demo works fine 1`] = `
+<destroy>
+  <t-button
+    block="{{true}}"
+    size="large"
+    theme="primary"
+    variant="outline"
+    bind:tap="onTriggerClick"
+  >
+    Toggle attach
+  </t-button>
+  <t-transition
+    destroyOnHide="{{true}}"
+    visible="{{false}}"
+  >
+    <wx-view
+      class="block"
+    />
+  </t-transition>
+</destroy>
+`;
diff --git a/src/transition/transition.ts b/src/transition/transition.ts
index 2957c4899..218a5ab4d 100644
--- a/src/transition/transition.ts
+++ b/src/transition/transition.ts
@@ -7,6 +7,8 @@ const name = `${prefix}-transition`;
 
 @wxComponent()
 export default class Transition extends SuperComponent {
+  externalClasses = [`${prefix}-class`];
+
   behaviors = [transition()];
 
   data = {
diff --git a/src/transition/transition.wxml b/src/transition/transition.wxml
index 90ec59b51..d8390d861 100644
--- a/src/transition/transition.wxml
+++ b/src/transition/transition.wxml
@@ -1,7 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
-  class="{{classPrefix}} {{ transitionClass }}"
+  class="class {{prefix}}-class {{classPrefix}} {{ transitionClass }}"
   style="{{_._style([visible ? '' : 'display: none', style, customStyle])}}"
   bind:transitionend="onTransitionEnd"
 >
diff --git a/src/tree-select/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/tree-select/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..14bc212a4
--- /dev/null
+++ b/src/tree-select/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,1278 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeSelect TreeSelect base demo works fine 1`] = `
+<base>
+  <t-tree-select
+    options="{{
+      Array [
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "0-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "0-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "0-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "0-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "0-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "0-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "0-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "0-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "0-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "0-9",
+            },
+          ],
+          "label": "选项一",
+          "value": "0",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "1-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "1-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "1-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "1-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "1-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "1-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "1-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "1-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "1-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "1-9",
+            },
+          ],
+          "label": "选项二",
+          "value": "1",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "2-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "2-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "2-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "2-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "2-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "2-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "2-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "2-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "2-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "2-9",
+            },
+          ],
+          "label": "选项三",
+          "value": "2",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "3-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "3-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "3-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "3-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "3-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "3-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "3-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "3-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "3-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "3-9",
+            },
+          ],
+          "label": "选项四",
+          "value": "3",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "4-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "4-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "4-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "4-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "4-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "4-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "4-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "4-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "4-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "4-9",
+            },
+          ],
+          "label": "选项五",
+          "value": "4",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "5-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "5-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "5-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "5-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "5-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "5-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "5-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "5-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "5-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "5-9",
+            },
+          ],
+          "label": "选项六",
+          "value": "5",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "6-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "6-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "6-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "6-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "6-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "6-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "6-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "6-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "6-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "6-9",
+            },
+          ],
+          "label": "选项七",
+          "value": "6",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "7-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "7-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "7-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "7-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "7-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "7-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "7-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "7-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "7-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "7-9",
+            },
+          ],
+          "label": "选项八",
+          "value": "7",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "8-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "8-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "8-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "8-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "8-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "8-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "8-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "8-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "8-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "8-9",
+            },
+          ],
+          "label": "选项九",
+          "value": "8",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "9-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "9-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "9-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "9-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "9-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "9-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "9-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "9-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "9-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "9-9",
+            },
+          ],
+          "label": "选项十",
+          "value": "9",
+        },
+      ]
+    }}"
+    value="{{
+      Array [
+        "0",
+        "0-0",
+      ]
+    }}"
+    bind:change="onChange"
+  />
+</base>
+`;
+
+exports[`TreeSelect TreeSelect multiple demo works fine 1`] = `
+<multiple>
+  <t-tree-select
+    multiple="{{true}}"
+    options="{{
+      Array [
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "0-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "0-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "0-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "0-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "0-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "0-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "0-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "0-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "0-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "0-9",
+            },
+          ],
+          "label": "选项一",
+          "value": "0",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "1-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "1-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "1-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "1-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "1-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "1-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "1-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "1-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "1-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "1-9",
+            },
+          ],
+          "label": "选项二",
+          "value": "1",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "2-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "2-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "2-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "2-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "2-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "2-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "2-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "2-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "2-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "2-9",
+            },
+          ],
+          "label": "选项三",
+          "value": "2",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "3-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "3-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "3-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "3-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "3-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "3-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "3-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "3-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "3-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "3-9",
+            },
+          ],
+          "label": "选项四",
+          "value": "3",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "4-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "4-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "4-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "4-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "4-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "4-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "4-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "4-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "4-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "4-9",
+            },
+          ],
+          "label": "选项五",
+          "value": "4",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "5-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "5-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "5-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "5-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "5-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "5-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "5-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "5-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "5-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "5-9",
+            },
+          ],
+          "label": "选项六",
+          "value": "5",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "6-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "6-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "6-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "6-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "6-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "6-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "6-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "6-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "6-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "6-9",
+            },
+          ],
+          "label": "选项七",
+          "value": "6",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "7-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "7-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "7-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "7-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "7-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "7-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "7-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "7-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "7-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "7-9",
+            },
+          ],
+          "label": "选项八",
+          "value": "7",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "8-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "8-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "8-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "8-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "8-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "8-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "8-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "8-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "8-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "8-9",
+            },
+          ],
+          "label": "选项九",
+          "value": "8",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "label": "选项一",
+              "value": "9-0",
+            },
+            Object {
+              "label": "选项二",
+              "value": "9-1",
+            },
+            Object {
+              "label": "选项三",
+              "value": "9-2",
+            },
+            Object {
+              "label": "选项四",
+              "value": "9-3",
+            },
+            Object {
+              "label": "选项五",
+              "value": "9-4",
+            },
+            Object {
+              "label": "选项六",
+              "value": "9-5",
+            },
+            Object {
+              "label": "选项七",
+              "value": "9-6",
+            },
+            Object {
+              "label": "选项八",
+              "value": "9-7",
+            },
+            Object {
+              "label": "选项九",
+              "value": "9-8",
+            },
+            Object {
+              "label": "选项十",
+              "value": "9-9",
+            },
+          ],
+          "label": "选项十",
+          "value": "9",
+        },
+      ]
+    }}"
+    value="{{
+      Array [
+        "0",
+        Array [
+          "0-0",
+          "0-1",
+        ],
+      ]
+    }}"
+    bind:change="onChange"
+  />
+</multiple>
+`;
+
+exports[`TreeSelect TreeSelect normal demo works fine 1`] = `
+<normal>
+  <t-tree-select
+    options="{{
+      Array [
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "东城区",
+                  "value": "110101",
+                },
+                Object {
+                  "label": "西城区",
+                  "value": "110102",
+                },
+                Object {
+                  "label": "朝阳区",
+                  "value": "110105",
+                },
+                Object {
+                  "label": "丰台区",
+                  "value": "110106",
+                },
+                Object {
+                  "label": "石景山区",
+                  "value": "110107",
+                },
+                Object {
+                  "label": "海淀区",
+                  "value": "110108",
+                },
+                Object {
+                  "label": "门头沟区",
+                  "value": "110109",
+                },
+                Object {
+                  "label": "房山区",
+                  "value": "110111",
+                },
+                Object {
+                  "label": "通州区",
+                  "value": "110112",
+                },
+                Object {
+                  "label": "顺义区",
+                  "value": "110113",
+                },
+                Object {
+                  "label": "昌平区",
+                  "value": "110114",
+                },
+                Object {
+                  "label": "大兴区",
+                  "value": "110115",
+                },
+                Object {
+                  "label": "怀柔区",
+                  "value": "110116",
+                },
+                Object {
+                  "label": "平谷区",
+                  "value": "110117",
+                },
+                Object {
+                  "label": "密云区",
+                  "value": "110118",
+                },
+                Object {
+                  "label": "延庆区",
+                  "value": "110119",
+                },
+              ],
+              "label": "北京市",
+              "value": "110100",
+            },
+          ],
+          "label": "北京市",
+          "value": "110000",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "label": "荔湾区",
+                  "value": "440103",
+                },
+                Object {
+                  "label": "越秀区",
+                  "value": "440104",
+                },
+                Object {
+                  "label": "海珠区",
+                  "value": "440105",
+                },
+                Object {
+                  "label": "天河区",
+                  "value": "440106",
+                },
+                Object {
+                  "label": "白云区",
+                  "value": "440111",
+                },
+                Object {
+                  "label": "黄埔区",
+                  "value": "440112",
+                },
+                Object {
+                  "label": "番禺区",
+                  "value": "440113",
+                },
+                Object {
+                  "label": "花都区",
+                  "value": "440114",
+                },
+                Object {
+                  "label": "南沙区",
+                  "value": "440115",
+                },
+                Object {
+                  "label": "从化区",
+                  "value": "440117",
+                },
+                Object {
+                  "label": "增城区",
+                  "value": "440118",
+                },
+              ],
+              "label": "广州市",
+              "value": "440100",
+            },
+            Object {
+              "children": Array [
+                Object {
+                  "label": "武江区",
+                  "value": "440203",
+                },
+                Object {
+                  "label": "浈江区",
+                  "value": "440204",
+                },
+                Object {
+                  "label": "曲江区",
+                  "value": "440205",
+                },
+                Object {
+                  "label": "始兴县",
+                  "value": "440222",
+                },
+                Object {
+                  "label": "仁化县",
+                  "value": "440224",
+                },
+                Object {
+                  "label": "翁源县",
+                  "value": "440229",
+                },
+                Object {
+                  "label": "乳源瑶族自治县",
+                  "value": "440232",
+                },
+                Object {
+                  "label": "新丰县",
+                  "value": "440233",
+                },
+                Object {
+                  "label": "乐昌市",
+                  "value": "440281",
+                },
+                Object {
+                  "label": "南雄市",
+                  "value": "440282",
+                },
+              ],
+              "label": "韶关市",
+              "value": "440200",
+            },
+            Object {
+              "children": Array [
+                Object {
+                  "label": "罗湖区",
+                  "value": "440303",
+                },
+                Object {
+                  "label": "福田区",
+                  "value": "440304",
+                },
+                Object {
+                  "label": "南山区",
+                  "value": "440305",
+                },
+                Object {
+                  "label": "宝安区",
+                  "value": "440306",
+                },
+                Object {
+                  "label": "龙岗区",
+                  "value": "440307",
+                },
+                Object {
+                  "label": "盐田区",
+                  "value": "440308",
+                },
+                Object {
+                  "label": "龙华区",
+                  "value": "440309",
+                },
+                Object {
+                  "label": "坪山区",
+                  "value": "440310",
+                },
+                Object {
+                  "label": "光明区",
+                  "value": "440311",
+                },
+              ],
+              "label": "深圳市",
+              "value": "440300",
+            },
+            Object {
+              "children": Array [
+                Object {
+                  "label": "香洲区",
+                  "value": "440402",
+                },
+                Object {
+                  "label": "斗门区",
+                  "value": "440403",
+                },
+                Object {
+                  "label": "金湾区",
+                  "value": "440404",
+                },
+              ],
+              "label": "珠海市",
+              "value": "440400",
+            },
+            Object {
+              "children": Array [
+                Object {
+                  "label": "龙湖区",
+                  "value": "440507",
+                },
+                Object {
+                  "label": "金平区",
+                  "value": "440511",
+                },
+                Object {
+                  "label": "濠江区",
+                  "value": "440512",
+                },
+                Object {
+                  "label": "潮阳区",
+                  "value": "440513",
+                },
+                Object {
+                  "label": "潮南区",
+                  "value": "440514",
+                },
+                Object {
+                  "label": "澄海区",
+                  "value": "440515",
+                },
+                Object {
+                  "label": "南澳县",
+                  "value": "440523",
+                },
+              ],
+              "label": "汕头市",
+              "value": "440500",
+            },
+            Object {
+              "children": Array [
+                Object {
+                  "label": "禅城区",
+                  "value": "440604",
+                },
+                Object {
+                  "label": "南海区",
+                  "value": "440605",
+                },
+                Object {
+                  "label": "顺德区",
+                  "value": "440606",
+                },
+                Object {
+                  "label": "三水区",
+                  "value": "440607",
+                },
+                Object {
+                  "label": "高明区",
+                  "value": "440608",
+                },
+              ],
+              "label": "佛山市",
+              "value": "440600",
+            },
+          ],
+          "label": "广东省",
+          "value": "440000",
+        },
+      ]
+    }}"
+    value="{{
+      Array [
+        "110000",
+        "110100",
+        "110101",
+      ]
+    }}"
+    bind:change="onChange"
+  />
+</normal>
+`;
diff --git a/src/tree-select/tree-select.wxml b/src/tree-select/tree-select.wxml
index 1c5151503..898e9e4a0 100644
--- a/src/tree-select/tree-select.wxml
+++ b/src/tree-select/tree-select.wxml
@@ -1,7 +1,7 @@
 <wxs module="_" src="../common/utils.wxs" />
 <wxs module="this" src="./index.wxs" />
 
-<view class="{{classPrefix}}" style="{{_._style(['height:' + _.addUnit(height) , style, customStyle])}}">
+<view class="{{classPrefix}} class" style="{{_._style(['height:' + _.addUnit(height) , style, customStyle])}}">
   <scroll-view
     scroll-y
     enhanced
diff --git a/src/upload/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/upload/__test__/__virtualHostSnapshot__/demo.test.js.snap
new file mode 100644
index 000000000..50068de49
--- /dev/null
+++ b/src/upload/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Upload Upload messageFile demo works fine 1`] = `
+<messageFile>
+  <wx-view
+    class="wrapper"
+  >
+    <t-upload
+      config="{{
+        Object {
+          "count": 1,
+        }
+      }}"
+      files="{{
+        Array [
+          Object {
+            "name": "uploaded1.png",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example4.png",
+          },
+        ]
+      }}"
+      gridConfig="{{
+        Object {
+          "column": 4,
+          "height": 160,
+          "width": 160,
+        }
+      }}"
+      mediaType="{{
+        Array [
+          "video",
+          "image",
+        ]
+      }}"
+      source="messageFile"
+      bind:remove="handleRemove"
+      bind:success="handleSuccess"
+    />
+  </wx-view>
+</messageFile>
+`;
+
+exports[`Upload Upload multiple demo works fine 1`] = `
+<multiple>
+  <wx-view
+    class="wrapper"
+  >
+    <t-upload
+      files="{{
+        Array [
+          Object {
+            "name": "uploaded1.png",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example4.png",
+          },
+          Object {
+            "name": "uploaded2.png",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example6.png",
+          },
+          Object {
+            "name": "uploaded1.png",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example5.png",
+          },
+        ]
+      }}"
+      gridConfig="{{
+        Object {
+          "column": 4,
+          "height": 160,
+          "width": 160,
+        }
+      }}"
+      mediaType="{{
+        Array [
+          "video",
+          "image",
+        ]
+      }}"
+      bind:click="handleClick"
+      bind:remove="handleRemove"
+      bind:success="handleSuccess"
+    />
+  </wx-view>
+</multiple>
+`;
+
+exports[`Upload Upload single demo works fine 1`] = `
+<single>
+  <wx-view
+    class="wrapper"
+  >
+    <t-upload
+      files="{{Array []}}"
+      max="{{1}}"
+      mediaType="{{
+        Array [
+          "video",
+          "image",
+        ]
+      }}"
+      bind:add="handleAdd"
+      bind:remove="handleRemove"
+    />
+  </wx-view>
+</single>
+`;
+
+exports[`Upload Upload status demo works fine 1`] = `
+<status>
+  <wx-view
+    class="wrapper"
+  >
+    <t-upload
+      files="{{
+        Array [
+          Object {
+            "name": "uploaded1.png",
+            "status": "loading",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example4.png",
+          },
+          Object {
+            "name": "uploaded2.png",
+            "percent": 68,
+            "status": "loading",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example7.png",
+          },
+          Object {
+            "name": "uploaded3.png",
+            "status": "reload",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example6.png",
+          },
+          Object {
+            "name": "uploaded4.png",
+            "status": "failed",
+            "type": "image",
+            "url": "https://tdesign.gtimg.com/miniprogram/images/example5.png",
+          },
+        ]
+      }}"
+      gridConfig="{{
+        Object {
+          "column": 4,
+          "height": 160,
+          "width": 160,
+        }
+      }}"
+      mediaType="{{
+        Array [
+          "video",
+          "image",
+        ]
+      }}"
+      bind:click="handleClick"
+      bind:remove="handleRemove"
+      bind:success="handleSuccess"
+    />
+  </wx-view>
+</status>
+`;
diff --git a/src/upload/upload.wxml b/src/upload/upload.wxml
index 7e6556b9c..2ec7bfae7 100644
--- a/src/upload/upload.wxml
+++ b/src/upload/upload.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class">
+<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
   <t-grid gutter="{{gutter}}" border="{{false}}" align="center" column="{{column}}">
     <!-- 图片/视频 -->
     <t-grid-item