更新记录

1.1（2023-11-15）

1、实现不同风格交互体验 a.sheet风格，从屏幕底部弹出来 b.drawer风格，全屏弹出，带有面包屑及动画 2、动画优化调整完善

1.0（2023-11-02）

组件发布

平台兼容性

使用教程

<template>
    <view>
        <uni-region-sheet :showSheetView="showSheetView" displayStyle="sheet or drawer" :defaultIndexs="[0,0,0]" @ed="ed"></uni-region-sheet>
    </view>
</template>

<script>
    import uniRegionSheet from '@/components/zxp-uniRegionSheet.vue'

    export default
    {
        data() {
            return {
                showSheetView:false,
            };
        },
        components:{
            uniRegionSheet
        },
        methods:{
            ed(row){
                /*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
                this.showSheetView = false
            }
        }
    }
</script>

prop说明

//
showSheetView: {
    type: Boolean,
    default: false
},
//默认选中所在行
defaultIndexs: {
    type: Array,
    default: 0
},
//弹窗标题
sheetTitle: {
    type: String,
    default: "请选择"
},
/**页面展示形式：sheet或drawer,drawer会显示面包屑*/
displayStyle: {
    type: String,
    default: "sheet"
},
//点击蒙板是否消失退出
maskDismiss: {
    type: Boolean,
    default: true
},

注意

组件中用到了colorUI的cuIcon-right、cuIcon-check图标，要么引入此框架CSS，要么自行替换为你项目中的图标库对应的图标即可