Vben Admin—— Vben Admin DFileUpload 组件文件回显及文字 tips

最新推荐文章于 2025-06-19 17:38:49 发布

dbt@L

最新推荐文章于 2025-06-19 17:38:49 发布

阅读量471

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_43201350/article/details/145457743

Vben Admin 专栏收录该内容

23 篇文章

订阅专栏

<template>
  <BasicModal>
    <BasicForm @register="registerForm"> </BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup name="">
import { schemas } from "./index";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { BasicForm } from "/@/components/Form/index";
const [registerForm, { getFieldsValue, validate, setFieldsValue }] = useForm({
  labelWidth: 80,
  baseColProps: { span: 24 },
  schemas: schemas,
  showActionButtonGroup: false,
  actionColOptions: {
    span: 23,
  },
});

const [registerModal, { closeModal, changeOkLoading }] = useModalInner(
  async (data) => {
    reload();
  }
);

const reload = async () => {
  let list = [
    {
      url: "http://192.168.6.227:8080/xxx.jpg",
    },
  ];
  setFieldsValue({
    // 文件回显
    myUrl: list?.filter(Boolean).map((url) => ({ resourceUrls: url })),
  });
};
</script>

index.ts 文件

import { FormSchema } from "/@/components/Table";
export const voucherSchemas: FormSchema[] = [
  {
    field: "myUrl",
    component: "DFileUpload",
    label: "附件",
    labelWidth: "80px",
    required: true,
    colProps: { span: 24 },
    componentProps: () => {
      return {
        validType: ["jpg", "jpeg", "png", "webp"],
        maxCount: 8,
        disabled: true,
      };
    },
    // 设置提示文字
    tips: {
      text: "我是提示文字",
      componentProps: {
        style: "color: red; ",
      },
    },
  },
];