yshop-pro-uniapp/components/Popup/index.vue

<!--
    @name: index
    @author: kahu4
    @date: 2023-10-31 15:06
    @description：index
    @update: 2023-10-31 15:06
-->
<script setup>
import { nextTick, ref, toRefs } from "vue";
import UniPopup from "@/components/uniComponents/UPopup/uni-popup/uni-popup.vue";

/** some javascript code in here */
const emit = defineEmits(['open', 'close', 'maskClick'])
/**
 * @property {String} title 标题
 * @property {String} mode 模式
 *  @value top 顶部弹出
 *  @value center 中间弹出
 *  @value bottom 底部弹出
 *  @value left		左侧弹出
 *  @value right  右侧弹出
 *  @value message 消息提示
 *  @value dialog 对话框
 *  @value share 底部分享示例
 * @property {Boolean} showCloseable 是否展示关闭按钮
 * @property {Boolean} isMaskClick 是否点击masker关闭弹窗
 * @event {Function} open 打开弹窗
 * @event {Function} close 关闭回调
 */
const props = defineProps({
  title: {
    type: String,
    default: () => ''
  },
  mode: {
    type: String,
    default: () => 'bottom'
  },
  showCloseable: {
    type: Boolean,
    default: () => true
  },
  isMaskClick: {
    type: Boolean,
    default: () => true
  },
})

const {title, mode, showCloseable, isMaskClick} = toRefs(props)

const popup = ref()
const isShow = ref(false)
/**
 * 打开
 */
const show = () => {
  nextTick(() => {
    isShow.value = true
    popup.value.open()
    emit('open')
  })
}

/**
 * 关闭回调
 */
const close = () => {
  isShow.value = false
  popup.value.close()
}

const handlePopupChange = (e) => {
  if (!e.show) emit('close')
}

const handleMaskClick = (e) => {
  emit('maskClick')
}

defineExpose({
  show,
  close
})
</script>

<template>
  <UniPopup
      ref="popup"
      :type="mode"
      :is-mask-click="isMaskClick"
      background-color="#fff"
      @change="handlePopupChange"
      @maskClick="handleMaskClick"
      class="y-popup"
  >
    <view class="popup_inner">
      <view
          class="head"
          v-if="title||showCloseable"
      >
        <view></view>
        <view>{{ title }}</view>
        <slot name="rightOption">
          <view
              @click="close"
              v-if="showCloseable"
          >
            <uv-icon
                name="close"
                color="#000"
                size="16"
            />
          </view>
        </slot>
      </view>
      <slot></slot>
    </view>
    <!-- 如果是h5 增加tabbar高度 -->
<!--    <view class="h5-tabbar-height"></view>-->
  </UniPopup>
</template>

<style
    scoped
    lang="scss"
>
.popup_inner {
  padding: 20rpx 20rpx env(safe-area-inset-bottom) 20rpx;

  box-sizing: border-box;
  .head {
    padding: 20rpx 0;
    font-weight: bolder;
    font-size: 36rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .content {
    .tips {
      width: 100%;
      text-align: center;
      font-size: 22rpx;
      color: #000;
    }

    .option_list_box {
      .option_item {
        margin: 15rpx 0;

        .icon {
          margin-right: 30rpx !important;
        }
      }
    }

  }

  .button_content {
    margin-top: 50rpx;
    width: 100%;
    height: 80rpx;
    background: #ee6d46;
    font-size: 40rpx;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
    border-radius: 80rpx;
    font-weight: bolder;
  }

}

</style>