banbenConfirmDialog.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!-- 大弹窗 三~四行文字 -->
  2. <template>
  3. <uni-popup ref="tipBigPopup" :animation="false" :is-mask-click="false"
  4. mask-background-color="rgba(255, 255, 255, 0.6);">
  5. <view class="ezy-tip-dialog tip-big-dialog">
  6. <view class="tip-content-box">
  7. <view class="tip-title">{{title}}</view>
  8. <view class="tip-content" v-if="content">{{content}}</view>
  9. <view class="tip-btn-box">
  10. <view class="not-confirm-btn" @click="handleClose"></view>
  11. <view class="confirm-btn" @click="confirmBtn"></view>
  12. </view>
  13. </view>
  14. </view>
  15. </uni-popup>
  16. </template>
  17. <script setup>
  18. import { ref } from 'vue';
  19. const props = defineProps({
  20. title: {
  21. type: String,
  22. default: '提示'
  23. },
  24. content: {
  25. type: String,
  26. default: ''
  27. },
  28. });
  29. const tipBigPopup = ref(null); // 索引
  30. const $emit = defineEmits(['confirm-btn'])
  31. // 打开弹窗
  32. function handleShow() {
  33. tipBigPopup.value.open();
  34. }
  35. // 取消
  36. function handleClose() {
  37. tipBigPopup.value.close();
  38. }
  39. // 确认
  40. function confirmBtn(){
  41. $emit('confirm-btn');
  42. tipBigPopup.value.close();
  43. }
  44. defineExpose({
  45. handleShow
  46. })
  47. </script>
  48. <style>
  49. </style>