原生小程序/vant-weapp的胶囊checkbox组件的简易封装

前言

小程序的官网checkbox太丑了，我们美工设计对它动手了…

vantui里面也是没有这种胶囊checkbox，所以就要自己动手搞一套了!!我用的vant-ui，所以结合van-button自己搞了一种模拟checkbox点击选中和取消选中的效果

最后效果图

组件内容:

// components/zp-checkbox/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dataLists: {
      type: Array,
      default: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeButton(e) {
      console.log(e, 'ebutton')
      //进行匹配找到当前的选项,设置高亮
      let nowItem = e.currentTarget.dataset
      nowItem.checked = !nowItem.checked
      this.getNowButton(this.properties.dataLists, nowItem)
    },
    getNowButton(array, item) {
      //抛出呃去，让父组件去改
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        if (element.name == item.name) {
          element.checked = item.checked
          break
        }
      }

      this.triggerEvent('changeButtonState', array)
    }
  }
})

<!--components/zp-checkbox/index.wxml-->
<view class="form-container">
    <view>
        <van-button custom-class="btn-container" plain type="{{item.checked?'info':'default'}}" round
            wx:for="{{dataLists}}" bind:click="changeButton" data-name="{{item.name}}">{{item.name}}
        </van-button>
    </view>
</view>

/* components/zp-checkbox/index.wxss */
.btn-container {
  margin: 10rpx;
}

使用方法

父组件引进去

 <zp-checkbox dataLists="{{labelList}}" bindchangeButtonState="changeButtonState"></zp-checkbox>

/* 子组件改变状态得事件 */
  changeButtonState(data) {
    console.log(data, 'changeButtonState222')
    let newLists = data.detail
    /* 更新数据里面得对应值得状态 */
    // nowItem = this.data.labelList.filter(ele => ele.name == nowItem.name)
    this.updateLists(newLists)
  },
  updateLists(value) {
    // console.log(value, 'test')
    this.setData({
      labelList: value
    })
  }

这样就实现了文章开始的效果~~~

自定义组件中，使用vant-weapp的 van-empty 时，修改默认样式不生效,在子组件里面解决办法：开启styleIsolation: 'shared’选项

Component({
  options: {
    styleIsolation: 'shared'
  },
})