vant

vant-ui框架在移动端的基本使用：

　　vant官网：https://vant-contrib.gitee.io/vant/#/zh-CN/

　　前提条件

　　　　1.已经安装node.js 

　　　　　　node安装详情请博文：https://www.cnblogs.com/KoBe-bk/p/11451346.html

　　　　2.安装好了vue-cli 脚手架 

　　　　　　 vue-cli脚手架安装详细博文：https://www.cnblogs.com/KoBe-bk/p/11443470.html

　　　　3. 并创建好了vue项目，如何创建vue项目，请查看：https://www.cnblogs.com/KoBe-bk/p/11443470.html

1.下载 vant-ui 到项目中

　　npm i vant -S

2.引入到vue项目中，在main.js中引入

　　下面这种方式是全部引入，缺点 文件太大，特别是对于移动端；不推荐使用，我们我应该按需引入

　　vant全部引入：

　　　　import Vue from 'vue';

　　　　import Vant from 'vant';

　　　　import 'vant/lib/index.css';

　　　　Vue.use(Vant);！

　　按需引入：实际做项目都应该才用这种方式，注意哈

　　　　//按需引入

　　　　import { Uploader, Form, Field, Picker, Radio, RadioGroup, Switch, Divider, Calendar, DatetimePicker, Popup, Button, Area } from 'vant';

　　　　import 'vant/lib/index.css';

　　　　Vue.use(Uploader);

　　　　Vue.use(Form);

　　　　Vue.use(Field);

　　　　Vue.use(Picker);

　　　　Vue.use(Radio);

　　　　Vue.use(RadioGroup);

　　　　Vue.use(Switch);

　　　　Vue.use(Divider);

　　　　Vue.use(Calendar);

　　　　Vue.use(DatetimePicker);

　　　　Vue.use(Popup);

　　　　Vue.use(Button);

　　　　Vue.use(Area);

 

 

在.vue文件中使用vant的Form组件:

　　

<template>

  <div class="user">

    <div class="base-info">

      <van-form @submit="onSubmit">

        <!-- 1.个人资料 -->

        <div class="title icon">

          <div class="words">个人资料</div>

          <div class="img">

            <van-uploader :after-read="afterRead" />

          </div>

        </div>

        <van-field v-model="form.name" name="name" label="姓名" placeholder="请输入姓名" clearable />

        <van-field name="radio" label="性别">

          <template #input>

            <van-radio-group v-model="form.sex" direction="horizontal">

              <van-radio name="男">男</van-radio>

              <van-radio name="女">女</van-radio>

            </van-radio-group>

          </template>

        </van-field>

        <!-- 出生日期 -->

        <van-field

          readonly

          clickable

          name="birth"

          :value="form.birth"

          label="出生日期"

          placeholder="点击选择出生日期"

          @click="showPickerTime = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime"

          :min-date="minDate"

          :max-date="maxDate"

          @confirm="birthConfirm"

        />

        <!-- 婚姻状况 -->

        <van-field

          readonly

          clickable

          name="marry"

          :value="form.marry"

          label="婚姻状况"

          placeholder="点击选择"

          @click="showPicker = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPicker" position="bottom">

          <van-picker

            show-toolbar

            :columns="marryList"

            @confirm="marryConfirm"

            @cancel="showPicker = false"

          />

        </van-popup>

        <!-- 籍贯 -->

        <van-field

          readonly

          clickable

          name="area"

          :value="form.area"

          label="籍贯"

          placeholder="点击选择省市区"

          @click="showArea = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showArea" position="bottom">

          <van-area :area-list="areaList" @confirm="areaConfirm" @cancel="showArea = false" />

        </van-popup>

        <van-field

          v-model="form.height"

          name="height"

          label="身高(cm)"

          placeholder="请输入身高"

          clearable

        />

        <van-field

          v-model="form.weight"

          name="weight"

          label="体重(kg)"

          placeholder="请输入体重"

          clearable

        />

        <van-field v-model="form.email" name="email" label="个人邮箱" placeholder="请输入个人邮箱" clearable />

        <van-field v-model="form.jobs" name="jobs" label="意向岗位" placeholder="请输入意向岗位" clearable />

        <div class="switchChecked">

          <van-field name="switchChecked1" label="是否曾任职于星河集团旗下公司">

            <template #input>

              <van-switch v-model="form.switchChecked1" size="20" />

            </template>

          </van-field>

          <van-field name="switchChecked2" label="是否有亲友任职于星河集团旗下公司">

            <template #input>

              <van-switch v-model="form.switchChecked2" size="20" />

            </template>

          </van-field>

        </div>

        <!-- 证件信息 -->

        <div class="card title">证件信息</div>

        <van-field

          readonly

          clickable

          name="card"

          :value="form.card"

          label="证件信息"

          placeholder="点击选择"

          @click="showPickerCard = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerCard" position="bottom">

          <van-picker

            show-toolbar

            :columns="cardList"

            @confirm="cardConfirm"

            @cancel="showPickerCard = false"

          />

        </van-popup>

        <!-- 证件号码 -->

        <van-field

          v-model="form.cardNumber"

          name="cardNumber"

          label="证件号码"

          placeholder="请输入证件号码"

          clearable

        />

        <!-- 通讯信息 -->

        <div class="communicate title">通讯信息(个人电话必填)</div>

        <van-field

          readonly

          clickablee

          name="communicate"

          :value="form.communicate"

          label="通讯类型"

          placeholder="点击选择"

          @click="showPickerCommunicate = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerCommunicate" position="bottom">

          <van-picker

            show-toolbar

            :columns="communicateList"

            @confirm="communicateConfirm"

            @cancel="showPickerCommunicate = false"

          />

        </van-popup>

        <!-- 通讯号码 -->

        <van-field

          v-model="form.communicateNumber"

          name="communicateNumber"

          label="通讯号码"

          placeholder="请输入通讯号码"

          clearable

        />

        <!-- 地址记录类型 -->

        <div class="address title">地址信息(现常住地址必填)</div>

        <van-field

          readonly

          clickablee

          name="address"

          :value="form.address"

          label="通讯类型"

          placeholder="点击选择"

          @click="showPickerAddress = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerAddress" position="bottom">

          <van-picker

            show-toolbar

            :columns="addressList"

            @confirm="addressConfirm"

            @cancel="showPickerAddress = false"

          />

        </van-popup>

        <!-- 邮政编码 -->

        <van-field

          v-model="form.addressNumber"

          name="addressNumber"

          label="邮政编码"

          placeholder="请输入邮政编码"

          clearable

        />

        <!-- 省份 -->

        <div class="address title">省份</div>

        <van-field

          readonly

          clickablee

          name="provinces"

          :value="form.provinces"

          label="省份"

          placeholder="点击选择"

          @click="showPickerProvinces = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerProvinces" position="bottom">

          <van-picker

            show-toolbar

            :columns="provincesList"

            @confirm="provincesConfirm"

            @cancel="showPickerProvinces = false"

          />

        </van-popup>

        <!-- 详细地址 -->

        <van-field

          v-model="form.addressDetail"

          name="addressDetail"

          label="详细地址"

          placeholder="请输入详细地址"

          clearable

        />

        <!-- 户口所在派出所 -->

        <van-field

          v-model="form.policeStation"

          name="policeStation"

          label="所在派出所"

          placeholder="请输入户口所在派出所"

          clearable

        />

        <!-- 2.家庭成员 -->

        <!-- 关系类型-->

        <div class="family title">关系类型</div>

        <van-field

          readonly

          clickablee

          name="family"

          :value="form.family"

          label="关系类型"

          placeholder="点击选择"

          @click="showPickerFamily = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerFamily" position="bottom">

          <van-picker

            show-toolbar

            :columns="familyList"

            @confirm="familyConfirm"

            @cancel="showPickerFamily = false"

          />

        </van-popup>

        <!-- 性别 -->

        <van-field name="radio2" label="性别">

          <template #input>

            <van-radio-group v-model="form.sex2" direction="horizontal">

              <van-radio name="男">男</van-radio>

              <van-radio name="女">女</van-radio>

            </van-radio-group>

          </template>

        </van-field>

        <van-field v-model="form.name2" name="name2" label="姓名" placeholder="请输入姓名" clearable />

        <!-- 出生日期 -->

        <van-field

          readonly

          clickable

          name="birth2"

          :value="form.birth2"

          label="出生日期"

          placeholder="点击选择出生日期"

          @click="showPickerTime2 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime2"

          :min-date="minDate2"

          :max-date="maxDate2"

          @confirm="birth2Confirm"

        />

        <van-field

          v-model="form.workStation"

          name="workStation"

          label="亲属工作单位"

          placeholder="请输入亲属工作单位"

          clearable

        />

        <div class="switchChecked">

          <van-field name="switchChecked3" label="是否在集团工作">

            <template #input>

              <van-switch v-model="form.switchChecked3" size="20" />

            </template>

          </van-field>

          <van-field name="switchChecked4" label="是否在本市">

            <template #input>

              <van-switch v-model="form.switchChecked4" size="20" />

            </template>

          </van-field>

        </div>

        <van-divider />

        <van-field

          v-model="form.relativePosition"

          name="relativePosition"

          label="亲属职务"

          placeholder="请输入亲属职务"

          clearable

        />

        <van-field

          v-model="form.addressDetail2"

          name="addressDetail2"

          label="详细地址"

          placeholder="请输入详细地址"

          clearable

        />

        <van-field

          v-model="form.otherRelationships"

          name="otherRelationships"

          label="其他关系说明"

          placeholder="请输入其他关系说明"

          clearable

        />

        <van-field

          v-model="form.contactPhoneNumber"

          name="contactPhoneNumber"

          label="联系电话"

          placeholder="请输入联系电话"

          clearable

        />

        <div class="switchChecked">

          <van-field name="switchChecked5" label="是否紧急联系人">

            <template #input>

              <van-switch v-model="form.switchChecked5" size="20" />

            </template>

          </van-field>

        </div>

        <van-divider />

        <!-- 教育经历 -->

        <div class="education title">教育经历(请填写最高学历和第一学历)</div>

        <!-- 入学日期 -->

        <van-field

          readonly

          clickable

          name="birth3"

          :value="form.birth3"

          label="入学日期"

          placeholder="点击选择入学日期"

          @click="showPickerTime3 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime3"

          :min-date="minDate3"

          :max-date="maxDate3"

          @confirm="birth3Confirm"

        />

        <!-- 毕业日期 -->

        <van-field

          readonly

          clickable

          name="birth4"

          :value="form.birth4"

          label="毕业日期"

          placeholder="点击选择毕业日期"

          @click="showPickerTime4 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime4"

          :min-date="minDate4"

          :max-date="maxDate4"

          @confirm="birth4Confirm"

        />

        <!-- 学历-->

        <van-field

          readonly

          clickablee

          name="family"

          :value="form.record"

          label="学历"

          placeholder="点击选择"

          @click="showPickerRecord = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerRecord" position="bottom">

          <van-picker

            show-toolbar

            :columns="recordList"

            @confirm="recordConfirm"

            @cancel="showPickerRecord = false"

          />

        </van-popup>

        <!-- 教育类型-->

        <van-field

          readonly

          clickablee

          name="educationType"

          :value="form.educationType"

          label="教育类型"

          placeholder="点击选择"

          @click="showPickerEducationType = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerEducationType" position="bottom">

          <van-picker

            show-toolbar

            :columns="educationTypeList"

            @confirm="educationTypeConfirm"

            @cancel="showPickerEducationType = false"

          />

        </van-popup>

        <van-field

          v-model="form.graduateSchool"

          name="graduateSchool"

          label="毕业院校"

          placeholder="请输入毕业院校"

          clearable

        />

        <!-- 国家-->

        <van-field

          readonly

          clickablee

          name="countries"

          :value="form.countries"

          label="国家"

          placeholder="点击选择"

          @click="showPickercountries = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickercountries" position="bottom">

          <van-picker

            show-toolbar

            :columns="countriesList"

            @confirm="countriesConfirm"

            @cancel="showPickercountries = false"

          />

        </van-popup>

        <!-- 学位-->

        <van-field

          readonly

          clickablee

          name="degree"

          :value="form.degree"

          label="学位"

          placeholder="点击选择"

          @click="showPickerdegree = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickerdegree" position="bottom">

          <van-picker

            show-toolbar

            :columns="degreeList"

            @confirm="degreeConfirm"

            @cancel="showPickerdegree = false"

          />

        </van-popup>

        <!-- 学制-->

        <van-field

          readonly

          clickablee

          name="eductionalSystme"

          :value="form.eductionalSystme"

          label="学制"

          placeholder="点击选择"

          @click="showPickereductionalSystme = true"

          is-link

          show-toolbar

        />

        <van-popup v-model="showPickereductionalSystme" position="bottom">

          <van-picker

            show-toolbar

            :columns="eductionalSystmeList"

            @confirm="eductionalSystmeConfirm"

            @cancel="showPickereductionalSystme = false"

          />

        </van-popup>

        <van-field

          v-model="form.professional"

          name="professional"

          label="所学专业"

          placeholder="请输入所学专业"

          clearable

        />

        <div class="switchChecked">

          <van-field name="switchChecked6" label="是否第一学历">

            <template #input>

              <van-switch v-model="form.switchChecked6" size="20" />

            </template>

          </van-field>

          <van-field name="switchChecked7" label="是否最高学历">

            <template #input>

              <van-switch v-model="form.switchChecked7" size="20" />

            </template>

          </van-field>

          <van-field name="switchChecked8" label="是否最高学位">

            <template #input>

              <van-switch v-model="form.switchChecked8" size="20" />

            </template>

          </van-field>

        </div>

        <!-- 完整工作履历 -->

        <div class="education title">完整工作履历</div>

        <!-- 开始日期 -->

        <van-field

          readonly

          clickable

          name="birth5"

          :value="form.birth5"

          label="开始日期"

          placeholder="点击选择开始日期"

          @click="showPickerTime5 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime5"

          :min-date="minDate5"

          :max-date="maxDate5"

          @confirm="birth5Confirm"

        />

        <van-field

          readonly

          clickable

          name="birth6"

          :value="form.birth6"

          label="结束日期"

          placeholder="点击选择结束日期"

          @click="showPickerTime6 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime6"

          :min-date="minDate6"

          :max-date="maxDate6"

          @confirm="birth6Confirm"

        />

        <van-field v-model="form.city" name="city" label="城市" placeholder="请输入城市" clearable />

        <van-field

          v-model="form.workUnits"

          name="workUnits"

          label="工作单位"

          placeholder="请输入工作单位"

          clearable

        />

        <van-field

          v-model="form.department"

          name="department"

          label="工作部门"

          placeholder="请输入工作部门"

          clearable

        />

        <van-field v-model="form.jobs2" name="jobs2" label="工作岗位" placeholder="请输入工作岗位" clearable />

        <van-field

          v-model="form.references"

          name="references"

          label="证明人"

          placeholder="请输入证明人"

          clearable

        />

        <van-field

          v-model="form.referenceNumber"

          name="referenceNumber"

          label="证明人电话"

          placeholder="请输入证明人电话"

          clearable

        />

        <!-- 技术职称 -->

        <div class="education title">技术职称 (选填)</div>

        <van-field

          v-model="form.technicalTitles"

          name="technicalTitles"

          label="技术职称"

          placeholder="请输入技术职称"

          clearable

        />

        <van-field

          v-model="form.certificateNumber"

          name="certificateNumber"

          label="证书编号"

          placeholder="请输入证书编号"

          clearable

        />

        <van-field

          readonly

          clickable

          name="birth7"

          :value="form.birth7"

          label="职称取得日期"

          placeholder="点击选择技术职称取得日期"

          @click="showPickerTime7 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime7"

          :min-date="minDate7"

          :max-date="maxDate7"

          @confirm="birth7Confirm"

        />

        <van-field

          readonly

          clickable

          name="birth7"

          :value="form.birth8"

          label="职称失效日期"

          placeholder="点击选择技术职称失效日期"

          @click="showPickerTime8 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime8"

          :min-date="minDate8"

          :max-date="maxDate8"

          @confirm="birth8Confirm"

        />

        <!-- 从业、执业资格 -->

        <div class="education title">从业、执业资格 (选填)</div>

        <van-field

          v-model="form.certificateName"

          name="CertificateName"

          label="资格证书名称"

          placeholder="请输入资格证书名称"

          clearable

        />

        <van-field

          v-model="form.certificateNameNumber"

          name="certificateNameNumber"

          label="证书编号"

          placeholder="请输入证书编号"

          clearable

        />

        <van-field

          readonly

          clickable

          name="birth9"

          :value="form.birth9"

          label="证书取得日期"

          placeholder="点击选择资格证书取得日期"

          @click="showPickerTime9 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime9"

          :min-date="minDate9"

          :max-date="maxDate9"

          @confirm="birth9Confirm"

        />

        <van-field

          readonly

          clickable

          name="birth10"

          :value="form.birth10"

          label="证书失效日期"

          placeholder="点击选择资格证书失效日期"

          @click="showPickerTime10 = true"

          is-link

          show-toolbar

        />

        <van-calendar

          v-model="showPickerTime10"

          :min-date="minDate10"

          :max-date="maxDate10"

          @confirm="birth10Confirm"

        />

        <div class="footer-btn">

          <van-button round block type="info" native-type="submit">下一步</van-button>

        </div>

      </van-form>

    </div>

  </div>

</template>

<script>

import areaList from "../utils/arae.js";

export default {

  name: "User",

  data() {

    return {

      fileList: [

        // Uploader 根据文件后缀来判断是否为图片文件

        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明

      ],

      showPickerTime: false,

      minDate: new Date(1980, 0, 1),

      maxDate: new Date(2010, 0, 31),

      currentDate: new Date(),

      marryList: ["未婚", "已婚", "离异", "其他"],

      showPicker: false,

      areaList: areaList, // 引入地区数据

      showArea: false,

      cardList: ["身份证", "护照", "港澳通行证", "居住证", "健康证", "回乡证"],

      showPickerCard: false,

      communicateList: [

        "个人号码-个人",

        "家庭电话",

        "微信",

        "紧急联系人电话",

        "公司座机",

      ],

      showPickerCommunicate: false,

      addressList: ["暂住", "常驻", "住一次", "偶尔"],

      showPickerAddress: false,

      provincesList: ["江西", "广东", "湖南", "浙江"], //后续在utils文件加下引入

      showPickerProvinces: false,

      // 家庭成员data

      familyList: ["父子", "母子", "亲戚"],

      showPickerFamily: false,

      showPickerTime2: false,

      minDate2: new Date(1980, 0, 1),

      maxDate2: new Date(2010, 0, 31),

      currentDate2: new Date(),

      // 教育经历

      showPickerTime3: false, //入学日期

      minDate3: new Date(1980, 0, 1),

      maxDate3: new Date(2010, 0, 31),

      currentDate3: new Date(),

      showPickerTime4: false, //毕业日期

      minDate4: new Date(1980, 0, 1),

      maxDate4: new Date(2010, 0, 31),

      currentDate4: new Date(),

      recordList: ["中专", "大专", "本科", "硕士", "研究生", "博士"],

      showPickerRecord: false,

      educationTypeList: ["全日制", "在职", "函授", "硕士", "自考", "夜大"],

      showPickerEducationType: false,

      countriesList: ["中国", "美国", "韩国", "日本"], //utils

      showPickercountries: false,

      degreeList: ["无学位", "博士学位", "硕士学位", "学士学位"], //utils

      showPickerdegree: false,

      eductionalSystmeList: ["天", "周", "月", "年", "期间", "分类"],

      showPickereductionalSystme: false,

      showPickerTime5: false, //开始日期

      minDate5: new Date(1980, 0, 1),

      maxDate5: new Date(2010, 0, 31),

      currentDate5: new Date(),

      showPickerTime6: false, //结束日期

      minDate6: new Date(1980, 0, 1),

      maxDate6: new Date(2010, 0, 31),

      currentDate6: new Date(),

      showPickerTime7: false, //技术职称取得日期

      minDate7: new Date(1980, 0, 1),

      maxDate7: new Date(2010, 0, 31),

      currentDate7: new Date(),

      showPickerTime8: false, //技术职称失效日期

      minDate8: new Date(1980, 0, 1),

      maxDate8: new Date(2010, 0, 31),

      currentDate8: new Date(),

      showPickerTime9: false, //资格证书取得日期

      minDate9: new Date(1980, 0, 1),

      maxDate9: new Date(2010, 0, 31),

      currentDate9: new Date(),

      showPickerTime10: false, //资格证书失效日期

      minDate10: new Date(1980, 0, 1),

      maxDate10: new Date(2010, 0, 31),

      currentDate10: new Date(),

      // 表单对象

      form: {

        // 个人资料字段

        name: "", //姓名

        sex: "", //性别

        birth: "", //出生日期

        marry: "", //婚姻状况

        area: "", //籍贯

        height: "", //身高

        weight: "", //体重

        email: "", //个人邮箱

        jobs: "", //意向岗位

        switchChecked1: "",

        switchChecked2: "",

        card: "", //证件信息

        cardNumber: "", //证件号码

        communicate: "", //通讯类型

        communicateNumber: "", //通讯号码

        address: "", //地址记录类型

        addressNumber: "", //邮政编码

        provinces: "", //省份

        addressDetail: "", //详细地址

        policeStation: "", //户口所在派出所

        // 家庭成员字段

        family: "", //关系类型

        showPickerFamily: false,

        sex2: "", //性别

        name2: "", //姓名

        birth2: "", //出生日期

        workStation: "", //亲属工作单位

        switchChecked3: "", //是否在集团工作

        switchChecked4: "", //是否在本市

        relativePosition: "", //亲属职务

        addressDetail2: "", //详细地址

        otherRelationships: "", //其他关系说明

        contactPhoneNumber: "", //联系电话

        switchChecked5: "", //是否紧急联系人

        // 教育经历 education

        birth3: "", //入学日期

        birth4: "", //毕业日期

        record: "", //学历,

        educationType: "", //教育类型

        graduateSchool: "", //毕业院校

        professional: "", //所学专业

        switchChecked6: "", //是否第一学历

        switchChecked7: "", //是否最高学历

        switchChecked8: "", //是否最高学位

        birth5: "", //开始日期

        birth6: "", //结束日期

        city: "", //城市

        workUnits: "", //工作单位

        department: "", //工作部门

        jobs2: "", //工作岗位

        references: "", //证明人

        referenceNumber: "", //证明人电话

        birth7: "", //技术职称取得日期

        birth8: "", //技术职称失效日期

        technicalTitles: "", //技术职称

        certificateNumber: "", //证书编号

        certificateName:"",//资格证书名称

        certificateNameNumber:"",//证书编号

        birth9: "", //资格证书取得日期

        birth10: "", //资格证书失效日期

      },

    };

  },

  created() {

    console.log("list", this.areaList);

  },

  methods: {

    // 上传

    afterRead(file) {

      // 此时可以自行将文件上传至服务器

      console.log(file);

    },

    //时间格式化

    formatDate(birth) {

      return `${birth.getFullYear()}/${

        birth.getMonth() + 1

      }/${birth.getDate()}`;

    },

    // 出生日期确认

    birthConfirm(birth) {

      this.showPickerTime = false;

      this.form.birth = this.formatDate(birth);

    },

    //婚姻状况 确认

    marryConfirm(value) {

      this.form.marry = value;

      this.showPicker = false;

    },

    // 地区确认

    areaConfirm(values) {

      this.form.area = values.map((item) => item.name).join("/");

      this.showArea = false;

    },

    // 证件信息确认

    cardConfirm(value) {

      this.form.card = value;

      this.showPickerCard = false;

    },

    // 通讯信息确认

    communicateConfirm(value) {

      this.form.communicate = value;

      this.showPickerCommunicate = false;

    },

    // 地址类型确认

    addressConfirm(value) {

      this.form.address = value;

      this.showPickerAddress = false;

    },

    // 省份确认

    provincesConfirm(value) {

      this.form.provinces = value;

      this.showPickerProvinces = false;

    },

    // 家庭成员

    // 关系类型确认

    familyConfirm(value) {

      this.form.family = value;

      this.showPickerFamily = false;

    },

    // 出生日期确认

    birth2Confirm(birth2) {

      this.showPickerTime2 = false;

      this.form.birth2 = this.formatDate(birth2);

    },

    // 入学日期确认

    birth3Confirm(birth3) {

      this.showPickerTime3 = false;

      this.form.birth3 = this.formatDate(birth3);

    },

    // 毕业日期确认

    birth4Confirm(birth4) {

      this.showPickerTime4 = false;

      this.form.birth4 = this.formatDate(birth4);

    },

    //学历 确认

    recordConfirm(value) {

      this.form.record = value;

      this.showPickerRecord = false;

    },

    //教育类型确认

    educationTypeConfirm(value) {

      this.form.educationType = value;

      this.showPickerEducationType = false;

    },

    //国家确认

    countriesConfirm(value) {

      this.form.countries = value;

      this.showPickercountries = false;

    },

    //学位确认

    degreeConfirm(value) {

      this.form.degree = value;

      this.showPickerdegree = false;

    },

    //学制确认

    eductionalSystmeConfirm(value) {

      this.form.eductionalSystme = value;

      this.showPickereductionalSystme = false;

    },

    // 开始日期确认

    birth5Confirm(birth5) {

      this.showPickerTime5 = false;

      this.form.birth5 = this.formatDate(birth5);

    },

    // 结束日期确认

    birth6Confirm(birth6) {

      this.showPickerTime6 = false;

      this.form.birth6 = this.formatDate(birth6);

    },

    // 技术职称取得日期确认

    birth7Confirm(birth7) {

      this.showPickerTime7 = false;

      this.form.birth7 = this.formatDate(birth7);

    },

    // 技术职称失效日期确认

    birth8Confirm(birth8) {

      this.showPickerTime8 = false;

      this.form.birth8 = this.formatDate(birth8);

    },

    // 资格证书取得日期

    birth9Confirm(birth9) {

      this.showPickerTime9 = false;

      this.form.birth9 = this.formatDate(birth9);

    },

    // 资格证书失效日期

    birth10Confirm(birth10) {

      this.showPickerTime10 = false;

      this.form.birth10 = this.formatDate(birth10);

    },

    onSubmit(values) {

      console.log("submit", values);

    },

    //取消

    onCancel() {},

  },

};

</script>

<style lang="less" scoped>

// 标题

.title {

  height: 60px;

  padding: 0 20px;

  background-color: #fbfbfb;

  opacity: 1;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-weight: bold;

  font-size: 16px;

}

// 上传头像

/deep/ .van-uploader {

   60px;

  height: 50px;

  border-radius: 50px;

}

/deep/ .van-uploader__upload {

   60px;

  height: 50px;

  border-radius: 50px;

  background-color: #ccc;

  opacity: 0.4;

}

/deep/ .van-uploader__input {

   60px;

  height: 50px;

  border-radius: 50px;

}

// 确认

/deep/ .van-picker__confirm {

  color: #1989fa;

}

// 日历 选中日期

/deep/ .van-calendar__selected-day {

  background-color: #1989fa;

}

// 日历：确认

/deep/ .van-calendar__confirm {

  background-color: #1989fa;

}

// 修改日历 高度

/deep/ .van-calendar__popup.van-popup--bottom,

.van-calendar__popup.van-popup--top {

  height: 80%;

}

/deep/ .van-button--danger {

  color: #fff;

  border: 1px solid #1989fa;

}

.van-cell__title {

  text-align: left;

}

.switchChecked {

  background-color: #ccc;

  /deep/ .van-field {

    display: flex;

    justify-content: space-between;

    .van-field__label {

      flex: 5;

    }

    .van-field__value {

      flex: 1;

    }

  }

}

// 下划线样式

.van-cell::after {

  position: absolute;

  box-sizing: border-box;

  content: " ";

  pointer-events: none;

  right: 16px;

  bottom: 0;

  left: 16px;

  border-bottom: 1px solid #ccc;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

}

// 底部btn

.footer-btn{

  margin: 80px 20px 50px 20px;

}

</style>

　　

　　

vant在项目中使用，也可以查看 vant官网上的详细介绍哈：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

 　　

　　

　　

哈尔滨冬天的雪，很白很美！！