uni-app 4.13开发弹出层组件（二）弹出关闭功能

index.nuve页面

<template>
  <view class="">
    <free-nav-bar :title="'微信'" :noreadnum="1" :fixed='true' @openExtend="openExtend"> 
      <template v-slot="title"></template>
    </free-nav-bar>
    
    <!-- 列表 -->
    <block v-for="(item,index) in list" :key="index">
      <free-media-list :item="item" :index="index"></free-media-list>
    </block>
    
    <!-- 弹出层 -->
    <free-popup ref="extend">
      <view style="width: 300rpx;height: 400rpx;"></view>
    </free-popup>
  </view>
</template>

<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMediaList from '@/components/free-ui/free-media-list.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  export default {
    components: {
      freeNavBar,
      freeMediaList,
      freePopup
    },
    data() {
      return {
        list:[
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:1
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:12
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:2
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:10
          }
        ]
      }
    },
    onl oad() {
      
    },
    methods: {
      openExtend(){
        this.$refs.extend.show();
      }
    },
  }
</script>

<style>

</style>

free-pupop.vue

<template>
  <div style="z-index:9999;overflow:hidden;" v-if="status">
    <!-- 蒙版 -->
    <view class="position-fixed top-0 left-0 right-0 bottom-0" style="background:rgba(0,0,0,0.5);"  @click="hide"></view>
      <!-- 弹出框内容 -->
      <div class="position-fixed  bg-white" style="left: 100rpx;top: 100rpx;">
          <slot></slot> 
      </div>
  </div>
</template>

<script>
  export default {
    props: {
      // 是否开启蒙版颜色
      maskColor: {
        type: Boolean,
        default: false
      },
      
    },
    data() {
      return {
        status: false,
        x:-1,
        y:1,
        maxX:0,
        maxY:0
      }
    },
    mounted() {
      try {
          const res = uni.getSystemInfoSync();
        this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth)
        this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight)
      } catch (e) {
          // error
      }
    },
    computed: {
      getMaskColor() {
        let i = this.maskColor ? 0.5 : 0
        return `background-color: rgba(0,0,0,${i});` 
      },
      getBodyClass(){
        if(this.center){
          return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center'
        }
        let bottom = this.bottom ? 'left-0 right-0 bottom-0' : 'rounded border'
        return `${this.bodyBgColor} ${bottom}`
      },
      getBodyStyle(){
        let left = this.x > -1 ? `left:${this.x}px;` : ''
        let top = this.y > -1 ? `top:${this.y}px;` : ''
        return left + top
      }
    },
    methods:{
      show(){
        this.status = true
      },
      hide(){
        this.status = false
      }
    }
  }
</script>

<style scoped>
  .free-animated{
    /* #ifdef APP-PLUS-NVUE */
    /* transform: scale(0,0);
    opacity: 0; */
    /* #endif */
  }
  .z-index{
    /* #ifndef APP-NVUE */
    z-index: 9999;
    /* #endif */
  }
</style>

free-nav-bar.vue

<template>
  <view>
    <view class="bg-light" :class="fixed?'fixed-top':''">
      <!-- 状态栏 -->
      <view :style="'height:'+statusBarHeight+'px;'"></view>
      <!-- 导航 -->
      <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
        <!-- 左边 -->
        <view class="flex align-center">
          <!-- 标题 -->
          <text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
        </view>
        <!-- 右边 -->
        <view class="flex align-center">
          <free-icon-button @click="search"><text class="iconfont font-md"></text></free-icon-button>
          <free-icon-button @click="openExtend"><text class="iconfont font-md"></text></free-icon-button>
        </view>
        <!--\ue6e3 \ue682 -->
      </view>
    </view>

    <!-- 站位 -->
    <view v-if="fixed" :style="fixedStyle"></view>
  </view>
</template>

<script>
  import freeIconButton from './free-icon-button.vue';
  export default {
    components: {
      freeIconButton,
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      fixed:{
        type:Boolean,
        default:false
      },
      noreadnum:{
        type:Number,
        default:0
      }
    },
    data() {
      return {
        statusBarHeight: 0,
        navBarHeight: 0,
      }
    },
    mounted() {
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    },
    computed: {
      fixedStyle() {
        return `height:${this.navBarHeight}px`;
      },
      getTitle(){
        let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : '';
        return this.title + noreadnum;
      }
    },
    methods:{
      openExtend(){
        this.$emit('openExtend');
      }
    }
  }
</script>

<style>

</style>

页面如下

感谢大家观看，下期再见