mpvue + Vant Weapp 开发小程序之 van-checkbox 和 van-checkbox-group

声明:我的文章很详(luo)细(suo),适合基础特别差的人看。


1.引入

首先,安装Vant Weapp

#根目录下打开命令提示符

# 通过 npm 安装
npm i vant-weapp -S --production

# 通过 yarn 安装
yarn add vant-weapp --production

然后,在app.json中这样引入:

"usingComponents": {
    "van-checkbox": "/path/vant-weapp/checkbox/index",
    "van-checkbox-group": "/path/vant-weapp/checkbox-group/index"
  }

蛤?找不到app.json?点击 快速上手src根目录下就可以看到app.json了。

多说几句,"van-checkbox": "/path/vant-weapp/checkbox/index"后半部分的路径,不同教程可能给的不同,我的项目path路径下啥都没有,但却可以这样引入,是因为我在webpack.base.conf.js中配置了:

plugins: [
    new CopyWebpackPlugin([
      {
        from: resolve('node_modules/vant-weapp/dist'),
        to: path.resolve(config.build.assetsRoot, './path/vant-weapp'),
        ignore: ['.*']
      }
    ])
  ]

2.使用 van-checkbox

  1. 新建index.vue,直接上代码:
<van-checkbox 
    :value="isCheck" 
    @change="onChange" 
    name="ck" 
    checked-color="#07c160"
>check</van-checkbox>

Vant Weapp 官网的差别:

// 官网(原生小程序)
value="{{ checked }}"
bind:change="onChange"

// mpvue
:value="checked" 
@change="onChange"
  1. 然后是逻辑代码,官网给的是小程序代码,无法直接用在 mpvue 中:
Page({
  data: {
    checked: true
  },

  onChange(event) {
    this.setData({
      checked: event.detail
    });
  }
});

改成:

export default {
    data () {
      return {
        isCheck: true,
      }
    },
    methods: {
      onChange (event) {
        console.log(event.detail)
      }      
    }
  }

运行后打印的是undefined,说明一下,mpvue 中要把event.detail改成event.mp.detail,改过之后就可以正常打印 true 或者 false 了。让后把该值赋给变量 isCheck 就可以被其他地方获取到 van-checkbox 的选中状态了:

 methods: {
      onChange (event) {
        this.isCheck = event.mp.detail
      }      
    }

另外,有两个常用的属性:checked-colorshape,前者表示选中时的颜色,后者表示 van-checkbox 的形状(默认 round-圆形,可改成 square-正方形)

效果图:

van-checkbox

3.使用 van-checkbox-group

  1. 直接看看 html 部分的代码:
<div>
    <van-checkbox-group :value="result" @change="onChangeGroup">
       <van-checkbox name="ck" checked-color="#07c160" shape="square">check</van-checkbox>
       <van-checkbox name="ck2" checked-color="#cc66ff">check2</van-checkbox>
    </van-checkbox-group>
    <p>选中了:{{result}}</p>
</div>

这个 van-checkbox-group 包含了两个 van-checkbox,我们想看到每选一个,下面就展示出选择的项目:

van-checkbox-group

  1. van-checkbox-group 的选中值都放在:value:result中,每次勾选或者反选都会触发@change事件。逻辑代码部分:
export default {
    data () {
      return {
        result: []
      }
    },
    methods: {
      onChangeGroup (event) {
        this.result = event.mp.detail
      }
    }
  }
</script>

max属性可以设置最大可选数,<van-checkbox-group :value="result" @change="onChange" max="2">...</van-checkbox-group>表示最多可选 2 项。

4.搭配单元格组件使用

首先引入 van-cell 和 van-cell-group:

"usingComponents": {
    "van-cell": "/path/vant-weapp/cell/index",
    "van-cell-group": "/path/vant-weapp/cell-group/index",
    "van-checkbox": "/path/vant-weapp/checkbox/index",
    "van-checkbox-group": "/path/vant-weapp/checkbox-group/index"
  }

然后这样使用:

<van-checkbox-group :value="values" @change="groupclick">
      <van-cell-group title="同学">
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          :title="'蔡徐坤 '+item"
          clickable
          @click="toggle"
          :data-name="item">
          <van-checkbox :name="item"/>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>

说几点需要注意的细节:

// 官网(原生小程序)
title="复选框 {{ item }}"

// mpvue
:title="'蔡徐坤'+item"
  • <van-checkbox :name="item"/><van-cell></van-cell>的子元素,这样才可以使用父元素中遍历的item
  • 必须添加:data-name="item",否则子元素获取不到该数据
  • 动态绑定数据,所以这些属性都是v-bind类型的::title,:data-name,:name

逻辑代码部分:

export default {
    data () {
      return {
        list: ['a', 'b', 'c'],
        values: []
      }
    },

    methods: {
      groupclick (event) {
        this.values = event.mp.detail // 这句不用也可以
      },
      toggle (event) {
        let val = event.mp.currentTarget.dataset.name
        let index = this.values.indexOf(val)
        if (index <= -1) {
          this.values.push(val)
        } else {
          this.values.splice(index, 1)
        }
      }
    }
  }

注意一点就行,这样获取 van-checkbox 的name属性:let val = event.mp.currentTarget.dataset.name,效果图:

boxandcell


最后,源码地址

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值