基于vant简单组件封装

简单封装vant里面input组件

组件封装
根据学长封装的一些较复杂的代码先试着简单的封装vant input组件，可以根据业务复杂度修改组件，这里就先简单的使用
封装的input组件。

<!--
 * @Descripttion: 
 * @version: 
 * @Author: guanxiaoxin
 * @Date: 2020-06-18 09:20:32
 * @LastEditors: guanxiaoxin
 * @LastEditTime: 2020-06-18 12:02:24
 * @FilePath: /guan_qq/src/components/userComponents/UserInput.vue
--> 
<template>
  <div>
    <div v-for="(typeItem, key) in list" :key="key">
      <div v-for="(item, i) in typeItem.itemInfo" :key="i">
        <van-field
          v-if="typeItem.isShow"
          style="margin: 10px 0"
          :label="item.label"
          :type="item.type"
          :name="i"
          :placeholder="item.placeholder"
          :value="saveData[i].value"
          @change="onChange"
          :required="item.required"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInput",
  data() {
    return {
      saveData: {}
    };
  },
  props: {
    list: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
      // 传值给父组件
    getData() {
      let returnData = {};
      for (const key in this.saveData) {
        const item = this.saveData[key];
        returnData[key] = item.value;

        // return true;
        // console.log(returnData);
        // console.log(item)
        // console.log(key)
        // console.log(returnData)
      }
      this.$emit('pass',returnData)
    },
    // 将input输入框里面的值传进去
    onChange(event) {
      this.saveData[event.target.name].value = event.target.value;
      this.getData();
    }
  },
  created() {
      // 初始化saveData数据，将父组件传过来的固定的属性传进去
    for (const typeItem in this.list) {
      for (const item in this.list[typeItem].itemInfo) {
        // console.log(this.list[typeItem].isShow);
        if (this.list[typeItem].isShow) {
          this.saveData[item] = this.list[typeItem].itemInfo[item];
        }
      }
      //   console.log(typeItem);
      //   console.log(this.saveData);
    }
  }
};
</script>

<style>
</style>

然后可以在父组件里面配置一些数据，传到自己封装好的组件中

<!--
 * @Descripttion: 
 * @version: 
 * @Author: guanxiaoxin
 * @Date: 2020-06-18 09:19:05
 * @LastEditors: guanxiaoxin
 * @LastEditTime: 2020-06-18 11:51:38
 * @FilePath: /guan_qq/src/views/User.vue
--> 


<template>
  <div>
    <user-input :list="list" @pass="onchange" />
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import UserInput from "@/components/userComponents/UserInput";

export default {
  data() {
    return {
    // 数据源
      list: {
        userInfo: {
          title: "用户信息",
          isShow: true,
          itemInfo: {
            name: {
              label: "姓名",
              type: "text",
              placeholder: "请输入",
              rules: "/^.{3,16}$/",
              value: "",
              require: true,
              maxlength: "10"
            },
            iphone: {
              label: "联系方式",
              type: "text",
              placeholder: "请输入",
              rules: "/^.{3,16}$/",
              value: "",
              require: true,
              maxlength: "10"
            },
            QQ: {
              label: "QQ",
              type: "text",
              placeholder: "请输入",
              rules: "/^.{3,16}$/",
              value: "",
              require: true,
              maxlength: "10"
            }
          }
        },
        carInfo: {
          title: "车辆信息",
          isShow: false,
          itemInfo: {
            name: {
              label: "姓名1",
              type: "text",
              placeholder: "请输入",
              rules: "/^.{3,16}$/",
              value: "",
              require: true,
              maxlength: "10"
            },
            iphone: {
              label: "联系方式1",
              type: "text",
              placeholder: "请输入",
              rules: "/^.{3,16}$/",
              value: "",
              require: true,
              maxlength: "10"
            },
            QQ: {
              label: "QQ1",
              type: "text",
              placeholder: "请输入",
              rules: "/^.{3,16}$/",
              value: "",
              require: true,
              maxlength: "10"
            }
          }
        },
        houseInfo: {}
      },
      data: {}
    };
  },
  components: {
    UserInput
  },
  methods: {
    onchange(data) {
        this.data = data
    },
    submit() {
        console.log(this.data)
    }
  },
  created() {
  }
};
</script>

<style>
</style>

学到的一些简单的应用