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"

2. 然后是逻辑代码，官网给的是小程序代码，无法直接用在 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-color和shape，前者表示选中时的颜色，后者表示 van-checkbox 的形状(默认 round-圆形，可改成 square-正方形)

效果图：

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，我们想看到每选一个，下面就展示出选择的项目：

2. 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>

说几点需要注意的细节：

• 与 Vant Weapp 官网的差别：

  > // 官网（原生小程序）
  > 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，效果图：

---

最后，源码地址