#插件讨论# 【 popup弹框 - piaoyi_UI 】高度和宽度属性可以修改吗

调用  
<piaoyipopup @confirm="confirm" @cancel="cancel" :visible="visible" :maskCloseAble="maskCloseAble" width="750rpx" height="300rpx">  
    <view class="box">我是slot插槽的内容，提供一个容器，内部内容可以自己使用插槽进行构建</view>  
</piaoyipopup>

组件  
<template>  
    <view class="pupop">  
        <view class="popup-box" :animation="animationData" :style="{width:width,height:height}">  
            <view class="pupop-btn">  
                <view @tap="cancel">取消</view>  
                <view @tap="confirm" style="color: #2979ff;">确定</view>  
            </view>  
            <slot></slot>  
        </view>  
        <view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                value: [],  
                provinceList: [],  
                cityList: [],  
                areaList: [],  
                indicatorStyle: `height: 50px;`,  
                provinceIndex: 0,  
                cityIndex: 0,  
                areaIndex: 0,  
                animationData: {},  
                direction: 'bottom'  
            }  
        },  
        props: {  
            visible: {  
                type: Boolean,  
                default: () => false  
            },  
            maskCloseAble: {  
                type: Boolean,  
                default: () => true  
            },  
            width: {  
                type: String,  
                default: () => '100%'  
            },  
            height:{  
                type:String,  
                default:() => 'auto'  
            }  
        },  
        watch: {  
            visible (val) {  
                this.changeActive()  
            }  
        },  
        created() {  
        },  
        methods: {  
            confirm () {  
                this.$emit('confirm')  
            },  
            cancel () {  
                this.$emit('cancel')  
            },  
            // 点击模态框  
            close () {  
                if (this.maskCloseAble) {  
                    this.cancel()  
                }  
            },  
            // 动画  
            changeActive () {  
                var active = '-315px'  
                if (this.visible) {  
                    active = 0  
                }  
                var animation = uni.createAnimation({  
                    duration: 400,  
                    timingFunction: 'linear'  
                })  
                animation.bottom(active).step()  
                this.animationData = animation.export()  
            },  
        }  
    }  
</script>  

<style scoped lang="scss">  
    .pupop {  
        .popup-box {  
            position: fixed;  
            width: 100vw;  
            left: 0;  
            bottom: -315px;  
            z-index: 99999;  
            background: #fff;  
            padding-bottom: 20px;  
            .pupop-btn{  
                height: 40px;  
                display: flex;  
                align-items: center;  
                padding: 0 30upx;  
                justify-content: space-between;  
            }  
        }  
        .pupop-model {  
            position: fixed;  
            left: 0;  
            top: 0;  
            width: 100%;  
            height: 100%;  
            z-index: 9999;  
            background: rgba(0, 0, 0, .5);  
        }  
        .pupop-models{  
            display: none;  
        }  
    }  
</style>