更新记录

1.0.19（2024-01-10）

增加图片显示

1.0.18（2023-12-12）

修复微信小程序多选点击无效

1.0.17（2023-12-02）

下拉加载延时关闭loading

平台兼容性

wz-select-popup

示例

<template>
    <view>
        <view class="" style="margin-bottom: 16px;">
            <view style="margin-bottom: 8px;">names:{{userForm.names}}</view>
            <view style="margin-bottom: 8px;">values:{{userForm.values}}</view>
            <view style="margin-bottom: 8px;">origin:{{userForm.origin}}</view>
        </view>
        <button @click="open">打开</button>
        <wz-select-popup ref="wzSelectPopup" @select="selectCheckbox" />
    </view>
</template>

<script>
    import {
        simulationReqGetList,
        getDataList
    } from "@/common/mock.js"
    export default {
        data() {
            return {
                userForm: {
                    names: [],
                    values: [],
                    origin:[]
                }
            }
        },
        methods: {
            open() {
                this.$refs.wzSelectPopup.open({
                    mode: 'checkbox', //radio checkbox 单选、多选
                    // dataList:[], //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig
                    selected: this.userForm.values, //已选中的数据
                    proxyConfig: { //组件内部代理请求数据配置
                        reqFun: this.reqGetList, //请求方法,在方法中请返回Promise.resolve([])
                        localPaging: false //前端本地分页
                    },
                    search: {
                        type: 'local', //local本地数据搜索 | remote请求接口
                    },
                    fields: {
                        label: 'name',
                        value: 'code'
                    }
                })
            },
            selectCheckbox(mode, data) {
                console.log(mode, data)
                this.userForm.names = data.names
                this.userForm.values = data.values
                this.userForm.origin = data.origin
            },
            reqGetList(data) {
                return simulationReqGetList({
                    pageIndex: data.pageIndex,
                    pageSize: data.pageSize,
                    name: data.searchValue
                })
            },
        }
    }
</script>

<style>

</style>

属性props

方法methods

open方法的configs

proxyConfig的属性

search的属性

page的属性

fields的属性

事件enevt