微信小程序封装vant 下拉框select 多选组件_微信小程序下拉框

本组件主要由小程序vant ui组件，vant 小程序ui网址：vant-weapp

主要代码如下:

先封装子组件： select-checkbox  放在 components 文件夹里面

select-checkbox.wxml:

<view>
    <van-field label="{{label}}" model:value="{{ checkSelected }}" required placeholder="{{ place }}" border="{{ true }}" readonly
        right-icon="{{icon}}" bindtap="showPopup" />

    <van-popup show="{{ show }}" bind:close="onClose" position="bottom" custom-style="height: 60%;overflow:hidden;padding:10rpx 0rpx;">
        <!-- 取消、确定按钮 -->
        <view class="cityheader">
            <view bindtap="cancel" class="city-cancel">取消</view>
            <view bindtap="confirm" class="city-true">确定</view>
        </view>

        <!-- 内容区域 -->
        <van-checkbox-group value="{{ result }}" bind:change="onChange">
            <van-cell-group>
                <van-cell
                    wx:for="{{ list }}"
                    wx:key="index"
                    title="{{ item }}"
                    value-class="value-class"
                    clickable
                    data-index="{{ index }}"
                    title-width="94%" 
                    center
                    bind:click="toggle"
                >
                <van-checkbox
                    catch:tap="noop"
                    label-position="right"
                    class="checkboxes-{{ index }}"
                    name="{{ item }}"
                />
                </van-cell>
            </van-cell-group>
        </van-checkbox-group>
    </van-popup>
</view>

select-checkbox.wxss:

/* pages/select-checkbox/select-checkbox.wxss */
.van-cell__value {
  text-align: left !important;
}
.cityheader {
  width: 100%;
  z-index: 5;
}
.city-cancel {
  float: left;
  margin: 20rpx;
  color: #969799;
  z-index: 11;
  position: relative;
}
.city-true {
  float: right;
  margin: 20rpx;
  color: #576b95;
  z-index: 11;
  position: relative;
}

select-checkbox.js:

// pages/select-checkbox/select-checkbox.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        label: String, // 输入框标签
        place: String, // 输入框提示
        list: Array, // 选择器 选项
        checkSelected: { // 选择器 选项数组中 对象的value的默认key
            type: String,
            value: 'text'
        }
    },
    // 监听传入的变量,当传入的值发生变化时,触发方法
    // observers: {
    //     'checkSelected': function (val) {
    //         // val=> 就是父组件传入组件中的 tabsList 数据
    //         console.log('???:', val)
    //     }
    // },
    /**
     * 页面的初始数据
     */
    data: {
        icon:'arrow-down',  // 下拉箭头
        show: false,
        result: [],
    },
    /**
    * 组件的方法列表
    */
    methods: {
       // 取消
        cancel() {
            this.setData({ show: false })
        },
        // 确定
        confirm() {
            this.setData({ show: false })
            this.triggerEvent('sync', {  // 传递到组件外事件 ， 返回当前选中项 对象
                value: this.data.checkSelected
            })
        },