07-31 02:08 阅读 864

关注

uniapp中封装一个弹框组件

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>.$emit(</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>

好啦，来看看效果吧

分类: uni-app

来源https://www.cnblogs.com/anna001/p/15080223.html