tipMiddleDialog.vue 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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" style="position: relative">
  10. <view v-if="closeFlag" class="not-confirm-btn" @click="handleClose"></view>
  11. <view class="confirm-btn" @click="confirmBtn"></view>
  12. <view v-if="showTip" @click="handleShowImage" style="position: absolute;right: 0;top: 22px"><uni-icons type="info" size="30"></uni-icons></view>
  13. </view>
  14. </view>
  15. </view>
  16. </uni-popup>
  17. <!-- 自定义预览弹窗 -->
  18. <uni-popup ref="previewPopup" type="center" :safe-area="false" :is-mask-click="false">
  19. <view class="custom-preview" style="position: relative">
  20. <image
  21. src="/static/images/login/ggg.gif"
  22. mode="widthFix"
  23. class="preview-image"
  24. />
  25. <view class="close-btn" @click="handleCloseImg" style="position: absolute;top: -30px;right: 5px">
  26. <text class="close-icon" style="color:#fff">关闭</text>
  27. </view>
  28. </view>
  29. </uni-popup>
  30. </template>
  31. <script setup>
  32. import { ref } from 'vue';
  33. const props = defineProps({
  34. title: {
  35. type: String,
  36. default: '提示'
  37. },
  38. closeFlag: {
  39. type: Boolean,
  40. default: true
  41. },
  42. content: {
  43. type: String,
  44. require: true,
  45. default: ''
  46. },
  47. notClose: {
  48. type: Boolean,
  49. default: false
  50. },
  51. showTip: {
  52. type: Boolean,
  53. default: false
  54. }
  55. });
  56. const tipMiddlePopup = ref(null); // 索引
  57. const previewPopup = ref(null)
  58. const $emit = defineEmits(['confirm-btn'])
  59. // 打开弹窗
  60. function handleShow() {
  61. tipMiddlePopup.value.open();
  62. }
  63. // 取消
  64. function handleClose() {
  65. tipMiddlePopup.value.close();
  66. }
  67. // 确认
  68. function confirmBtn(){
  69. $emit('confirm-btn');
  70. if (!props.notClose) {
  71. tipMiddlePopup.value.close();
  72. }
  73. }
  74. function handleCloseImg() {
  75. previewPopup.value.close()
  76. }
  77. function handleShowImage() {
  78. previewPopup.value.open()
  79. // uni.previewImage({
  80. // urls: ['/static/images/login/ggg.gif'],
  81. // });
  82. }
  83. defineExpose({
  84. handleShow,
  85. handleClose
  86. })
  87. </script>
  88. <style>
  89. </style>