tipMiddleDialog.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!-- 中弹窗 二行文字 -->
  2. <template>
  3. <uni-popup ref="tipMiddlePopup" :animation="false" :is-mask-click="false"
  4. mask-background-color="rgba(255, 255, 255, 0.6);">
  5. <view class="ezy-tip-dialog tip-middle-dialog">
  6. <view class="tip-content-box">
  7. <view class="tip-title">{{title}}</view>
  8. <view class="tip-content">{{content}}</view>
  9. <view class="tip-btn-box">
  10. <view v-if="closeFlag" 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. closeFlag: {
  25. type: Boolean,
  26. default: true
  27. },
  28. content: {
  29. type: String,
  30. require: true,
  31. default: ''
  32. },
  33. });
  34. const tipMiddlePopup = ref(null); // 索引
  35. const $emit = defineEmits(['confirm-btn'])
  36. // 打开弹窗
  37. function handleShow() {
  38. tipMiddlePopup.value.open();
  39. }
  40. // 取消
  41. function handleClose() {
  42. tipMiddlePopup.value.close();
  43. }
  44. // 确认
  45. function confirmBtn(){
  46. $emit('confirm-btn');
  47. tipMiddlePopup.value.close();
  48. }
  49. defineExpose({
  50. handleShow,
  51. handleClose
  52. })
  53. </script>
  54. <style>
  55. </style>