Merge pull request #138 from chenjiahan/dev

add AddressList component

docs/examples-docs/address-list.md

@@ -0,0 +1,122 @@
+<script>
+import { Toast } from 'packages';
+
+export default {
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        },
+        {
+          id: '3',
+          name: '王五',
+          tel: '1320000000',
+          address: '浙江省杭州市滨江区江南大道 15 号'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    onAdd() {
+      Toast('新增收货地址');
+    },
+    onEdit(item, index) {
+      Toast('编辑收货地址:' + index);
+    }
+  }
+}
+</script>
+
+## AddressList 地址列表
+
+### 使用指南
+``` javascript
+import { AddressList } from 'vant';
+
+Vue.component(AddressList.name, AddressList);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-address-list
+  v-model="chosenAddressId"
+  :list="list"
+  @add="onAdd"
+  @edit="onEdit"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    onAdd() {
+      Toast('新增收货地址');
+    },
+    onEdit(item, index) {
+      Toast('编辑收货地址:' + index);
+    }
+  }
+}
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中地址的 id | String | - | - |
+| list | 地址列表 | Array | `[]` | - |
+| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
+| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+
+### 数据格式
+#### 地址列表字段说明
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| id | 每条地址的唯一标识 | `String | Number` |
+| name | 收货人姓名 | `String` |
+| tel | 收货人手机号 | `String` |
+| address | 收货地址 | `String` |

docs/examples-docs/field.md

@@ -1,8 +1,6 @@
 <style>
 .demo-field {
-  .van-field-wrapper {
+  padding-bottom: 30px;
-    padding: 0 10px;
-  }
 }
 </style>
 
@@ -10,17 +8,11 @@
 export default {
   data() {
     return {
-      username: 'zhangmin'
+      value: '',
+      password: '',
+      username: 'zhangmin',
+      message: ''
     };
-  },
-  methods: {
-    onIconClick() {
-      this.username = '';
-    },
-
-    onFieldBlur() {
-      console.log('blured');
-    }
   }
 };
 </script>
@@ -39,92 +31,78 @@ Vue.component(Field.name, Field);
 ### 代码演示
 
 #### 基础用法
-
+通过 v-model 绑定输入框的值
-根据`type`属性显示不同的输入框。
 
 :::demo 基础用法
 ```html
+<van-cell-group>
+  <van-field v-model="value" placeholder="请输入用户名"></van-field>
+</van-cell-group>
+```
+:::
+
+#### 自定义类型
+根据`type`属性定义不同类型的输入框
+
+:::demo 自定义类型
+```html
 <van-cell-group>
   <van-field
-    type="text"
-    label="用户名："
-    placeholder="请输入用户名"
     v-model="username"
+    label="用户名"
     icon="clear"
-    :on-icon-click="onIconClick"
+    placeholder="请输入用户名"
-    @blur="onFieldBlur"
+    required
-    required></van-field>
+    @click-icon="username = ''"
+  >
+  </van-field>
+
   <van-field
+    v-model="password"
     type="password"
-    label="密码："
+    label="密码"
     placeholder="请输入密码"
     required>
-    <template slot="icon">
-      <van-icon name="search"></van-icon>
-    </template>
   </van-field>
-  <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 无label的输入框
+#### 禁用输入框
 
-不传入`label`属性即可。
+:::demo 禁用输入框
-
-:::demo 无label的输入框
 ```html
 <van-cell-group>
-  <van-field type="text" placeholder="请输入用户名"></van-field>
+  <van-field value="输入框已禁用" label="用户名" disabled></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 带border的输入框
+#### 错误提示
 
-传入一个`border`属性。
+:::demo 错误提示
-
-:::demo 带border的输入框
-```html
-<div class="van-field-wrapper">
-  <van-field type="text" placeholder="请输入用户名" border></van-field>
-</div>
-```
-:::
-
-#### 禁用的输入框
-
-传入`disabled`属性即可。
-
-:::demo 禁用的输入框
 ```html
 <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
+  <van-field label="用户名" placeholder="请输入用户名" error></van-field>
 </van-cell-group>
 ```
 :::
 
-#### 错误的输入框
+#### 高度自适应
+对于 textarea，可以通过`autosize`属性设置高度自适应
 
-传入`error`属性即可。
+:::demo 高度自适应
-
-:::demo 错误的输入框
 ```html
 <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
+  <van-field
-</van-cell-group>
+    v-model="message"
-```
+    label="留言"
-:::
+    type="textarea"
-
+    placeholder="请输入留言"
-
+    rows="1"
-#### Autosize的输入框(仅支持textarea)
+    autosize
-
+  >
-传入`autosize`属性, 且将`rows`设为1。
+  </van-field>
-
-:::demo 错误的输入框
-```html
-<van-cell-group>
-  <van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
 </van-cell-group>
 ```
 :::
@@ -133,23 +111,24 @@ Vue.component(Field.name, Field);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 输入框类型 | `String`  | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea`  |
+| type | 输入框类型 | `String`  | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
-| placeholder | 输入框placeholder | `String`  |  |   |
+| value | 输入框的值 | `String`  | - | - |
-| value | 输入框的值 | `String`  |  |   |
+| label | 输入框标签 | `String`  | - | - |
-| label | 输入框标签 | `String`  |  |   |
+| disabled | 是否禁用输入框 | `Boolean`  | `false` | - |
-| disabled | 是否禁用输入框 | `Boolean`  | `false` |   |
+| error | 输入框是否有错误 | `Boolean`  | `false` | - |
-| error | 输入框是否有错误 | `Boolean`  | `false` |   |
+| autosize | 高度自适应(仅支持textarea) | `Boolean`  | `false` | - |
-| readonly | 输入框是否只读 | `Boolean`  | `false` |   |
+| icon | 输入框尾部图标 | `String`  | - |  Icon 组件支持的类型 |
-| maxlength | 输入框maxlength | `String`, `Number`  |  |   |
+
-| rows | textarea rows | `String`, `Number`   |  |   |
+### Event
-| cols | textarea cols | `String`, `Number`  |  |   |
+
-| autosize | 自动调整高度(仅支持textarea) | `Boolean`  | `false` |  `true`, `false` |
+| 事件名称       | 说明      | 回调参数 |
-| icon | 输入框尾部图标 | `String`  |  |  icon中支持的类型 |
+|-----------|-----------|-----------|
-| onIconClick | 点击图标的回调函数 | `Function`  |  |  |
+| focus | 输入框聚焦时触发 | - |
+| blur | 输入框失焦时触发 | - |
+| click-icon | 点击尾部图标时触发 | - |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
 | icon | 自定义icon |
-

docs/examples-docs/notice-bar.md

@@ -21,7 +21,7 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 :::demo 基础用法
 ```html
-<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。">
+<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" />
 ```
 :::
 

docs/src/ExamplesApp.vue

@@ -1,93 +1,9 @@
 <template>
-  <div class="examples-container" ref="container">
-    <div class="demo-content" ref="demo">
   <router-view></router-view>
-    </div>
-    <div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
-      <img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
-    </div>
-  </div>
 </template>
 
-<script>
-export default {
-  computed: {
-    visible() {
-      return ['/'].indexOf(this.$route.path) < 0;
-    }
-  },
-
-  data() {
-    return {
-      isFooterFixed: false
-    };
-  },
-
-  mounted() {
-    this.computeFooterFixed();
-  },
-
-  watch: {
-    '$route.path'(val) {
-      this.$nextTick(() => {
-        this.computeFooterFixed();
-      });
-    }
-  },
-
-  methods: {
-    computeFooterFixed() {
-      if (this.$refs.container) {
-        const demoSize = this.$refs.demo.getBoundingClientRect();
-        const containerSize = this.$refs.container.getBoundingClientRect();
-        if (demoSize.height < containerSize.height - 54) {
-          this.isFooterFixed = true;
-          return;
-        }
-      }
-      this.isFooterFixed = false;
-    }
-  }
-};
-</script>
-
 <style>
 body {
   -webkit-font-smoothing: antialiased;    
 }
-
-body, html {
-  height: 100%;
-}
-
-.examples-container {
-  height: 100%;
-  overflow: auto;
-  position: relative;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    width: 0;
-  }
-}
-
-.footer {
-  margin-top: 30px;
-  width: 100%;
-  padding: 10px 0 20px;
-  background: #f8f8f8;
-  
-  &.footer-fixed {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-}
-
-.zanui-logo {
-  display: block;
-  margin: 0 auto;
-  width: 150px;
-  height: auto;
-}
 </style>

docs/src/doc.config.js

@@ -214,6 +214,10 @@ module.exports = {
           {
             "groupName": "业务组件",
             "list": [
+              {
+                "path": "/address-list",
+                "title": "AddressList 地址列表"
+              },
               {
                 "path": "/area",
                 "title": "Area 省市区选择"

docs/src/examples.js

@@ -36,7 +36,12 @@ router.afterEach(() => {
 
 window.vueRouter = router;
 
+if (process.env.NODE_ENV !== 'production') {
+  Vue.config.productionTip = false;
+}
+
 new Vue({ // eslint-disable-line
   render: h => h(App),
-  router
+  router,
-}).$mount('#app-container');
+  el: '#app-container'
+});

docs/src/index.js

@@ -35,7 +35,12 @@ router.afterEach(() => {
 
 window.vueRouter = router;
 
+if (process.env.NODE_ENV !== 'production') {
+  Vue.config.productionTip = false;
+}
+
 new Vue({ // eslint-disable-line
   render: h => h(App),
-  router
+  router,
-}).$mount('#app-container');
+  el: '#app-container'
+});

packages/address-list/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="van-address-list">
+    <van-radio-group :value="value" @input="$emit('input', $event)" class="van-address-list__group">
+      <van-cell-group>
+        <van-cell v-for="(item, index) in list" :key="item.id">
+          <van-radio :name="item.id" @click="$emit('change', item, index)">
+            <div class="van-address-list__name">{{ item.name }}，{{ item.tel }}</div>
+            <div class="van-address-list__address">收货地址：{{ item.address }}</div>
+          </van-radio>
+          <van-icon name="edit" class="van-address-list__edit" @click="$emit('edit', item, index)" />
+        </van-cell>
+      </van-cell-group>
+    </van-radio-group>
+    <van-cell icon="add" class="van-address-list__add van-hairline--top" @click="$emit('add')" :title="addButtonText" isLink />
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import Radio from '../radio';
+import RadioGroup from '../radio-group';
+
+export default {
+  name: 'van-address-list',
+
+  components: {
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [Radio.name]: Radio,
+    [CellGroup.name]: CellGroup,
+    [RadioGroup.name]: RadioGroup
+  },
+
+  props: {
+    value: [String, Number],
+    list: {
+      type: Array,
+      default: () => []
+    },
+    addButtonText: {
+      type: String,
+      default: '新增收货地址'
+    }
+  }
+};
+</script>

packages/cell/index.vue

@@ -27,6 +27,7 @@
     <slot name="right-icon">
       <i class="van-cell__right-icon van-icon van-icon-arrow" v-if="isLink"></i>
     </slot>
+    <slot name="extra"></slot>
   </a>
 </template>
 

packages/field/index.vue

@@ -1,47 +1,43 @@
 <template>
   <van-cell
-    class="van-field"
     :title="label"
     :required="required"
-    :class="{
+    :class="['van-field', {
-      'van-field--hastextarea': type === 'textarea',
+      'van-field--has-textarea': type === 'textarea',
       'van-field--nolabel': !label,
-      'van-field--disabled': disabled,
+      'van-field--disabled': $attrs.disabled,
       'van-field--error': error,
       'van-field--border': border,
-      'van-hairline--surround': border,
       'van-field--autosize': autosize,
-      'van-field--has-icon': showIcon
+      'van-field--has-icon': hasIcon,
-    }">
+      'van-hairline--surround': border
+    }]">
     <textarea
       v-if="type === 'textarea'"
-      ref="textareaElement"
+      v-bind="$attrs"
+      v-on="$listeners"
+      ref="textarea"
       class="van-field__control"
-      v-model="currentValue"
+      :value="value"
-      @focus="handleInputFocus"
+      @input="onInput"
-      @blur="handleInputBlur"
+    />
-      :placeholder="placeholder"
-      :maxlength="maxlength"
-      :disabled="disabled"
-      :readonly="readonly"
-      :rows="rows"
-      :cols="cols">
-    </textarea>
     <input
       v-else
+      v-bind="$attrs"
+      v-on="$listeners"      
       class="van-field__control"
-      :value="currentValue"
-      @input="handleInput"
-      @focus="handleInputFocus"
-      @blur="handleInputBlur"
       :type="type"
-      :placeholder="placeholder"
+      :value="value"
-      :maxlength="maxlength"
+      @input="onInput"
-      :disabled="disabled"
+    />
-      :readonly="readonly">
+    <div
-    <div v-if="showIcon" class="van-field__icon" @click="onIconClick">
+      v-if="hasIcon"
+      v-show="$slots.icon || value"
+      class="van-field__icon"
+      @touchstart.prevent="onClickIcon"
+    >
       <slot name="icon">
-        <van-icon :name="icon"></van-icon>
+        <van-icon :name="icon" />
       </slot>
     </div>
   </van-cell>
@@ -70,80 +66,52 @@ export default {
     value: {},
     icon: String,
     label: String,
-    placeholder: String,
     error: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
     required: Boolean,
-    maxlength: [String, Number],
     border: Boolean,
-    rows: [String, Number],
+    autosize: Boolean,
-    cols: [String, Number],
-    autosize: {
-      type: Boolean,
-      default: false
-    },
     onIconClick: {
       type: Function,
       default: () => {}
     }
   },
 
-  data() {
+  watch: {
-    return {
+    value() {
-      currentValue: this.value
+      if (this.autosize && this.type === 'textarea') {
-    };
+        this.$nextTick(this.adjustSize);
+      }
+    }
   },
 
   mounted() {
     if (this.autosize && this.type === 'textarea') {
-      const el = this.$refs.textareaElement;
+      const el = this.$refs.textarea;
       el.style.height = el.scrollHeight + 'px';
       el.style.overflowY = 'hidden';
     }
   },
 
-  watch: {
-    value(val) {
-      this.currentValue = val;
-    },
-
-    currentValue(val) {
-      if (this.autosize && this.type === 'textarea') {
-        this.$nextTick(this.sizeAdjust);
-      }
-      this.$emit('input', val);
-    }
-  },
-
   computed: {
-    showIcon() {
+    hasIcon() {
-      // 有icon的slot，就认为一直展示
+      return this.$slots.icon || this.icon;
-      if (this.$slots.icon) {
-        return true;
-      }
-
-      return this.icon && this.currentValue;
     }
   },
 
   methods: {
-    handleInput(event) {
+    onInput(event) {
-      this.currentValue = event.target.value;
+      this.$emit('input', event.target.value);
     },
 
-    sizeAdjust() {
+    onClickIcon() {
-      const el = this.$refs.textareaElement;
+      this.$emit('click-icon');
+      this.onIconClick();
+    },
+
+    adjustSize() {
+      const el = this.$refs.textarea;
       el.style.height = 'auto';
       el.style.height = el.scrollHeight + 'px';
-    },
-
-    handleInputFocus() {
-      this.$emit('focus');
-    },
-
-    handleInputBlur() {
-      this.$emit('blur');
     }
   }
 };

packages/index.js

@@ -1,4 +1,5 @@
 import Actionsheet from './actionsheet';
+import AddressList from './address-list';
 import Area from './area';
 import Badge from './badge';
 import BadgeGroup from './badge-group';
@@ -55,6 +56,7 @@ import Waterfall from './waterfall';
 const version = '0.9.7';
 const components = [
   Actionsheet,
+  AddressList,
   Area,
   Badge,
   BadgeGroup,
@@ -121,6 +123,7 @@ export {
   install,
   version,
   Actionsheet,
+  AddressList,
   Area,
   Badge,
   BadgeGroup,

packages/notice-bar/index.vue

@@ -57,10 +57,10 @@ export default {
     },
     contentStyle() {
       return {
-        left: -this.offsetWidth + 'px',
+        transform: `translate3d(${-this.offsetWidth}px, 0, 0)`,
         transitionDelay: this.delay + 's',
         transitionDuration: this.duration + 's',
-        transitionProperty: this.diableTransition ? 'none' : 'left'
+        transitionProperty: this.diableTransition ? 'none' : 'all'
       };
     }
   },

packages/vant-css/src/address-list.css

@@ -0,0 +1,69 @@
+@import './common/var.css';
+
+.van-address-list {
+  height: 100%;
+
+  .van-cell__value {
+    color: $text-color;
+    padding-right: 34px;
+    position: relative;
+  }
+
+  .van-radio__label {
+    margin-left: 32px;
+  }
+
+  .van-radio__input {
+    top: 50%;
+    left: 0;
+    position: absolute;
+    transform: translate(0, -50%);
+  }
+
+  .van-icon-checked {
+    color: $blue;
+  }
+
+  &__group {
+    height: 100%;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &__name {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  &__address {
+    font-size: 12px;
+    line-height: 1.5;
+    color: $gray-darker;
+  }
+
+  &__edit {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    font-size: 24px;
+    color: $gray-dark;
+    transform: translate(0, -50%);
+  }
+
+  &__add {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 9999;
+    padding-left: 15px;
+
+    .van-cell__text {
+      font-size: 16px;
+    }
+
+    .van-icon-add {
+      color: $blue;
+      font-size: 20px;
+    }
+  }
+}

packages/vant-css/src/base.css

@@ -1,5 +1,5 @@
 /**
- * 基本样式入口
+ * Entry of basic styles
  */
 
 @import "./common/var.css";

packages/vant-css/src/cell.css

@@ -25,9 +25,14 @@
 
     .van-icon {
       margin-right: 5px;
+      vertical-align: middle;
     }
   }
 
+  &__text {
+    vertical-align: middle;
+  }
+
   &__label {
     display: block;
     font-size: 12px;

packages/vant-css/src/checkbox.css

@@ -8,6 +8,7 @@ $van-checkbox-size: 18px;
   .van-icon-success {
     color: #fff;
     display: block;
+    line-height: 1;
     font-size: 14px;
     text-align: center;
     pointer-events: none;

packages/vant-css/src/field.css

@@ -22,7 +22,7 @@
     padding-left: 90px;
   }
 
-  &--hastextarea {
+  &--has-textarea {
     .van-field__control {
       min-height: 60px;
     }

packages/vant-css/src/index.css

@@ -1,5 +1,5 @@
 /**
- * style entry
+ * Entry of all component's style
  */
 
 /* base */
@@ -50,6 +50,7 @@
 @import './tree-select.css';
 
 /* business components */
+@import './address-list.css';
 @import './coupon-list.css';
 @import './goods-action.css';
 @import './submit-bar.css';

packages/vant-css/src/notice-bar.css

@@ -30,7 +30,6 @@
   &__content {
     position: absolute;
     white-space: nowrap;
-    transition-property: left;
     transition-timing-function: linear;
   }
 }

test/unit/specs/address-list.spec.js

@@ -0,0 +1,80 @@
+import { mount } from 'avoriaz';
+import AddressList from 'packages/address-list';
+
+const list = [
+  {
+    id: '1',
+    name: '张三',
+    tel: '13000000000',
+    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+  },
+  {
+    id: '2',
+    name: '李四',
+    tel: '1310000000',
+    address: '浙江省杭州市拱墅区莫干山路 50 号'
+  },
+  {
+    id: '3',
+    name: '王五',
+    tel: '1320000000',
+    address: '浙江省杭州市滨江区江南大道 15 号'
+  }
+];
+
+describe('AddressList', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a AddressList', () => {
+    wrapper = mount(AddressList);
+    expect(wrapper.hasClass('van-address-list')).to.be.true;
+  });
+
+  it('create a AddressList with three items', () => {
+    wrapper = mount(AddressList, {
+      propsData: {
+        value: '1',
+        list
+      }
+    });
+    expect(wrapper.find('.van-address-list__group .van-cell').length).to.equal(3);
+    expect(wrapper.find('.van-icon-checked').length).to.equal(1);
+  });
+
+  it('listen to add & edit event', (done) => {
+    wrapper = mount(AddressList, {
+      propsData: {
+        list
+      }
+    });
+
+    const add = sinon.spy();
+    wrapper.vm.$on('add', add);
+    wrapper.find('.van-address-list__add')[0].trigger('click');
+    expect(add.calledOnce).to.be.true;
+
+    wrapper.vm.$on('edit', (item, index) => {
+      expect(index).to.equal(0);
+      done();
+    });
+    wrapper.find('.van-address-list__edit')[0].trigger('click');
+  });
+
+  it('listen to change event', (done) => {
+    wrapper = mount(AddressList, {
+      propsData: {
+        value: '1',
+        list
+      }
+    });
+
+    wrapper.vm.$on('change', (item, index) => {
+      expect(item.id).to.equal('3');
+      done();
+    });
+    wrapper.find('.van-radio')[2].trigger('click');
+  });
+});

test/unit/specs/field.spec.js

@@ -38,16 +38,12 @@ describe('Field', () => {
       }
     });
 
-    expect(wrapper.hasClass('van-field')).to.be.true;
-    expect(wrapper.data().currentValue).to.equal('test');
-
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     wrapper.vm.value = 'test2';
-    wrapper.update();
     wrapper.vm.$nextTick(() => {
-      expect(wrapper.data().currentValue).to.equal('test2');
       expect(eventStub.calledWith('input'));
+      expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test2');
       done();
     });
   });
@@ -70,25 +66,6 @@ describe('Field', () => {
     });
   });
 
-  it('input something to field', (done) => {
-    wrapper = mount(Field, {
-      propsData: {
-        value: ''
-      }
-    });
-
-    const input = wrapper.find('.van-field__control')[0];
-
-    input.element.value = 'test';
-    input.trigger('input');
-
-    wrapper.update();
-    wrapper.vm.$nextTick(() => {
-      expect(wrapper.data().currentValue).to.equal('test');
-      done();
-    });
-  });
-
   it('create a textarea field', () => {
     wrapper = mount(Field, {
       propsData: {
@@ -98,7 +75,7 @@ describe('Field', () => {
     });
 
     expect(wrapper.hasClass('van-field')).to.be.true;
-    expect(wrapper.hasClass('van-field--hastextarea')).to.be.true;
+    expect(wrapper.hasClass('van-field--has-textarea')).to.be.true;
   });
 
   it('create a autosize textarea field', (done) => {
@@ -109,6 +86,10 @@ describe('Field', () => {
       }
     });
 
+    wrapper.vm.$on('input', val => {
+      wrapper.vm.value = val;
+    });
+
     expect(wrapper.hasClass('van-field')).to.be.true;
     expect(wrapper.hasClass('van-field--autosize')).to.be.true;
 
@@ -122,7 +103,7 @@ describe('Field', () => {
 
     wrapper.update();
     setTimeout(() => {
-      expect(wrapper.data().currentValue).to.equal('test');
+      expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test');
       expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
       done();
     }, 500);
@@ -136,6 +117,7 @@ describe('Field', () => {
       }
     });
 
+    wrapper.find('.van-field__icon')[0].trigger('touchstart');
     expect(wrapper.find('.van-field__icon').length).to.equal(1);
   });
 
@@ -148,7 +130,7 @@ describe('Field', () => {
       }
     });
 
-    wrapper.find('.van-field__icon')[0].trigger('click');
+    wrapper.find('.van-field__icon')[0].trigger('touchstart');
     expect(fn.calledOnce).to.be.true;
   });
 

yarn.lock

@@ -7660,8 +7660,8 @@ yeast@0.1.2:
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
 zan-doc@^0.2.12:
-  version "0.2.15"
+  version "0.2.16"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.15.tgz#f169ce77fce1323e257f7b5c674fc56092bf83ec"
+  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.16.tgz#dd458f0a807dea814b412a609679a63a20960077"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"