tipMiddleDialog.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. notClose: {
  34. type: Boolean,
  35. default: false
  36. }
  37. });
  38. const tipMiddlePopup = ref(null); // 索引
  39. const $emit = defineEmits(['confirm-btn'])
  40. // 打开弹窗
  41. function handleShow() {
  42. tipMiddlePopup.value.open();
  43. }
  44. // 取消
  45. function handleClose() {
  46. tipMiddlePopup.value.close();
  47. }
  48. // 确认
  49. function confirmBtn(){
  50. $emit('confirm-btn');
  51. if (!props.notClose) {
  52. tipMiddlePopup.value.close();
  53. }
  54. }
  55. defineExpose({
  56. handleShow,
  57. handleClose
  58. })
  59. </script>
  60. <style>
  61. </style>