钉钉端扫名片实现

image.png

以上显示的字段为固定字段，一开始编写页面的时候，直接按照样式图逐个显示，然后在拿到值 进行渲染
无意中看到别人的代码

<ul>
      <template v-for="(item,index) in tabList">
        <li class='card-item flex'
            :key="index">
          <span class='ml15'
                :class="item.icon"></span>
          <span class='ml10'>{{item.label}}</span>
          <input type="text"
                 v-model="form[item.id]"
                 :placeholder="item.placeholder">
        </li>
      </template>
    </ul>

  tabList: [{
        label: '姓名',
        placeholder: '请输入姓名',
        id: 'name',
        icon: 'icon-card-pepple'
      }, {
        label: '电话',
        placeholder: '请输入电话',
        id: 'phone',
        icon: 'icon-card-photo'
      }, {
        label: '地址',
        placeholder: '请输入地址',
        id: 'address',
        icon: 'icon-card-adress'
      }, {
        label: '邮箱',
        placeholder: '请输入邮箱',
        id: 'email',
        icon: 'icon-card-email'
      }, {
        label: '公司',
        placeholder: '请输入公司名',
        id: 'company',
        icon: 'icon-card-company'
      }],
      form: {
        'name': '',
        'phone': '',
        'address': '',
        'email': '',
        'company': ''
      },

initData () {
      // 初始化数据
      this.form.name = this.getData.NAME || ''
      this.form.phone = this.getData.MPHONE || ''
      this.form.address = this.getData.ADDRESS || ''
      this.form.email = this.getData.MAIL || ''
      this.form.company = this.getData.COMPANY || ''
    },

简洁明了，果然别人那么多工资不是白拿的啊

转载于:https://www.jianshu.com/p/6520a749a392