diff --git a/docs/site/mobile.js b/docs/site/mobile.js
index 166e36204..b2dc843a9 100644
--- a/docs/site/mobile.js
+++ b/docs/site/mobile.js
@@ -16,6 +16,8 @@ Locale.add({
 // flag for vant-weapp demos
 const isWeapp = location.search.indexOf('weapp=1') !== -1;
 
+let demoUid = 0;
+
 // helper for demo locales
 Vue.mixin({
   computed: {
@@ -37,6 +39,10 @@ Vue.mixin({
   },
 
   beforeCreate() {
+    if (!this.$options.name) {
+      this.$options.name = `demo-${demoUid++}`;
+    }
+
     const { i18n, name } = this.$options;
 
     if (i18n && name) {
diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue
new file mode 100644
index 000000000..8744064f8
--- /dev/null
+++ b/src/field/demo/Autosize.vue
@@ -0,0 +1,37 @@
+<template>
+  <demo-block :title="$t('autosize')">
+    <van-cell-group>
+      <van-field
+        v-model="value"
+        autosize
+        rows="1"
+        type="textarea"
+        :label="$t('message')"
+        :placeholder="$t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      message: '留言',
+      autosize: '高度自适应',
+      placeholder: '请输入留言',
+    },
+    'en-US': {
+      sms: 'SMS',
+      autosize: 'Auto Resize',
+      placeholder: 'Message',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue
new file mode 100644
index 000000000..5e436f949
--- /dev/null
+++ b/src/field/demo/BasicUsage.vue
@@ -0,0 +1,26 @@
+<template>
+  <demo-block :title="$t('basicUsage')">
+    <van-cell-group>
+      <van-field v-model="value" :placeholder="$t('placeholder')" />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      placeholder: '请输入文本',
+    },
+    'en-US': {
+      placeholder: 'Text',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue
new file mode 100644
index 000000000..523059a60
--- /dev/null
+++ b/src/field/demo/CustomType.vue
@@ -0,0 +1,76 @@
+<template>
+  <demo-block :title="$t('customType')">
+    <van-cell-group>
+      <van-field
+        v-model="text"
+        :label="$t('text')"
+        :placeholder="$t('textPlaceholder')"
+      />
+      <van-field
+        v-model="phone"
+        type="tel"
+        :label="$t('phone')"
+        :placeholder="$t('phonePlaceholder')"
+      />
+      <van-field
+        v-model="digit"
+        type="digit"
+        :label="$t('digit')"
+        :placeholder="$t('digitPlaceholder')"
+      />
+      <van-field
+        v-model="number"
+        type="number"
+        :label="$t('number')"
+        :placeholder="$t('numberPlaceholder')"
+      />
+      <van-field
+        v-model="password"
+        type="password"
+        :label="$t('password')"
+        :placeholder="$t('passwordPlaceholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      digit: '整数',
+      phone: '手机号',
+      number: '数字',
+      customType: '自定义类型',
+      smsPlaceholder: '请输入短信验证码',
+      textPlaceholder: '请输入文本',
+      digitPlaceholder: '请输入整数',
+      phonePlaceholder: '请输入手机号',
+      numberPlaceholder: '请输入数字（支持小数）',
+    },
+    'en-US': {
+      text: 'Text',
+      digit: 'Digit',
+      phone: 'Phone',
+      number: 'Number',
+      customType: 'Custom Type',
+      smsPlaceholder: 'SMS',
+      textPlaceholder: 'Text',
+      digitPlaceholder: 'Digit',
+      phonePlaceholder: 'Phone',
+      numberPlaceholder: 'Number',
+    },
+  },
+
+  data() {
+    return {
+      text: '',
+      phone: '',
+      digit: '',
+      number: '',
+      password: '',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/Disabled.vue b/src/field/demo/Disabled.vue
new file mode 100644
index 000000000..48e52298a
--- /dev/null
+++ b/src/field/demo/Disabled.vue
@@ -0,0 +1,26 @@
+<template>
+  <demo-block :title="$t('disabled')">
+    <van-cell-group>
+      <van-field :value="$t('inputReadonly')" :label="$t('text')" readonly />
+      <van-field :value="$t('inputDisabled')" :label="$t('text')" disabled />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      disabled: '禁用输入框',
+      inputReadonly: '输入框只读',
+      inputDisabled: '输入框已禁用',
+    },
+    'en-US': {
+      text: 'Text',
+      inputReadonly: 'Input Readonly',
+      inputDisabled: 'Input Disabled',
+    },
+  },
+};
+</script>
diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue
new file mode 100644
index 000000000..169ba7fd8
--- /dev/null
+++ b/src/field/demo/ErrorInfo.vue
@@ -0,0 +1,46 @@
+<template>
+  <demo-block :title="$t('errorInfo')">
+    <van-cell-group>
+      <van-field
+        v-model="username"
+        required
+        :label="$t('username')"
+        :placeholder="$t('usernamePlaceholder')"
+        error
+      />
+      <van-field
+        v-model="phone"
+        required
+        :label="$t('phone')"
+        :placeholder="$t('phonePlaceholder')"
+        :error-message="$t('phoneError')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      phone: '手机号',
+      errorInfo: '错误提示',
+      phoneError: '手机号格式错误',
+      phonePlaceholder: '请输入手机号',
+    },
+    'en-US': {
+      phone: 'Phone',
+      errorInfo: 'Error Info',
+      phoneError: 'Invalid phone',
+      phonePlaceholder: 'Phone',
+    },
+  },
+
+  data() {
+    return {
+      phone: '123',
+      username: '',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue
new file mode 100644
index 000000000..ef149f913
--- /dev/null
+++ b/src/field/demo/FormatValue.vue
@@ -0,0 +1,39 @@
+<template>
+  <demo-block v-if="!isWeapp" :title="$t('formatValue')">
+    <van-cell-group>
+      <van-field
+        v-model="formatValue"
+        :label="$t('text')"
+        :formatter="formatter"
+        :placeholder="$t('formatValue')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      formatValue: '格式化输入内容',
+    },
+    'en-US': {
+      text: 'Text',
+      formatValue: 'Format Value',
+    },
+  },
+
+  data() {
+    return {
+      formatValue: '',
+    };
+  },
+
+  methods: {
+    formatter(value) {
+      return value.replace(/\d/g, '');
+    },
+  },
+};
+</script>
diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue
new file mode 100644
index 000000000..df0cc0191
--- /dev/null
+++ b/src/field/demo/InputAlign.vue
@@ -0,0 +1,35 @@
+<template>
+  <demo-block :title="$t('inputAlign')">
+    <van-cell-group>
+      <van-field
+        v-model="value"
+        :label="$t('text')"
+        :placeholder="$t('alignPlaceHolder')"
+        input-align="right"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      inputAlign: '输入框内容对齐',
+      alignPlaceHolder: '输入框内容右对齐',
+    },
+    'en-US': {
+      text: 'Text',
+      inputAlign: 'Input Align',
+      alignPlaceHolder: 'Input Align Right',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue
new file mode 100644
index 000000000..c9f95058b
--- /dev/null
+++ b/src/field/demo/InsertButton.vue
@@ -0,0 +1,44 @@
+<template>
+  <demo-block :title="$t('insertButton')">
+    <van-cell-group>
+      <van-field
+        v-model="sms"
+        center
+        clearable
+        :label="$t('sms')"
+        :placeholder="$t('smsPlaceholder')"
+      >
+        <template #button>
+          <van-button size="small" type="primary">
+            {{ $t('sendSMS') }}
+          </van-button>
+        </template>
+      </van-field>
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      sms: '短信验证码',
+      sendSMS: '发送验证码',
+      insertButton: '插入按钮',
+      smsPlaceholder: '请输入短信验证码',
+    },
+    'en-US': {
+      sms: 'SMS',
+      sendSMS: 'Send SMS',
+      insertButton: 'Insert Button',
+      smsPlaceholder: 'SMS',
+    },
+  },
+
+  data() {
+    return {
+      sms: '',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue
new file mode 100644
index 000000000..ea42fa861
--- /dev/null
+++ b/src/field/demo/ShowIcon.vue
@@ -0,0 +1,44 @@
+<template>
+  <demo-block :title="$t('showIcon')">
+    <van-cell-group>
+      <van-field
+        v-model="icon1"
+        :label="$t('text')"
+        left-icon="smile-o"
+        right-icon="warning-o"
+        :placeholder="$t('showIcon')"
+      />
+      <van-field
+        v-model="icon2"
+        clearable
+        :label="$t('text')"
+        left-icon="music-o"
+        :placeholder="$t('showClearIcon')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      showIcon: '显示图标',
+      showClearIcon: '显示清除图标',
+    },
+    'en-US': {
+      text: 'Text',
+      showIcon: 'Show Icon',
+      showClearIcon: 'Show Clear Icon',
+    },
+  },
+
+  data() {
+    return {
+      icon1: '',
+      icon2: '123',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue
new file mode 100644
index 000000000..7f73fd46f
--- /dev/null
+++ b/src/field/demo/ShowWordLimit.vue
@@ -0,0 +1,39 @@
+<template>
+  <demo-block v-if="!isWeapp" :title="$t('showWordLimit')">
+    <van-cell-group>
+      <van-field
+        v-model="value"
+        autosize
+        show-word-limit
+        rows="2"
+        type="textarea"
+        maxlength="50"
+        :label="$t('message')"
+        :placeholder="$t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      message: '留言',
+      placeholder: '请输入留言',
+      showWordLimit: '显示字数统计',
+    },
+    'en-US': {
+      message: 'Message',
+      placeholder: 'Message',
+      showWordLimit: 'Show Word Limit',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+};
+</script>
diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue
index c89420f6d..2ba3649dd 100644
--- a/src/field/demo/index.vue
+++ b/src/field/demo/index.vue
@@ -1,261 +1,42 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-cell-group>
-        <van-field v-model="value" :placeholder="$t('textPlaceholder')" />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block :title="$t('customType')">
-      <van-cell-group>
-        <van-field
-          v-model="text"
-          :label="$t('text')"
-          :placeholder="$t('textPlaceholder')"
-        />
-
-        <van-field
-          v-model="phone"
-          type="tel"
-          :label="$t('phone')"
-          :placeholder="$t('phonePlaceholder')"
-        />
-
-        <van-field
-          v-model="digit"
-          type="digit"
-          :label="$t('digit')"
-          :placeholder="$t('digitPlaceholder')"
-        />
-
-        <van-field
-          v-model="number"
-          type="number"
-          :label="$t('number')"
-          :placeholder="$t('numberPlaceholder')"
-        />
-
-        <van-field
-          v-model="password"
-          type="password"
-          :label="$t('password')"
-          :placeholder="$t('passwordPlaceholder')"
-        />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block :title="$t('disabled')">
-      <van-cell-group>
-        <van-field :value="$t('inputReadonly')" :label="$t('text')" readonly />
-        <van-field :value="$t('inputDisabled')" :label="$t('text')" disabled />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block :title="$t('showIcon')">
-      <van-cell-group>
-        <van-field
-          v-model="icon1"
-          :label="$t('text')"
-          left-icon="smile-o"
-          right-icon="warning-o"
-          :placeholder="$t('showIcon')"
-        />
-        <van-field
-          v-model="icon2"
-          clearable
-          :label="$t('text')"
-          left-icon="music-o"
-          :placeholder="$t('showClearIcon')"
-        />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block :title="$t('errorInfo')">
-      <van-cell-group>
-        <van-field
-          v-model="username"
-          required
-          :label="$t('username')"
-          :placeholder="$t('usernamePlaceholder')"
-          error
-        />
-        <van-field
-          v-model="phone2"
-          required
-          :label="$t('phone')"
-          :placeholder="$t('phonePlaceholder')"
-          :error-message="$t('phoneError')"
-        />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block :title="$t('insertButton')">
-      <van-cell-group>
-        <van-field
-          center
-          clearable
-          v-model="sms"
-          :label="$t('sms')"
-          :placeholder="$t('smsPlaceholder')"
-        >
-          <template #button>
-            <van-button size="small" type="primary">
-              {{ $t('sendSMS') }}
-            </van-button>
-          </template>
-        </van-field>
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block v-if="!isWeapp" :title="$t('formatValue')">
-      <van-cell-group>
-        <van-field
-          v-model="formatValue"
-          :label="$t('text')"
-          :formatter="formatter"
-          :placeholder="$t('formatValue')"
-        />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block :title="$t('textareaAutosize')">
-      <van-cell-group>
-        <van-field
-          v-model="message"
-          :label="$t('message')"
-          type="textarea"
-          :placeholder="$t('messagePlaceholder')"
-          rows="1"
-          autosize
-        />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block v-if="!isWeapp" :title="$t('showWordLimit')">
-      <van-cell-group>
-        <van-field
-          v-model="message2"
-          :label="$t('message')"
-          :placeholder="$t('messagePlaceholder')"
-          rows="2"
-          autosize
-          maxlength="50"
-          type="textarea"
-          show-word-limit
-        />
-      </van-cell-group>
-    </demo-block>
-
-    <demo-block :title="$t('inputAlign')">
-      <van-cell-group>
-        <van-field
-          v-model="value"
-          :label="$t('text')"
-          :placeholder="$t('alignPlaceHolder')"
-          input-align="right"
-        />
-      </van-cell-group>
-    </demo-block>
+    <basic-usage />
+    <custom-type />
+    <disabled />
+    <show-icon />
+    <error-info />
+    <insert-button />
+    <format-value />
+    <autosize />
+    <show-word-limit />
+    <input-align />
   </demo-section>
 </template>
 
 <script>
+import BasicUsage from './BasicUsage';
+import CustomType from './CustomType';
+import Disabled from './Disabled';
+import ShowIcon from './ShowIcon';
+import ErrorInfo from './ErrorInfo';
+import InsertButton from './InsertButton';
+import FormatValue from './FormatValue';
+import Autosize from './Autosize';
+import ShowWordLimit from './ShowWordLimit';
+import InputAlign from './InputAlign';
+
 export default {
-  i18n: {
-    'zh-CN': {
-      tel: '手机号',
-      sms: '短信验证码',
-      text: '文本',
-      digit: '整数',
-      phone: '手机号',
-      number: '数字',
-      message: '留言',
-      sendSMS: '发送验证码',
-      disabled: '禁用输入框',
-      showIcon: '显示图标',
-      errorInfo: '错误提示',
-      customType: '自定义类型',
-      phoneError: '手机号格式错误',
-      formatValue: '格式化输入内容',
-      insertButton: '插入按钮',
-      showClearIcon: '显示清除图标',
-      showWordLimit: '显示字数统计',
-      inputReadonly: '输入框只读',
-      inputDisabled: '输入框已禁用',
-      inputAlign: '输入框内容对齐',
-      smsPlaceholder: '请输入短信验证码',
-      textPlaceholder: '请输入文本',
-      digitPlaceholder: '请输入整数',
-      phonePlaceholder: '请输入手机号',
-      textareaAutosize: '高度自适应',
-      numberPlaceholder: '请输入数字（支持小数）',
-      messagePlaceholder: '请输入留言',
-      alignPlaceHolder: '输入框内容右对齐',
-    },
-    'en-US': {
-      tel: 'Tel',
-      sms: 'SMS',
-      text: 'Text',
-      digit: 'Digit',
-      phone: 'Phone',
-      number: 'Number',
-      message: 'Message',
-      sendSMS: 'Send SMS',
-      disabled: 'Disabled',
-      showIcon: 'Show Icon',
-      errorInfo: 'Error Info',
-      customType: 'Custom Type',
-      phoneError: 'Invalid phone',
-      formatValue: 'Format Value',
-      insertButton: 'Insert Button',
-      showClearIcon: 'Show Clear Icon',
-      showWordLimit: 'Show Word Limit',
-      inputReadonly: 'Input Readonly',
-      inputDisabled: 'Input Disabled',
-      inputAlign: 'Input Align',
-      smsPlaceholder: 'SMS',
-      textPlaceholder: 'Text',
-      digitPlaceholder: 'Digit',
-      phonePlaceholder: 'Phone',
-      textareaAutosize: 'Auto Resize',
-      numberPlaceholder: 'Number',
-      messagePlaceholder: 'Message',
-      alignPlaceHolder: 'Input Align Right',
-    },
-  },
-
-  data() {
-    return {
-      sms: '',
-      text: '',
-      value: '',
-      digit: '',
-      number: '',
-      icon1: '',
-      icon2: '123',
-      password: '',
-      username: '',
-      username2: '',
-      message: '',
-      message2: '',
-      phone: '',
-      phone2: '12345',
-      formatValue: '',
-    };
-  },
-
-  methods: {
-    formatter(value) {
-      return value.replace(/\d/g, '');
-    },
+  components: {
+    BasicUsage,
+    CustomType,
+    Disabled,
+    ShowIcon,
+    ErrorInfo,
+    InsertButton,
+    FormatValue,
+    Autosize,
+    ShowWordLimit,
+    InputAlign,
   },
 };
 </script>
-
-<style lang="less">
-@import '../../style/var';
-
-.demo-field {
-  padding-bottom: 30px;
-}
-</style>
diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap
index 45f50bb82..35ee97271 100644
--- a/src/field/test/__snapshots__/demo.spec.js.snap
+++ b/src/field/test/__snapshots__/demo.spec.js.snap
@@ -108,8 +108,8 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
             <div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
-            发送验证码
-          </span></button></div>
+          发送验证码
+        </span></button></div>
           </div>
         </div>
       </div>