contentDialog.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <uni-popup ref="commonPopup" :type="type" :animation="false" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.4)" background-color="#fff">
  3. <view class="phone-common-dialog1">
  4. <view class="common-body-box">
  5. <view class="common-title">{{title}}</view>
  6. <view class="common-content" :class="dialogContentClass">
  7. <slot></slot>
  8. </view>
  9. <view class="common-btn-box" v-if="showBtn">
  10. <view @click="confirmBtn">{{okBtn}}</view>
  11. </view>
  12. </view>
  13. </view>
  14. </uni-popup>
  15. </template>
  16. <script setup>
  17. import {
  18. reactive,
  19. ref
  20. } from 'vue';
  21. import {
  22. getJiazhengZhiye
  23. } from "@/api/jiazheng.js"
  24. const props = defineProps({
  25. type: {
  26. type: String,
  27. default: 'bottom'
  28. },
  29. title: {
  30. type: String,
  31. default: ''
  32. },
  33. content: {
  34. type: String,
  35. require: true,
  36. default: ''
  37. },
  38. dialogContentClass: {
  39. type: String,
  40. require: true,
  41. default: 'content-center-class'
  42. },
  43. okBtn: {
  44. type: String,
  45. require: true,
  46. default: '保存'
  47. },
  48. showBtn: {
  49. type: Boolean,
  50. default: true
  51. }
  52. });
  53. const commonPopup = ref(null); // 索引
  54. const $emit = defineEmits(['confirm-btn'])
  55. // 打开弹窗
  56. function handleShow() {
  57. commonPopup.value.open();
  58. }
  59. // 取消
  60. function handleClose() {
  61. commonPopup.value.close();
  62. }
  63. // 确认
  64. function confirmBtn() {
  65. $emit('confirm-btn');
  66. commonPopup.value.close();
  67. }
  68. defineExpose({
  69. handleShow,
  70. handleClose
  71. })
  72. </script>
  73. <style>
  74. </style>