pet-front/otherPages/authentication/components/popupSelect.vue

<template>
  <up-popup 
    :show="show" 
    round="16rpx"
    @open="open" 
    @close="close"
  >
    <view class="popup">
      <view class="popup-header">
        <text class="popup-title">{{ props.title }}</text>
        <text class="popup-desc">{{ props.desc }}</text>
      </view>
      <view class="popup-content">
        <slot></slot>
      </view>
      <view class="popup-footer">
        <slot name="footer">
          <button class="flex-rowc btn" plain @click="onConfirm">确定</button>
        </slot>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
  import { ref } from 'vue'

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    desc: {
      type: String,
      default: '',
    }
  })

  const emit = defineEmits(['confirm'])

  const show = ref(false)

  const open = () => {
    show.value = true
  }

  const close = () => {
    show.value = false
  }

  const onConfirm = () => {
    emit('confirm')
    close()
  }

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

<style lang="scss" scoped>

  .popup {
    padding: 45rpx 28rpx 28rpx 28rpx;

    &-header {
      margin-bottom: 35rpx;
    }

    &-title {
      color: #000000;
      font-weight: 700;
      font-size: 30rpx;
      line-height: 40rpx;
    }

    &-desc {
      color: #C7C7C7;
      font-size: 22rpx;
    }
  }

  .btn {
    width: 594rpx;
    height: auto;
    padding: 27rpx 0;
    box-sizing: border-box;
    border: none;
    background-color: #FFBF60;
    color: #FFFFFF;
    font-size: 30rpx;
    line-height: 40rpx;
    border-radius: 41rpx;
  }
</style>