tipMiddleDialog.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!-- 中弹窗 二行文字 -->
  2. <template>
  3. <uni-popup ref="tipMiddlePopup" :animation="false" :is-mask-click="false"
  4. mask-background-color="rgba(0,0,0, 0.76);">
  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. <ezyActiveVue class="ezy-btn-active not-confirm-btn" @aclick="handleClose">取消</ezyActiveVue>
  11. <ezyActiveVue class="ezy-btn-active confirm-btn" @aclick="confirmBtn">确认</ezyActiveVue>
  12. </view>
  13. </view>
  14. </view>
  15. </uni-popup>
  16. </template>
  17. <script setup>
  18. import { ref } from 'vue';
  19. import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
  20. const props = defineProps({
  21. title: {
  22. type: String,
  23. default: '提示'
  24. },
  25. content: {
  26. type: String,
  27. require: true,
  28. default: ''
  29. },
  30. });
  31. const tipMiddlePopup = ref(null); // 索引
  32. const $emit = defineEmits(['confirm-btn'])
  33. // 打开弹窗
  34. function handleShow() {
  35. tipMiddlePopup.value.open();
  36. }
  37. // 取消
  38. function handleClose() {
  39. tipMiddlePopup.value.close();
  40. }
  41. // 确认
  42. function confirmBtn(){
  43. $emit('confirm-btn');
  44. tipMiddlePopup.value.close();
  45. }
  46. defineExpose({
  47. handleShow,
  48. handleClose
  49. })
  50. </script>
  51. <style>
  52. </style>