vent-template/src/layouts/default/header/components/user-dropdown/UpdateHome.vue

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="切换风格" @ok="handleSubmit" width="600px">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref, defineExpose } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { useMessage } from '/@/hooks/web/useMessage';
// 声明Emits
const emit = defineEmits(['register']);
const $message = useMessage();
const formRef = ref();
//表单配置
const [registerForm, { validate }] = useForm({
  schemas: [
    {
      label: '页面风格',
      field: 'pageType',
      component: 'RadioGroup',
      defaultValue: 1,
      componentProps: {
        options: [
          {
            label: '6.0',
            value: 1,
          },
          {
            label: '5.5',
            value: 0,
          },
        ],
      },
    },
  ],
  showActionButtonGroup: false,
});
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner();

//表单提交事件
async function handleSubmit() {
  try {
    const values = await validate();
    setModalProps({ confirmLoading: true });
    //设置页面风格
    if(values['pageType'] == 1){
      // 6.0页面
    }else if(values['pageType'] == 0) {
      // 5.5页面
    }
    closeModal();
  } finally {
    setModalProps({ confirmLoading: false });
  }
}

async function show() {
  await setModalProps({ visible: true });
}

defineExpose({
  show,
});
</script>