Vant-526互联

移动端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';

测试代码

    <van-tabs>
      <van-tab title="数据录入"></van-tab>
      <van-tab title="数据搜索"></van-tab>
    </van-tabs>

知识点积累

组件销毁前执行

  //组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
  beforeDestroy() {
    this.stopTick();
  },

轮播图

    <van-swipe&nbsp;:autoplay="3000">
      <van-swipe-item v-for="(image, index) in images"&nbsp;: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 属性值来显示
         &nbsp;: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" 
     &nbsp;:before-close="beforeDialogClose"
     &nbsp;:show-cancel-button="showCancelButton">
        <van-picker 
          ref="picker"
          value-key="name"
         &nbsp;: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&nbsp;: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