uni-app 组件使用 底部弹框

 

<template> <view> <view class="cover_screen" @click="hideBuyModal" v-if="showModalStatus"></view> <view class="buy_box" v-if="showModalStatus"> <text class="title">{{title}}</text> <text class="newdetaildivider"></text> <text class="title" @tap="toCarmea">拍照</text> <text class="newdetaildivider"></text> <text class="title" @tap="toPhoto">相册</text> <text class="newdetaildivider"></text> <text class="title" @tap="primary">取消</text> </view> </view> </template> <script> export default { props:{ isShowImgTitle:{ type:Boolean, value:false }, title:{ type:String, value:'上传头像' } }, data() { return { showModalStatus: false } }, methods: { show(){ this.showModalStatus = true }, hide(){ this.showModalStatus = false }, hideBuyModal:function(){ this.hide() }, toCarmea:function(){ console.log("~~~") this.$emit('toCarmea') }, toPhoto:function(){ console.log("~~~") this.$emit('toPhoto') }, primary:function(){ console.log("~~~") this.$emit('primary') } } } </script> <style> .buy_box { width: 100%; box-sizing: border-box; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; overflow: hidden; display: flex; flex-direction: column; } .newdetaildivider { height: 1px; background: #eaeaea; display: block; } .title { display: flex; height: 99rpx; font-size: 36rpx; text-align: center; align-items: center; justify-content: center; } .titleImg { flex-direction: column; display: flex; background-color: #eeeeee; } .titleImg text{ margin-top: 12rpx; display: flex; font-size: 36rpx; text-align: center; align-items: center; justify-content: center; } .imgs { margin-top: 12rpx; display: flex; justify-content: space-between; margin-left: 30rpx; margin-right: 30rpx; margin-bottom: 12rpx; } .cover_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; } </style>

 

组件使用-以及事件回调

<vip-chooseImg ref="chooseImg" :title="title" :isShowImgTitle="true" v-on:toCarmea="toCarmea" v-on:toPhoto="toPhoto" v-on:primary="primary"></vip-chooseImg>

回调事件

primary() { console.log('关闭弹框') this.$refs.chooseImg.hide() }, //打开相机 toCarmea() { console.log('调用打开相机方法') this.$refs.chooseImg.hide() }, toPhoto() { //打开相册 }