更新记录

1.0.18（2023-12-11） 下载此版本

placeholder溢出隐藏

1.0.17（2023-12-02） 下载此版本

修改微信小程序this绑定有误

1.0.16（2023-11-21） 下载此版本

增加beforeOpen 弹窗打开之前钩子，可在此处判断是否满足弹出条件

平台兼容性

uni-app

其他

wz-select-input

示例

<template>
    <view class="content">
        单选：（直接传入dataList）
        <wz-select-input ref="radioSelectInput" v-model="dataForm.radio" :dataList="radioDataList"
            @select="selectData">
        </wz-select-input>

        <view class="" style="margin-top: 16px;">
            多选：(模拟后端请求数据)
            <wz-select-input ref="checkboxSelectInput" v-model="dataForm.checkbox" mode="checkbox" :proxyConfig="{
                reqFun: reqGetList,
                localPaging: false 
            }" :beforeOpen="beforeOpen" @select="selectData">
            </wz-select-input>
        </view>
    </view>
</template>

<script>
    import {
        simulationReqGetList,
        getDataList
    } from "@/common/mock.js"
    export default {
        data() {
            return {
                radioDataList: [],
                dataForm: {
                    radio: '',
                    checkbox: []
                },
                isOpen: true
            }
        },
        watch: {
            dataForm: {
                handler(newVal) {
                    console.log(newVal)
                },
                deep: true
            }
        },
        onLoad() {
            this.getDataList()
        },
        onReady() {
            // this.dataForm.checkbox = ["0-1", "1-2", "3-4"]

            //多选模式下 如果是编辑表单的情况下需要手动设置name
            // this.$refs.checkboxSelectInput.setName(["第1条数据", "第2条数据", "第4条数据"])
        },
        methods: {
            /**
             * 打开下拉选择窗之前的判断，popupConfig是弹窗的全部配置项
             * 可以根据实际情况return true | false
             * 也可以请求后端接口后return Promise.resolve(true) | Promise.reject(false)
             * 直接这样也行return Promise.resolve() | Promise.reject()
             */
            async beforeOpen(popupConfig) {
                //try {
                //   const res = await uni.$u.http.get('xx/xx/xx')
                //  return res.power
                // } catch (e) {
                //    return false
                // }
                if (!this.isOpen) {
                    uni.showToast({
                        icon: 'none',
                        title: '请把this.isOpen改成true'
                    })
                    return false
                }
                return true
            },
            selectData(mode, data) {
                console.log(data)
            },
            reqGetList(data) {
                console.log(data)
                return simulationReqGetList({
                    pageIndex: data.pageIndex,
                    pageSize: data.pageSize,
                    name: data.searchValue
                })
            },
            getDataList() {
                this.radioDataList = getDataList()
            }
        },

    }
</script>

<style>
    .content {
        padding: 16px;
    }
</style>

注意

除了v-model所有的属性必须使用小驼峰

属性props

proxyConfig的属性

page的属性

fields的属性

事件event

方法methods