柚子快报激活码778899分享：Vant

http://www.51969.com/

移动端UI库

官网

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

 

之前的旧版本

https://youzan.github.io/vant

 

创建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';

测试代码

知识点积累

组件销毁前执行

//组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。

beforeDestroy() {

this.stopTick();

},

轮播图

柚子快报激活码778899分享：Vant 第1张

data () {

return {

images: [

'/static/img/1.jpg',

'/static/img/1.jpg',

],

...

 

移动端的选择框

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);

title="请选择工种"

v-model="show"

 :before-close="beforeDialogClose"

 :show-cancel-button="showCancelButton">

ref="picker"

value-key="name"

 :columns="columns"

@change="onChange" />

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 表明是多选框图标

 

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("");

}

}

},

 

并排在一起的单选框

【注意】 如果 user.sex 返回值类型是 数字 类型，那么，注意 name 的匹配写法应如下所示：

女

路由跳转

this.$router.push("/practice")

 

获取路由传递的参数

// 跳转的路由配置

// 获取路由的参数

// 可以在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

柚子快报激活码778899分享：Vant

http://www.51969.com/

查看原文