restructure/src/components/CardModal/index.vue

<template>
  <n-modal
    v-bind="getModalOptions"
    :style="`width:${getModalOptions.width}px`"
    preset="card"
    :title="options.title"
    @update:show="handleClose"
  >
    <n-card :bordered="false">
      <slot name="Context" />
      <n-space style="float: right">
        <n-button @click="handleClose">取消</n-button>
        <n-button type="primary" @click="handleClick">确认</n-button>
      </n-space>
    </n-card>
  </n-modal>
</template>

<script>

import { defineComponent, computed, unref } from 'vue'
export default defineComponent({
  name: 'CardModal',
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    save: null, // click事件没有检验
    onClose: (value) => {
      return value
    }
  },
  setup(props, { emit }) {
    const getModalOptions = computed(() => {
      return {
        ...props.options,
        width: props.options.width || 600
      }
    })
    const handleClick = function() {
      emit('save')
    }
    const handleClose = function() {
      emit('onClose', true)
    }
    return {
      getModalOptions,
      handleClick,
      handleClose
    }
  }
})
</script>

<style scoped lang='scss'>
</style>