a-modal使用hooks封装状态逻辑并添加全屏切换效果

• /hooks/useModal.js

import { nextTick, ref } from 'vue'
import {isFunction} from "lodash-es";
 
export function useModal() {
	// 标题
	// 执行ok、cancel方法
	const visible = ref(false)
	const loading = ref(false)
 
	const hideModal = () => {
		visible.value = false
	}
 
	const showModal = () => {
		visible.value = true
	}
 
	const toggleLoading = () => {
		loading.value = !loading.value
	}
	const handleOk = async (callbackFn) => {
		if (!callbackFn || isFunction(callbackFn) ) return
		toggleLoading()
		console.log('output-> 1', 1)
		callbackFn(() => {
			console.log('output-> 2', 2)
			toggleLoading();
			hideModal();
		})
	}
 
	return {
		visible,
		showModal,
		hideModal,
		handleOk,
		loading,
		toggleLoading
	}
}
 

• testModal.vue

<template>
  <div>
    <a-button type="link" @click="showModal">详情</a-button>
    <a-modal v-model:visible="visible"
             :closable="false"
             :wrap-class-name="[isFullscreen ? 'full-modal' : '']"
    >
      <template #title>
        <div style="display: flex; justify-content: space-between">
          <span>登录表单</span>
          <span>
            <span style="margin-right: 8px">
              <fullscreen-exit-outlined v-if="isFullscreen" @click="onFullscreenToggle"/>
              <fullscreen-outlined v-else @click="onFullscreenToggle"/>
            </span>
            <span>
              <close-outlined @click="onClose"/>
            </span>
          </span>
        </div>
      </template>
      <a-form
        ref="formRef"
      >
        <a-form-item name="name">
          <a-input
            v-model:value="state.userName"
            autocomplete="off"
            placeholder="请输入账号"
          >
            <template v-slot:prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)"/>
            </template>
          </a-input>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="hideModal">取消</a-button>
        <a-button key="submit"
                  type="primary" :loading="loading"
                  @click="handleOk(submitFn)">提交
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
import {useModal} from '@/hooks/useModal'
import {message} from 'ant-design-vue'
import {UserOutlined, CloseOutlined, FullscreenOutlined, FullscreenExitOutlined} from '@ant-design/icons-vue'
import {reactive, ref} from 'vue'
 
const {visible, loading, handleOk, hideModal, showModal} = useModal()
 
const isFullscreen = ref(false)
const state = reactive({
  userName: ''
})
 
 
const submitFn = async (callback) => {
  setTimeout(() => {
    // 提交逻辑代码
    console.log('output-> state.userName::: ', state.userName)
    message.warn('提交成功')
    callback()
  }, 2000)
  return true
}
const onFullscreenToggle = () => {
  isFullscreen.value = !isFullscreen.value
}
const onClose = () => {
  hideModal()
}
 
</script>
 
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
 
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 90vw;
    margin-left: 200px;
  }
 
  .ant-modal-body {
    flex: 1;
  }
}
</style>