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组件:

<van-form @submit="onSubmit">

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

</div>

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

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

<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 />

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

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

</template>

</van-field>

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

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

</template>

</van-field>

</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

<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

<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="性别">

<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

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

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

</template>

</van-field>

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

<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

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

<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

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

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

</template>

</van-field>

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

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

</template>

</van-field>

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

<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

<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"

<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"

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

</div>

</van-form>

</div>

</template>

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>

// 标题

.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 {

width: 60px;

height: 50px;

border-radius: 50px;

}

/deep/ .van-uploader__upload {

width: 60px;

height: 50px;

border-radius: 50px;

background-color: #ccc;

opacity: 0.4;

}

/deep/ .van-uploader__input {

width: 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

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

posted @ 2020-09-21 14:08 Kobe_bk 阅读(1124) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Kobe-bk

vant

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

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

公告