cwg-tips-popup.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
  3. <view class="popup-content">
  4. <view v-if="title" class="des1"
  5. style="font-size: 16px;font-weight: bold; line-height: 1.6; margin: 30px 0 50px" v-t="title" />
  6. <view v-if="content" class="des1" style="font-size: 15px; line-height: 1.6; margin: 30px 0 50px"
  7. v-t="content" />
  8. <view v-else class="des1" style="font-size: 15px; line-height: 1.6; margin: 30px 0 50px" v-t="content">
  9. </view>
  10. <cwg-rich-text class="popup-text" :nodes="introduce" />
  11. </view>
  12. <template #footer>
  13. <button @click="visible = false">{{ t('Btn.Cancel') }}</button>
  14. <button type="primary" @click="tosubmitConfirm">{{ t('Btn.Confirm') }}</button>
  15. </template>
  16. </cwg-popup>
  17. </template>
  18. <script setup>
  19. import { computed } from 'vue';
  20. import { useI18n } from 'vue-i18n';
  21. const props = defineProps({
  22. visible: {
  23. type: Boolean,
  24. default: false
  25. },
  26. // 弹窗标题
  27. title: {
  28. type: String,
  29. default: ''
  30. },
  31. // 弹窗内容
  32. content: {
  33. type: String,
  34. default: ''
  35. },
  36. content: {
  37. type: String,
  38. default: ''
  39. },
  40. // 弹窗富文本内容
  41. introduce: {
  42. type: String,
  43. default: ''
  44. },
  45. });
  46. const emit = defineEmits(['update:visible', 'confirm']);
  47. const { t } = useI18n();
  48. // Watch for changes in visible prop and emit update event
  49. const visible = computed({
  50. get: () => props.visible,
  51. set: (value) => emit('update:visible', value)
  52. });
  53. const tosubmitConfirm = () => {
  54. visible.value = false;
  55. emit('confirm');
  56. }
  57. </script>
  58. <style lang="scss" scoped>
  59. .popup-content {
  60. p {
  61. text-align: left;
  62. }
  63. }
  64. </style>