在uni-app中使用vue2二次封装弹出层，详细代码

好的，以下是一个基于uni-app和vue2的弹出层的二次封装代码示例：

<template>
  <div class="popup-mask" v-if="show">
    <div class="popup">
      <div class="popup-header">{{title}}</div>
      <div class="popup-content">
        <slot></slot>
      </div>
      <div class="popup-footer">
        <button @click="confirm">确定</button>
        <button @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
    title: String,
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  methods: {
    confirm() {
      this.$emit('confirm')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style>
.popup {
  background-color: #fff;
  width: 75%;
  max-width: 500px;
  border-radius: 4px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.popup-header {
  padding: 16px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5;
}
.popup-content {
  padding: 16px;
}
.popup-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid #e5e5e5;
}
.popup-footer button {
  margin-left: 16px;
}
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}
</style>

这段代码实现了一个基本的弹出层，包含了标题、内容和确定/取消按钮，可以通过传入props来控制弹出层的显示和按钮的文字内容。其中，`<slot></slot>`标签用于插入弹出层的内容。

使用时，只需要在需要弹出层的组件中引入该弹出层组件，并使用`<popup>`标签包裹需要展示的内容，如下所示：

<template>
  <div>
    <button @click="showPopup = true">弹出层</button>
    <popup :show="showPopup" :title="title" @confirm="onConfirm" @cancel="onCancel">
      <p>这是弹出层的内容</p>
    </popup>
  </div>
</template>

<script>
import Popup from '@/components/Popup.vue'

export default {
  components: {
    Popup
  },
  data() {
    return {
      title: '弹出层标题',
      showPopup: false
    }
  },
  methods: {
    onConfirm() {
      console.log('点击了确定按钮')
      this.showPopup = false
    },
    onCancel() {
      console.log('点击了取消按钮')
      this.showPopup = false
    }
  }
}
</script>

这样就能在点击按钮时弹出层展示，点击确定/取消按钮时关闭弹出层，并触发相应的事件处理函数。