移动端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
引入组件的方式
https://www.cnblogs.com/Jiangchuanwei/p/9857557.html
标签:Vant,vant,https,import,data,路由,name From: https://www.cnblogs.com/lvye1221/p/17317417.html