tipSmallDialog.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!-- 小弹窗 一行文字 -->
  2. <template>
  3. <uni-popup ref="tipSmallPopup" :animation="false" :is-mask-click="false"
  4. mask-background-color="rgba(255, 255, 255, 0.6);">
  5. <view class="ezy-tip-dialog tip-small-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 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. require: true,
  27. default: ''
  28. },
  29. });
  30. const tipSmallPopup = ref(null); // 索引
  31. const $emit = defineEmits(['confirm-btn'])
  32. // 打开弹窗
  33. function handleShow() {
  34. tipSmallPopup.value.open();
  35. }
  36. // 取消
  37. function handleClose() {
  38. tipSmallPopup.value.close();
  39. }
  40. // 确认
  41. function confirmBtn(){
  42. $emit('confirm-btn');
  43. tipSmallPopup.value.close();
  44. }
  45. defineExpose({
  46. handleShow
  47. })
  48. </script>
  49. <style>
  50. </style>