Merge pull request #160 from chenjiahan/dev

add Contact components

docs/examples-docs/address-list.md

@@ -110,7 +110,7 @@ export default {
 |-----------|-----------|-----------|
 | add | 点击新增按钮时触发 | - |
 | edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
-| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
 
 ### 数据格式
 #### 地址列表字段说明

docs/examples-docs/contact.md

@@ -0,0 +1,245 @@
+<style>
+  .demo-contact {
+    .van-popup {
+      height: 100%;
+    }
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      chosenContactId: null,
+      editingContact: {},
+      showList: false,
+      showEdit: false,
+      isEdit: false,
+      list: [{
+        name: '张三',
+        tel: '13000000000',
+        id: 0
+      }]
+    };
+  },
+
+  computed: {
+    cardType() {
+      return this.chosenContactId !== null ? 'edit' : 'add';
+    },
+
+    currentContact() {
+      const id = this.chosenContactId;
+      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+    }
+  },
+
+  methods: {
+    onAdd() {
+      this.editingContact = { id: this.list.length };
+      this.isEdit = false;
+      this.showEdit = true;
+    },
+
+    onEdit(item) {
+      this.isEdit = true;      
+      this.showEdit = true;
+      this.editingContact = item;
+    },
+
+    onSelect() {
+      this.showList = false;
+    },
+
+    onSave(info) {
+      this.showEdit = false;
+      this.showList = false;
+      
+      if (this.isEdit) {
+        this.list = this.list.map(item => item.id === info.id ? info : item);
+      } else {
+        this.list.push(info);
+      }
+      this.chosenContactId = info.id;
+    },
+
+    onDelete(info) {
+      this.showEdit = false;
+      this.list = this.list.filter(item => item.id !== info.id);
+      if (this.chosenContactId === info.id) {
+        this.chosenContactId = null;
+      }
+    }
+  }
+};
+</script>
+
+## Contact 联系人
+通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
+
+### 使用指南
+``` javascript
+import { ContactCard, ContactList, ContactEdit } from 'vant';
+
+Vue.component(ContactCard.name, ContactCard);
+Vue.component(ContactList.name, ContactList);
+Vue.component(ContactEdit.name, ContactEdit);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<!-- 联系人卡片 -->
+<van-contact-card
+  :type="cardType"
+  :name="currentContact.name"
+  :tel="currentContact.tel"
+  @click="showList = true"
+></van-contact-card>
+
+<!-- 联系人列表 -->
+<van-popup v-model="showList" position="bottom">
+  <van-contact-list
+    v-model="chosenContactId"
+    :list="list"
+    @add="onAdd"
+    @edit="onEdit"
+    @select="onSelect"
+  />
+</van-popup>
+
+<!-- 联系人编辑 -->
+<van-popup v-model="showEdit" position="bottom">
+  <van-contact-edit
+    :contact-info="editingContact"
+    :is-edit="isEdit"
+    @save="onSave"
+    @delete="onDelete"
+  />
+</van-popup>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      chosenContactId: null,
+      editingContact: {},
+      showList: false,
+      showEdit: false,
+      isEdit: false,
+      list: [{
+        name: '张三',
+        tel: '13000000000',
+        id: 0
+      }]
+    };
+  },
+
+  computed: {
+    cardType() {
+      return this.chosenContactId !== null ? 'edit' : 'add';
+    },
+
+    currentContact() {
+      const id = this.chosenContactId;
+      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+    }
+  },
+
+  methods: {
+    // 添加联系人
+    onAdd() {
+      this.editingContact = { id: this.list.length };
+      this.isEdit = false;
+      this.showEdit = true;
+    },
+
+    // 编辑联系人
+    onEdit(item) {
+      this.isEdit = true;      
+      this.showEdit = true;
+      this.editingContact = item;
+    },
+
+    // 选中联系人
+    onSelect() {
+      this.showList = false;
+    },
+
+    // 保存联系人
+    onSave(info) {
+      this.showEdit = false;
+      this.showList = false;
+      
+      if (this.isEdit) {
+        this.list = this.list.map(item => item.id === info.id ? info : item);
+      } else {
+        this.list.push(info);
+      }
+      this.chosenContactId = info.id;
+    },
+
+    // 删除联系人
+    onDelete(info) {
+      this.showEdit = false;
+      this.list = this.list.filter(item => item.id !== info.id);
+      if (this.chosenContactId === info.id) {
+        this.chosenContactId = null;
+      }
+    }
+  }
+};
+```
+:::
+
+### ContactCard API
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| type | 类型，分为添加和编辑两种样式 | `String` | `add` | `edit` |
+| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
+| name | 联系人姓名 | `String` | - | - |
+| tel | 联系人手机号 | `String` | - | - |
+
+### ContactList API
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中联系人的 id | `String | Number` | - | - |
+| addText | 新建按钮文案 | `String` | `新建联系人` | - |
+| list | 联系人列表 | `Array` | `[]` | - |
+
+### ContactList Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
+| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
+
+
+### ContactEdit API
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| contactInfo | 联系人信息 | `Object` | `[]` | - |
+| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
+
+### ContactEdit Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| save | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+
+### 数据格式
+
+#### 联系人数据格式
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| id | 每位联系人的唯一标识 | `String | Number` |
+| name | 联系人姓名 | `String` |
+| tel | 联系人手机号 | `String` |

docs/src/doc.config.js

@@ -226,6 +226,10 @@ module.exports = {
                 "path": "/area",
                 "title": "Area 省市区选择"
               },
+              {
+                "path": "/contact",
+                "title": "Contact 联系人"
+              },
               {
                 "path": "/coupon",
                 "title": "Coupon 优惠券选择器"

package.json

@@ -98,7 +98,7 @@
     "mocha": "^3.4.2",
     "postcss": "^6.0.10",
     "postcss-calc": "^6.0.0",
-    "postcss-easy-import": "^2.1.0",
+    "postcss-easy-import": "^3.0.0",
     "postcss-loader": "^2.0.6",
     "precss": "2.0.0",
     "progress-bar-webpack-plugin": "^1.10.0",

packages/address-list/index.vue

@@ -3,7 +3,7 @@
     <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)">
+          <van-radio :name="item.id" @click="$emit('select', item, index)">
             <div class="van-address-list__name">{{ item.name }}，{{ item.tel }}</div>
             <div class="van-address-list__address">收货地址：{{ item.address }}</div>
           </van-radio>

packages/contact-card/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="['van-contact-card', `van-contact-card--${type}`]" v-on="$listeners">
+    <div class="van-contact-card__content">
+      <template v-if="type === 'add'">
+        <van-icon class="van-contact-card__icon" name="add2" />
+        <div class="van-contact-card__text">{{ addText }}</div>
+      </template>
+      <template v-else-if="type === 'edit'">
+        <van-icon class="van-contact-card__icon" name="contact" />
+        <div class="van-contact-card__text">
+          <p>联系人：{{ name }}</p>
+          <p>联系电话：{{ tel }}</p>
+        </div>
+      </template>
+    </div>
+    <van-icon class="van-contact-card__arrow" name="arrow" />
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+export default {
+  name: 'van-contact-card',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'add'
+    },
+    name: {
+      type: String
+    },
+    tel: {
+      type: String
+    },
+    addText: {
+      type: String,
+      default: '添加订单联系人信息'
+    }
+  }
+};
+</script>

packages/contact-edit/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="van-contact-edit">
+    <van-cell-group>
+      <van-field
+        label="联系人"
+        maxlength="30"
+        placeholder="名字"
+        v-model="currentInfo.name"
+        :error="errorInfo.name"
+        @focus="onFocus('name')">
+      </van-field>
+      <van-field
+        type="tel"
+        label="联系电话"
+        placeholder="手机或固定电话"
+        v-model="currentInfo.tel"
+        :error="errorInfo.tel"
+        @focus="onFocus('tel')">
+      </van-field>
+    </van-cell-group>
+    <div class="van-contact-edit__buttons">
+      <van-button block :loading="isSaving" @click="onSaveContact" type="primary">保存</van-button>
+      <van-button block :loading="isDeleting" @click="onDeleteContact" v-if="isEdit">删除联系人</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Field from '../field';
+import Button from '../button';
+import CellGroup from '../cell-group';
+import Dialog from '../dialog';
+import Toast from '../toast';
+import validateMobile from 'zan-utils/validate/mobile';
+
+export default {
+  name: 'van-contact-edit',
+
+  components: {
+    [Field.name]: Field,
+    [Button.name]: Button,
+    [CellGroup.name]: CellGroup
+  },
+
+  props: {
+    isEdit: Boolean,
+    isSaving: Boolean,
+    isDeleting: Boolean,
+    contactInfo: {
+      type: Object,
+      default: () => ({
+        id: '',
+        tel: '',
+        name: ''
+      })
+    }
+  },
+
+  data() {
+    return {
+      currentInfo: this.contactInfo,
+      errorInfo: {
+        name: false,
+        tel: false
+      }
+    };
+  },
+
+  watch: {
+    contactInfo(val) {
+      this.currentInfo = val;
+    }
+  },
+
+  methods: {
+    onFocus(key) {
+      this.errorInfo[key] = false;
+    },
+
+    getErrorMessageByKey(key) {
+      const value = this.currentInfo[key];
+      switch (key) {
+        case 'name':
+          return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
+        case 'tel':
+          return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
+      }
+    },
+
+    onSaveContact() {
+      const items = [
+        'name',
+        'tel'
+      ];
+
+      const isValid = items.every(item => {
+        const msg = this.getErrorMessageByKey(item);
+        if (msg) {
+          this.errorInfo[item] = true;
+          Toast(msg);
+        }
+        return !msg;
+      });
+
+      if (isValid && !this.isSaving) {
+        this.$emit('save', this.currentInfo);
+      }
+    },
+
+    onDeleteContact() {
+      if (this.isDeleting) {
+        return;
+      }
+
+      Dialog.confirm({
+        message: `确定要删除这个联系人么`
+      }).then(() => {
+        this.$emit('delete', this.currentInfo);
+      });
+    }
+  }
+};
+</script>

packages/contact-list/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="van-contact-list">
+    <van-radio-group :value="value" @input="$emit('input', $event)">
+      <van-cell-group>
+        <van-cell v-for="(item, index) in list" :key="item.id">
+          <van-radio :name="item.id" @click="$emit('select', item, index)">
+            <p class="van-contact-list__text">联系人：{{ item.name }}</p>
+            <p class="van-contact-list__text">联系电话：{{ item.tel }}</p>
+          </van-radio>
+          <van-icon name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
+        </van-cell>
+      </van-cell-group>
+    </van-radio-group>
+    <van-cell icon="add" class="van-contact-list__add van-hairline--top" @click="$emit('add')" :title="addText" isLink />
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+import Cell from '../cell';
+import Radio from '../radio';
+import CellGroup from '../cell-group';
+import RadioGroup from '../radio-group';
+
+export default {
+  name: 'van-contact-list',
+
+  components: {
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [Radio.name]: Radio,
+    [CellGroup.name]: CellGroup,
+    [RadioGroup.name]: RadioGroup
+  },
+
+  props: {
+    value: {},
+    addText: {
+      type: String,
+      default: '新建联系人'
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+};
+</script>

packages/index.js

@@ -12,6 +12,9 @@ import CellSwipe from './cell-swipe';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
 import Col from './col';
+import ContactCard from './contact-card';
+import ContactEdit from './contact-edit';
+import ContactList from './contact-list';
 import CouponCell from './coupon-cell';
 import CouponList from './coupon-list';
 import DatetimePicker from './datetime-picker';
@@ -70,6 +73,9 @@ const components = [
   Checkbox,
   CheckboxGroup,
   Col,
+  ContactCard,
+  ContactEdit,
+  ContactList,
   CouponCell,
   CouponList,
   DatetimePicker,
@@ -138,6 +144,9 @@ export {
   Checkbox,
   CheckboxGroup,
   Col,
+  ContactCard,
+  ContactEdit,
+  ContactList,
   CouponCell,
   CouponList,
   DatetimePicker,

packages/vant-css/src/contact-card.css

@@ -0,0 +1,59 @@
+@import './common/var.css';
+
+.van-contact-card {
+  position: relative;
+  background-color: #fff;
+
+  &--add {
+    line-height: 40px;
+
+    .van-contact-card__icon {
+      color: $blue;
+      font-size: 40px;
+    }
+  }
+
+  &--edit {
+    .van-contact-card__icon {
+      font-size: 18px;
+      vertical-align: top;
+    }
+  }
+
+  &__content {
+    padding: 15px 10px;
+  }
+
+  &__icon,
+  &__text {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &__icon {
+    margin-right: 10px;
+  }
+
+  &__text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  &__arrow {
+    top: 50%;
+    right: 10px;
+    font-size: 12px;
+    position: absolute;
+    color: $gray-dark;
+    transform: translate3d(0, -50%, 0);
+  }
+
+  &::after {
+    content: ' ';
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-image: url('data:image/false;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAECAYAAAA3S5neAAAAAXNSR0IArs4c6QAAAIpJREFUOBHF0iESg1AMBNDshx4H0+EUSCxnQKBAVDIMjhnOgO8NOADTI7V/CcjU58ckq/aJQHTYto2u7bpdB3hjXWvb+Ry/jTC6e6CeQBIK6i3KJWfZbHsuDxiTeCCcc+m6SlGFhTnkHcty2J5y+lVM4NHv2D+vxxEkxsGiXHIIf99x95JJPIDcnhMVeyVty5S/SAAAAABJRU5ErkJggg==');
+    background-size: 34px 2px;
+  }
+}

packages/vant-css/src/contact-edit.css

@@ -0,0 +1,21 @@
+@import './common/var.css';
+
+.van-contact-edit {
+  &__buttons {
+    padding: 20px 10px;
+  }
+
+  &__default {
+    .van-cell__title {
+      line-height: 31px;
+    }
+
+    .van-cell__value {
+      height: 31px;
+    }
+  }
+
+  .van-button {
+    margin-bottom: 10px;
+  }
+}

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

@@ -0,0 +1,58 @@
+@import './common/var.css';
+
+.van-contact-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;
+  }
+
+  &__text {
+    font-size: 14px;
+    color: #333;
+    line-height: 1.5;
+  }
+
+  &__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/index.css

@@ -52,6 +52,9 @@
 /* business components */
 @import './address-edit.css';
 @import './address-list.css';
+@import './contact-card.css';
+@import './contact-list.css';
+@import './contact-edit.css';
 @import './coupon-list.css';
 @import './goods-action.css';
 @import './submit-bar.css';

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

@@ -231,7 +231,6 @@ describe('AddressEdit', () => {
     wrapper.vm.onDeleteAddress();
 
     setTimeout(() => {
-      expect(document.querySelectorAll('.van-dialog').length).to.equal(0);
       wrapper.vm.isDeleting = false;
       wrapper.vm.$nextTick(() => {
         deleteButton.trigger('click');

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

@@ -63,7 +63,7 @@ describe('AddressList', () => {
     wrapper.find('.van-address-list__edit')[0].trigger('click');
   });
 
-  it('listen to change event', (done) => {
+  it('listen to select event', (done) => {
     wrapper = mount(AddressList, {
       propsData: {
         value: '1',
@@ -71,7 +71,7 @@ describe('AddressList', () => {
       }
     });
 
-    wrapper.vm.$on('change', (item, index) => {
+    wrapper.vm.$on('select', (item, index) => {
       expect(item.id).to.equal('3');
       done();
     });

test/unit/specs/contact.spec.js

@@ -0,0 +1,256 @@
+import ContactCard from 'packages/contact-card';
+import ContactList from 'packages/contact-list';
+import ContactEdit from 'packages/contact-edit';
+import { mount } from 'avoriaz';
+
+describe('ContactCard', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a ContactCard', () => {
+    wrapper = mount(ContactCard);
+    expect(wrapper.hasClass('van-contact-card')).to.be.true;
+  });
+
+  it('create a add ContactCard', done => {
+    wrapper = mount(ContactCard, {
+      propsData: {
+        type: 'add'
+      }
+    });
+
+    expect(wrapper.hasClass('van-contact-card')).to.be.true;
+    expect(wrapper.find('.van-contact-card__text')[0].text()).to.equal('添加订单联系人信息');
+
+    wrapper.vm.addText = '测试文案';
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('.van-contact-card__text')[0].text()).to.equal('测试文案');
+      done();
+    });
+  });
+
+  it('create a edit ContactCard', () => {
+    wrapper = mount(ContactCard, {
+      propsData: {
+        type: 'edit',
+        tel: '13000000000',
+        name: '测试姓名'
+      }
+    });
+
+    expect(wrapper.hasClass('van-contact-card')).to.be.true;
+    expect(wrapper.find('.van-contact-card__text p')[0].text()).to.equal('联系人：测试姓名');
+    expect(wrapper.find('.van-contact-card__text p')[1].text()).to.equal('联系电话：13000000000');
+  });
+});
+
+describe('ContactList', () => {
+  const list = [
+    {
+      id: '1',
+      name: '张三',
+      tel: '13000000000'
+    },
+    {
+      id: '2',
+      name: '李四',
+      tel: '1310000000'
+    },
+    {
+      id: '3',
+      name: '王五',
+      tel: '1320000000'
+    }
+  ];
+
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a ContactList', () => {
+    wrapper = mount(ContactList);
+    expect(wrapper.hasClass('van-contact-list')).to.be.true;
+  });
+
+  it('create a ContactList with three items', () => {
+    wrapper = mount(ContactList, {
+      propsData: {
+        value: '1',
+        list
+      }
+    });
+    expect(wrapper.find('.van-cell').length).to.equal(4);
+    expect(wrapper.find('.van-icon-checked').length).to.equal(1);
+  });
+
+  it('listen to add & edit event', (done) => {
+    wrapper = mount(ContactList, {
+      propsData: {
+        list
+      }
+    });
+
+    const add = sinon.spy();
+    wrapper.vm.$on('add', add);
+    wrapper.find('.van-contact-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-contact-list__edit')[0].trigger('click');
+  });
+
+  it('listen to select event', (done) => {
+    wrapper = mount(ContactList, {
+      propsData: {
+        value: '1',
+        list
+      }
+    });
+
+    wrapper.vm.$on('select', (item, index) => {
+      expect(item.id).to.equal('3');
+      done();
+    });
+    wrapper.find('.van-radio')[2].trigger('click');
+  });
+});
+
+describe('ContactEdit', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a ContactEdit', () => {
+    wrapper = mount(ContactEdit);
+    expect(wrapper.hasClass('van-contact-edit')).to.be.true;
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
+  });
+
+  it('create a ContactEdit with props', () => {
+    const contactInfo = {
+      name: '测试',
+      tel: '123123213'
+    };
+
+    wrapper = mount(ContactEdit, {
+      propsData: {
+        contactInfo
+      }
+    });
+
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal(contactInfo.name);
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal(contactInfo.tel);
+  });
+
+  it('save contactInfo', () => {
+    const contactInfo = {
+      name: '',
+      tel: '123123213'
+    };
+
+    wrapper = mount(ContactEdit, {
+      propsData: {
+        contactInfo
+      }
+    });
+
+    const saveSpy = sinon.spy();
+    wrapper.vm.$on('save', saveSpy);
+
+    const saveButton = wrapper.find('.van-button')[0];
+
+    // name empty
+    wrapper.vm.contactInfo.name = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['name']).to.be.false;
+
+    // name too long
+    wrapper.vm.contactInfo.name = '111111111111111111111111111';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['name']).to.be.false;
+
+    // tel empty
+    wrapper.vm.contactInfo.name = '123';
+    wrapper.vm.contactInfo.tel = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['tel']).to.be.true;
+    wrapper.find('.van-field__control')[1].trigger('focus');
+    expect(wrapper.vm.errorInfo['tel']).to.be.false;
+
+    // tel invalid
+    wrapper.vm.contactInfo.tel = 'abc';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['tel']).to.be.true;
+    wrapper.find('.van-field__control')[1].trigger('focus');
+    expect(wrapper.vm.errorInfo['tel']).to.be.false;
+
+    // saving
+    wrapper.vm.contactInfo.tel = '13000000000';
+    saveButton.trigger('click');
+    wrapper.vm.isSaving = true;
+    saveButton.trigger('click');
+    expect(saveSpy.calledOnce).to.be.true;
+  });
+
+  it('delete', done => {
+    wrapper = mount(ContactEdit, {
+      attachToDocument: true,
+      propsData: {
+        isDeleting: true,
+        isEdit: true,
+        contactInfo: {
+          id: '123'
+        }
+      }
+    });
+
+    const deleteButton = wrapper.find('.van-button')[1];
+    deleteButton.trigger('click');
+    wrapper.vm.onDeleteContact();
+
+    setTimeout(() => {
+      wrapper.vm.isDeleting = false;
+      wrapper.vm.$nextTick(() => {
+        deleteButton.trigger('click');
+        setTimeout(() => {
+          expect(document.querySelectorAll('.van-dialog').length).to.equal(1);
+
+          wrapper.vm.$on('delete', () => {
+            done();
+          });
+          document.querySelector('.van-dialog__confirm').click();
+        }, 300);
+      });
+    }, 300);
+  });
+
+  it('watch contactInfo', done => {
+    const contactInfo = {
+      name: '123'
+    };
+
+    wrapper = mount(ContactEdit, {
+      propsData: {
+        contactInfo: {}
+      }
+    });
+
+    wrapper.setProps({ contactInfo });
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.currentInfo.name).to.equal('123');
+      done();
+    });
+  });
+});

yarn.lock

@@ -133,10 +133,6 @@ ansi-styles@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
 
-any-promise@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
-
 anymatch@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
@@ -3669,7 +3665,7 @@ is-extglob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
 
-is-extglob@^2.1.0:
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
@@ -3701,6 +3697,12 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-my-json-valid@^2.10.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
@@ -5479,17 +5481,17 @@ postcss-discard-unused@^2.2.1:
     postcss "^5.0.14"
     uniqs "^2.0.0"
 
-postcss-easy-import@^2.1.0:
+postcss-easy-import@^3.0.0:
-  version "2.1.0"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-2.1.0.tgz#1d49f8a7c404415cfee4e5cb7a15fdf866c13022"
+  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz#8eaaf5ae59566083d0cae98735dfd803e3ab194d"
   dependencies:
     globby "^6.1.0"
-    is-glob "^3.1.0"
+    is-glob "^4.0.0"
     lodash "^4.17.4"
     object-assign "^4.0.1"
-    pify "^2.3.0"
+    pify "^3.0.0"
-    postcss "^5.0.15"
+    postcss "^6.0.11"
-    postcss-import "^9.1.0"
+    postcss-import "^10.0.0"
     resolve "^1.1.7"
 
 postcss-extend@^1.0.5:
@@ -5515,17 +5517,6 @@ postcss-import@^10.0.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-import@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-9.1.0.tgz#95fe9876a1e79af49fbdc3589f01fe5aa7cc1e80"
-  dependencies:
-    object-assign "^4.0.1"
-    postcss "^5.0.14"
-    postcss-value-parser "^3.2.3"
-    promise-each "^2.2.0"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
 postcss-js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.1.tgz#ffaf29226e399ea74b5dce02cab1729d7addbc7b"
@@ -5797,7 +5788,7 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.15, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
   version "5.2.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
   dependencies:
@@ -5814,7 +5805,15 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.6:
     source-map "^0.5.7"
     supports-color "^4.2.1"
 
-postcss@^6.0.10, postcss@^6.0.11, postcss@^6.0.3, postcss@^6.0.9:
+postcss@^6.0.10:
+  version "6.0.12"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.12.tgz#6b0155089d2d212f7bd6a0cecd4c58c007403535"
+  dependencies:
+    chalk "^2.1.0"
+    source-map "^0.5.7"
+    supports-color "^4.4.0"
+
+postcss@^6.0.11, postcss@^6.0.3, postcss@^6.0.9:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.11.tgz#f48db210b1d37a7f7ab6499b7a54982997ab6f72"
   dependencies:
@@ -5894,12 +5893,6 @@ progress@^1.1.8, progress@~1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
 
-promise-each@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/promise-each/-/promise-each-2.2.0.tgz#3353174eff2694481037e04e01f77aa0fb6d1b60"
-  dependencies:
-    any-promise "^0.1.0"
-
 proxy-addr@~1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"