uniapp中封裝一個彈框組件

第一步：在components下創建 popup.vue子組件；

popup.vue中

<template>
    <view>
        <view class="popus-box">
            <view class="content">
                <view class="title">{{propsMsg.title}}</view>
                <view class="con">{{propsMsg.content}}</view>
                <view class="button">
                    <view class="left-but but" @click="hidePopup('no')">{{propsMsg.canle}}</view>
                    <view class="right-but but" @click="hidePopup('yes')">{{propsMsg.ok}}</view>    
                </view>    
                
            </view>
        </view>
    </view>
</template>

<script>
    export default({
        props:['propsMsg'],
        data(){
            return {
                
            }
        },
        methods:{
            hidePopup(type){
                this.$emit('handlePopup',type)
            }
        }
    })
</script>
// 此處 css樣式略過

第二步：將寫好的popup.vue組件引到需要的頁面

<template>
    <view class="titles" @click="isflag=true">點擊出現彈框 </view>
    <popup :propsMsg = 'propsMsg' v-show="isflag" @handlePopup = 'handlePopup'></popup>
</template>

 

<script>
    import popup from '../../components/popup.vue';
    export default({
        components:{popup},
        data(){
            return {
                isflag:false,
                propsMsg:{
                    title:'今天會下雨嗎？',
                    content:'這個問題值得研究',
                    canle:'不會',
                    ok:'會的'
                }
            }
        },
        methods:{
            handlePopup(type){
                console.log(type)
                if(type='yes'){
                    this.isflag = false
                }else{
                    this.isflag = false
                }
            }
        }
    })
    
</script>

好啦，來看看效果吧