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