feat(Form): support using slider

src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -5,19 +5,19 @@ exports[`create a AddressEdit 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>电话</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
           <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
               <!----></i></div>
@@ -28,7 +28,7 @@ exports[`create a AddressEdit 1`] = `
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-          <div class="van-cell__value">
+          <div class="van-cell__value van-field__value">
             <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
           </div>
         </div>
@@ -44,19 +44,19 @@ exports[`create a AddressEdit with props 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>电话</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
           <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
               <!----></i></div>
@@ -67,7 +67,7 @@ exports[`create a AddressEdit with props 1`] = `
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-          <div class="van-cell__value">
+          <div class="van-cell__value van-field__value">
             <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
           </div>
         </div>
@@ -75,7 +75,7 @@ exports[`create a AddressEdit with props 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
@@ -97,19 +97,19 @@ exports[`set-default 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>电话</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
           <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
               <!----></i></div>
@@ -120,7 +120,7 @@ exports[`set-default 1`] = `
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-          <div class="van-cell__value">
+          <div class="van-cell__value van-field__value">
             <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
           </div>
         </div>
@@ -128,7 +128,7 @@ exports[`set-default 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
@@ -150,19 +150,19 @@ exports[`show area component 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>电话</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
           <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
               <!----></i></div>
@@ -173,7 +173,7 @@ exports[`show area component 1`] = `
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-          <div class="van-cell__value">
+          <div class="van-cell__value van-field__value">
             <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
           </div>
         </div>
@@ -181,7 +181,7 @@ exports[`show area component 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
@@ -203,19 +203,19 @@ exports[`show area component 2`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>电话</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
           <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
               <!----></i></div>
@@ -226,7 +226,7 @@ exports[`show area component 2`] = `
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-          <div class="van-cell__value">
+          <div class="van-cell__value van-field__value">
             <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
           </div>
         </div>
@@ -234,7 +234,7 @@ exports[`show area component 2`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
@@ -256,19 +256,19 @@ exports[`valid area placeholder confirm 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>电话</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
-      <div class="van-cell__value">
+      <div class="van-cell__value van-field__value">
         <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
           <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
               <!----></i></div>
@@ -279,7 +279,7 @@ exports[`valid area placeholder confirm 1`] = `
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-          <div class="van-cell__value">
+          <div class="van-cell__value van-field__value">
             <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
           </div>
         </div>

src/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -4,7 +4,7 @@ exports[`empty-image prop 1`] = `
 <div class="van-coupon-list">
   <div class="van-coupon-list__exchange-bar">
     <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
       </div>
     </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
@@ -54,7 +54,7 @@ exports[`render coupon list 1`] = `
 <div class="van-coupon-list">
   <div class="van-coupon-list__exchange-bar">
     <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
       </div>
     </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
@@ -200,7 +200,7 @@ exports[`render empty coupon list 1`] = `
 <div class="van-coupon-list">
   <div class="van-coupon-list__exchange-bar">
     <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
       </div>
     </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>

src/field/index.js

@@ -417,6 +417,7 @@ export default createComponent({
         required={this.required}
         clickable={this.clickable}
         titleStyle={this.labelStyle}
+        valueClass={bem('value')}
         titleClass={[bem('label', labelAlign), this.labelClass]}
         arrowDirection={this.arrowDirection}
         class={bem({

src/field/index.less

@@ -14,6 +14,10 @@
     }
   }
 
+  &__value {
+    overflow: visible;
+  }
+
   &__body {
     display: flex;
     align-items: center;

src/field/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`arrow-direction prop 1`] = `
 <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div><i class="van-icon van-icon-arrow-up van-cell__right-icon">
     <!----></i>
@@ -11,7 +11,7 @@ exports[`arrow-direction prop 1`] = `
 
 exports[`clearable 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div>
 </div>
@@ -19,7 +19,7 @@ exports[`clearable 1`] = `
 
 exports[`clearable 2`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">
         <!----></i></div>
   </div>
@@ -29,7 +29,7 @@ exports[`clearable 2`] = `
 exports[`label-class prop 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label custom-label-class"><span>Label</span></div>
-  <div class="van-cell__value">
+  <div class="van-cell__value van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div>
 </div>
@@ -38,7 +38,7 @@ exports[`label-class prop 1`] = `
 exports[`label-width prop with unit 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label" style="width: 10rem;"><span>Label</span></div>
-  <div class="van-cell__value">
+  <div class="van-cell__value van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div>
 </div>
@@ -47,7 +47,7 @@ exports[`label-width prop with unit 1`] = `
 exports[`label-width prop without unit 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label" style="width: 100px;"><span>Label</span></div>
-  <div class="van-cell__value">
+  <div class="van-cell__value van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div>
 </div>
@@ -55,7 +55,7 @@ exports[`label-width prop without unit 1`] = `
 
 exports[`name prop 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" name="foo" class="van-field__control"></div>
   </div>
 </div>
@@ -63,7 +63,7 @@ exports[`name prop 1`] = `
 
 exports[`reach max word-limit 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
     <div class="van-field__word-limit"><span class="van-field__word-num van-field__word-num--full">3</span>/3</div>
   </div>
@@ -72,9 +72,9 @@ exports[`reach max word-limit 1`] = `
 
 exports[`render input slot 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
-      <div class="van-field__control">Custom Input</div>
+      <div class="van-field__control van-field__control--custom">Custom Input</div>
     </div>
   </div>
 </div>
@@ -83,7 +83,7 @@ exports[`render input slot 1`] = `
 exports[`render label slot 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">Custom Label</div>
-  <div class="van-cell__value">
+  <div class="van-cell__value van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div>
 </div>
@@ -91,7 +91,7 @@ exports[`render label slot 1`] = `
 
 exports[`render textarea 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea></div>
   </div>
 </div>
@@ -99,7 +99,7 @@ exports[`render textarea 1`] = `
 
 exports[`size prop 1`] = `
 <div class="van-cell van-cell--large van-field">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div>
 </div>

src/form/demo/FieldType.vue

@@ -13,6 +13,10 @@
         <van-rate v-model="rate" slot="input" />
       </van-field>
 
+      <van-field name="slider" :label="$t('slider')">
+        <van-slider v-model="slider" slot="input" />
+      </van-field>
+
       <van-field name="stepper" :label="$t('stepper')">
         <van-stepper v-model="stepper" slot="input" />
       </van-field>
@@ -31,6 +35,7 @@ export default {
       rate: '评分',
       submit: '提交',
       switch: '开关',
+      slider: '滑块',
       stepper: '步进器',
       checkbox: '复选框',
       fieldType: '表单项类型',
@@ -40,6 +45,7 @@ export default {
       rate: 'Rate',
       submit: 'Submit',
       switch: 'Switch',
+      slider: 'Slider',
       stepper: 'Stepper',
       checkbox: 'Checkbox',
       fieldType: 'Field Type',
@@ -50,6 +56,7 @@ export default {
   data() {
     return {
       rate: 3,
+      slider: 50,
       stepper: 1,
       checkbox: false,
       switchChecked: false,

src/form/index.js

@@ -1,4 +1,3 @@
-// Utils
 import { createNamespace } from '../utils';
 
 const [createComponent, bem] = createNamespace('form');

src/form/test/__snapshots__/demo.spec.js.snap

@@ -6,13 +6,13 @@ exports[`renders demo correctly 1`] = `
     <form class="van-form">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>用户名</span></div>
-        <div class="van-cell__value">
+        <div class="van-cell__value van-field__value">
           <div class="van-field__body"><input type="text" name="username" placeholder="用户名" class="van-field__control"></div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>密码</span></div>
-        <div class="van-cell__value">
+        <div class="van-cell__value van-field__value">
           <div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
         </div>
       </div>
@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
     <form class="van-form">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>复选框</span></div>
-        <div class="van-cell__value">
+        <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <div class="van-field__control van-field__control--custom">
               <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
@@ -36,7 +36,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>开关</span></div>
-        <div class="van-cell__value">
+        <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <div class="van-field__control van-field__control--custom">
               <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@@ -46,6 +46,53 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>评分</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <div class="van-field__control van-field__control--custom">
+              <div tabindex="0" role="radiogroup" class="van-rate">
+                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+                    <!----></i></div>
+                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+                    <!----></i></div>
+                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+                    <!----></i></div>
+                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
+                    <!----></i></div>
+                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
+                    <!----></i></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>滑块</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <div class="van-field__control van-field__control--custom">
+              <div class="van-slider">
+                <div class="van-slider__bar" style="width: 50%;">
+                  <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+                    <div class="van-slider__button"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>步进器</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <div class="van-field__control van-field__control--custom">
+              <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
     </form>
   </div>

src/search/test/__snapshots__/index.spec.js.snap

@@ -6,7 +6,7 @@ exports[`action-text prop 1`] = `
     <div class="van-cell van-cell--borderless van-field">
       <div class="van-field__left-icon"><i class="van-icon van-icon-search">
           <!----></i></div>
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="search" class="van-field__control"></div>
       </div>
     </div>
@@ -22,7 +22,7 @@ exports[`label slot 1`] = `
     <div class="van-cell van-cell--borderless van-field">
       <div class="van-field__left-icon"><i class="van-icon van-icon-search">
           <!----></i></div>
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="search" class="van-field__control"></div>
       </div>
     </div>
@@ -36,7 +36,7 @@ exports[`left-icon prop 1`] = `
     <div class="van-cell van-cell--borderless van-field">
       <div class="van-field__left-icon"><i class="van-icon van-icon-setting-o">
           <!----></i></div>
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="search" class="van-field__control"></div>
       </div>
     </div>
@@ -50,7 +50,7 @@ exports[`right-icon prop 1`] = `
     <div class="van-cell van-cell--borderless van-field">
       <div class="van-field__left-icon"><i class="van-icon van-icon-search">
           <!----></i></div>
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="search" class="van-field__control">
           <div class="van-field__right-icon"><i class="van-icon van-icon-setting-o">
               <!----></i></div>
@@ -67,7 +67,7 @@ exports[`right-icon slot 1`] = `
     <div class="van-cell van-cell--borderless van-field">
       <div class="van-field__left-icon"><i class="van-icon van-icon-search">
           <!----></i></div>
-      <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body"><input type="search" class="van-field__control">
           <div class="van-field__right-icon">Custom Right Icon</div>
         </div>

src/slider/demo/index.vue

@@ -93,8 +93,12 @@ export default {
   background: @white;
   user-select: none;
 
-  .van-slider {
+  .van-doc-demo-block {
-    margin: 0 @padding-md @padding-xl;
+    padding: 0 @padding-md 20px;
+  }
+
+  .van-doc-demo-block__title {
+    padding-left: 0;
   }
 
   .custom-button {
@@ -106,9 +110,5 @@ export default {
     background-color: @red;
     border-radius: 100px;
   }
-
-  .van-doc-demo-block__title {
-    padding-top: 25px;
-  }
 }
 </style>

src/slider/index.js

@@ -1,11 +1,12 @@
 import { createNamespace, addUnit } from '../utils';
-import { TouchMixin } from '../mixins/touch';
 import { preventDefault } from '../utils/dom/event';
+import { TouchMixin } from '../mixins/touch';
+import { FieldMixin } from '../mixins/field';
 
 const [createComponent, bem] = createNamespace('slider');
 
 export default createComponent({
-  mixins: [TouchMixin],
+  mixins: [TouchMixin, FieldMixin],
 
   props: {
     disabled: Boolean,

src/slider/index.less

@@ -2,6 +2,7 @@
 
 .van-slider {
   position: relative;
+  width: 100%;
   background-color: @slider-inactive-background-color;
   border-radius: @border-radius-max;
   cursor: pointer;