Vben Admin——vben admin , ant design vue 实现单个日期选择组件

dbt@L

于 2025-04-29 17:34:21 发布

阅读量150

点赞数 2

分类专栏： Vben Admin 文章标签： Vben Admin

本文链接：https://blog.csdn.net/qq_43201350/article/details/147616469

版权

Vben Admin 专栏收录该内容

20 篇文章

订阅专栏

效果：
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<template>
  <div>
    <BasicModal
      :destroy-on-close="true"
      v-bind="$attrs"
      @register="registerModal"
      title="标题"
      width="1200px"
      ok-text="确定"
      :loading="isLoading"
    >
      <BasicForm @register="registerForm" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
import { BasicModal } from "/@/components/Modal";
import { BasicForm, useForm } from "/@/components/Form/index";
import { FormSchema } from "@/components/Form";

const formSchema = (): FormSchema[] => [
  {
    field: "appointArrivalDate",
    component: "DatePicker",
    label: "预计送达",
    required: true,
    colProps: { span: 24 },
    labelWidth: "120px",
    componentProps: {
      style: {
        width: "100%",
      },
      minuteStep: 30,
      valueFormat: "YYYY-MM-DD",
      getPopupContainer: () => {
        return document.body;
      },
    },
  },
];

const [registerForm] = useForm({
  labelWidth: 150,
  baseColProps: { span: 24 },
  schemas: formSchema(),
  showActionButtonGroup: false,
  actionColOptions: {
    span: 23,
  },
} as any);
</script>
<style lang="less" scoped></style>