Arco弹窗封装

<template>
  <div class="business-modal-wrapper">
    <a-modal :render-to-body="false" :visible="open" v-bind="defaultProps" @cancel="$emit('close')"
             :on-before-cancel="cannelDispatch" :draggable="draggable" :closable="false"
             @close="$emit('close')" @ok="$emit('ok')" :fullscreen="fullscreen">
      <template #title>
        <div class="business-modal-header">
          <div class="title">{{ props.title }}</div>
          <div class="actions">
            <a-space size="small">
              <div class="action-tool" v-if="fullscreen" @click="toggleFullscreen">
                <icon-fullscreen-exit/>
              </div>
              <div class="action-tool" v-else @click="toggleFullscreen">
                <icon-fullscreen/>
              </div>
              <div class="action-tool" @click="toggleDraggable">
                <icon-drag-arrow/>
              </div>
              <div class="action-tool" @click="$emit('close')">
                <icon-close/>
              </div>
            </a-space>
          </div>
        </div>
      </template>
      <slot/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {ModalConfig} from "@arco-design/web-vue";

const open = defineModel();

const props = defineProps({
  title: {
    type: String,
    default: '订单'
  }
})

const defaultProps: Partial<ModalConfig> = {
  titleAlign: 'start',
  width: '60vw',
  title: '',
  modalAnimationName: 'business-modal',
}

const fullscreen = ref(false)

const draggable = ref(false);

const emits = defineEmits(['close', 'ok']);

const toggleDraggable = () => {
  draggable.value = !draggable.value
}

const toggleFullscreen = () => {
  fullscreen.value = !fullscreen.value
}

const cannelDispatch = () => {
  // open.value = false
  if (fullscreen.value) {
    console.log('cannelDispatch')
    fullscreen.value = false
    return false;
  } else {
    console.log('cannelDispatch')
    emits('close')
    return true;
  }
}


</script>

<style scoped lang="less">

.business-modal-wrapper {

  :deep(.business-modal-enter-active) {
    animation-name: fadeIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }


  :deep(.business-modal-leave-active) {
    animation-name: fadeOut;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
  }

  .business-modal-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-right: 20px
  }

  .action {
    margin-left: -12px;
  }

  .action-tool {
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s cubic-bezier(0, 0, 1, 1);
    border-radius: var(--border-radius-circle);
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 12px;
    color: var(--color-text-1);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: var(--color-fill-2);
    }
  }


}
</style>