1. <script setup lang="ts">
    2. defineProps({
    3.   show: {
    4.     type: Boolean,
    5.     default: false
    6.   },
    7.   title: {
    8.     type: String,
    9.     default: ''
    10.   },
    11.   message: {
    12.     type: String,
    13.     default: ''
    14.   },
    15.   close: {
    16.     type: Function,
    17.     default: function e(fn: Function) {
    18.       fn()
    19.     }
    20.   }
    21. })
    22. const emit = defineEmits(['update:show'])
    23. const handleClick = () => {
    24.   emit('update:show', false)
    25. }
    26. </script>
    28. <template>
    29.   <div v-if="show" class="dialog-mask flex-center">
    30.     <div class="dialog-box">
    31.       <div class="dialog-header">{{title}}</div>
    32.       <div class="dialog-content">{{message}}</div>
    33.       <div class="dialog-footer">
    34.         <button class="button" @click="close(handleClick)">确定</button>
    35.       </div>
    36.     </div>
    37.   </div>
    38. </template>
    40. <style lang="scss">
    41. .flex-center {
    42.   display: flex;
    43.   justify-content: center;
    44.   align-items: center;
    45. }
    47. .dialog-mask {
    48.   position: fixed;
    49.   left: 0;
    50.   top: 0;
    51.   width: 100%;
    52.   height: 100%;
    53.   background-color: rgba(0, 0, 0, 0.5);
    54.   z-index: 1000;
    55. }
    57. .dialog-box {
    58.   background-color: #fff;
    59.   width: 300px;
    60.   border-radius: 10px;
    61.   overflow: hidden;
    63.   .dialog-header {
    64.     padding-top: 20px;
    65.     font-weight: bold;
    66.     text-align: center;
    67.   }
    69.   .dialog-content {
    70.     padding: 5px 20px 20px 20px;
    71.     font-size: 12px;
    72.     text-align: center;
    73.     white-space: pre-wrap;
    74.     word-wrap: break-word;
    75.   }
    77.   .dialog-footer {
    78.     display: flex;
    79.     overflow: hidden;
    80.     user-select: none;
    81.     border-top: 1px solid #EBEDF0;
    83.     .button {
    84.       color: rgb(67, 103, 186);
    85.       text-align: center;
    86.       width: 100%;
    87.       line-height: 40px;
    88.       background-color: #fff;
    89.       border: none;
    90.     }
    92.     .button:active {
    93.       background-color: #f2f3f5;
    94.     }
    95.   }
    96. }
    97. </style>
    1. import { createApp } from 'vue'
    2. import Dialog from './index.vue'
    4. const createDialog = (title: String, message: String) => {
    5.   const mountNode = document.createElement('div')
    6.   const Instance = createApp(Dialog, {
    7.     show: true,
    8.     message,
    9.     title,
    10.     close: () => {
    11.       Instance.unmount()
    12.       document.body.removeChild(mountNode)
    13.     },
    14.   })
    15.   Instance.mount(mountNode)
    16.   document.body.appendChild(mountNode)
    17. }
    19. export default createDialog