更新记录

v1.1（2022-12-28）

修复H5页面选中数据显示异常

v1.0（2022-12-27）

组件基本功能完善 增加默认选中值 增加展开动画效果 修复部分bug 增加注释

平台兼容性

平台兼容性

在 H5、微信小程序测试通过，理论支持全平台 在线体验地址

属性：

事件：

实例：

<template>
    <view>

        <view class="form">
            <view class="item">
                <!-- 下拉框多选 -->
                <view :class="['select', form.selectValue ? 'selected' : '']" @tap="handleMultiple(form.selectIndex)">
                    {{form.selectValue || '请选择'}}
                </view>
            </view>
        </view>

        <multiple-picker 
            title="请选择" 
            :show="selectMultiple.show" 
            :columns="selectMultiple.columns" 
            :defaultIndex="selectMultiple.index" 
            @confirm="confirmMultiple" 
            @cancel="selectMultiple.show = false"
            @change="changeMultiple"
        ></multiple-picker>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    selectValue: '测试2,测试3',
                    selectIndex: ["2","3"],
                },
                selectMultiple: {
                    show: false,
                    index: [],
                    columns: [
                        {
                            label: '测试1',
                            value: '1',
                        },
                        {
                            label: '测试2',
                            value: '2',
                        },
                        {
                            label: '测试3',
                            value: '3',
                        },
                        {
                            label: '测试4',
                            value: '4',
                        },
                        {
                            label: '测试5',
                            value: '5',
                        },
                        {
                            label: '测试6',
                            value: '6',
                        },
                        {
                            label: '测试7',
                            value: '7',
                        }
                    ],
                },
            }
        },
        onLoad() {
        },
        methods: {
            handleMultiple(val) {
                console.log(val);

                this.selectMultiple.index = val || [];
                this.selectMultiple.show = true;
            },
            confirmMultiple(e) {
                console.log(e);

                let temp = [];
                e.selected.forEach(item => {
                    temp.push(item.label);
                })
                this.form.selectValue = temp.toString();
                this.form.selectIndex = e.value;
                this.selectMultiple.show = false;
            },
            changeMultiple(e) {
                console.log(e);
            }
        }
    }
</script>

<style scoped lang="scss">
    page {
        background-color: #dadbde;
    }
    .form {
        width: 100%;
        padding: 40rpx 30rpx;
        box-sizing: border-box;

        .item {
            width: 100%;
            padding: 20rpx 0;

            .select {
                width: 100%;
                border: 1px solid #dadbde;
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 9px;
                padding-right: 9px;
                border-radius: 4px;
                font-size: 15px;
                box-sizing: border-box;
                color: #CCCCCC;
                line-height: 26px;

                &.selected {
                    color: black;
                }
            }
        }
    }
</style>