Vant
移动端UI库
官网
https://vant-contrib.gitee.io/vant/#/zh-CN/
之前的旧版本
创建Vue项目
sudo cnpm install -g @vue/cli # 打开图形化界面 vue ui
图形化项目操作真的好酷呀！
注意，选择项目预设 时，选择自定义，这样可以勾选 路由 和 vuex 等插件。
安装完后的启动操作 npm run serve
更新样式
安装依赖，并引入全部样式
cnpm i vant -S // src/main.js 添加 import Vant from 'vant'; import 'vant/lib/vant-css/index.css'; Vue.use(Vant);
最新版样式代码更新如下：
import Vant from 'vant'; import 'vant/lib/index.css';
测试代码
<van-tabs>
<van-tab title="数据录入"></van-tab>
<van-tab title="数据搜索"></van-tab>
</van-tabs>
知识点积累
组件销毁前执行
//组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
beforeDestroy() {
this.stopTick();
},
轮播图
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" style="width:100%" />
</van-swipe-item>
</van-swipe>
data () {
return {
images: [
'/static/img/1.jpg',
'/static/img/1.jpg',
],
...
移动端的选择框
<van-picker
ref="picker"
value-key="name" // 说明采用的是对象中 name 属性值来显示
:columns="columns"
@change="onChange" />
// 其中 values 是 第一级 选中的值（这个值可以是对象。）
onChange(picker, values) {
picker.setColumnValues(1, values[0].list);
},
// ret.data 类似于 { name: "123", list: [{name: "456"}] ...} 的形式
this.columns = [{
values: ret.data,
className: 'column1'
}, {
values: ret.data[0].list,
className: 'column2'
}];
对话框
// 如果是自己组件页面中使用的话，一定要导入这行代码，不然提示找不到 Dialog 这个变量
import { Dialog } from 'vant';
Vue.use(Dialog);
<van-dialog
title="请选择工种"
v-model="show"
:before-close="beforeDialogClose"
:show-cancel-button="showCancelButton">
<van-picker
ref="picker"
value-key="name"
:columns="columns"
@change="onChange" />
</van-dialog>
beforeDialogClose(action, done) {
if (action === 'confirm') {
var parent = this.$refs.picker.getColumnValue(0);
var child = this.$refs.picker.getColumnValue(1);
var jobtype = parent.name + "—" + child.name
var jobtypeId = child.jobtypeId;
this.updateJobtype(
jobtype,
jobtypeId,
() => {
done();
this.show = false;
});
} else {
done();
this.show = false;
}
多选框实现
square 表明是多选框图标
<van-checkbox shape="square"
computed: {
// 多选答案 {
mulStuAnswer: {
// getter
get: function () {
if (this.data.anwser == null) {
this.data.anwser = "";
}
return this.data.anwser.split("");
},
// setter
set: function (newValue) {
this.data.anwser = newValue.join("");
}
}
},
并排在一起的单选框
<van-cell>
<template slot="title">
<van-radio-group v-model="user.sex" >
<van-row>
<van-col span="5">
性别
</van-col>
<van-col span="4">
<van-radio name="0">女</van-radio>
</van-col>
<van-col span="4">
<van-radio name="1">男</van-radio>
</van-col>
</van-row>
</van-radio-group>
</template>
</van-cell>
【注意】 如果 user.sex 返回值类型是 数字 类型，那么，注意 name 的匹配写法应如下所示：
<van-radio :name="0">女</van-radio>
路由跳转
this.$router.push("/practice")
获取路由传递的参数
// 跳转的路由配置
<van-cell icon="certificate" is-link :to="{
path: '/question',
query: {
questionType: 0,
orderNum: 1,
}}">
// 获取路由的参数
// 可以在mounted 的时候获取
getParams () {
let routerParams = this.$route.query
// 将数据放在当前组件的数据内
this.questionType = routerParams.questionType;
if (!routerParams.orderNum) {
routerParams.orderNum = 1;
}
this.orderNum = routerParams.orderNum;
},
如果需要传递对象等参数，就需要借助到 params 参数啦：
// 跳转
this.$router.push({
// path: '/endExam',
name:'EndExam', // 需要注意必须采用name传递，否则 params 会失效
params: ret.data
});
// 接收
this.$route.params
https://segmentfault.com/q/1010000009877482
多层路由实现方式
https://www.cnblogs.com/IvyXia/p/7515727.htmlhttps://www.cnblogs.com/IvyXia/p/7515727.html
依赖库
遇到Module not found:Error:Can`t resolve 'less-loader' 问题。
npm install --save-dev less-loader less
引入组件的方式
浙公网安备 33010602011771号