fix: 直接使用.value无法触发useForm的更新(原生是正常的) 需要修改地址
This commit is contained in:
@@ -5,7 +5,7 @@ import type { CustomGetter } from '#/components/upload/src/props';
|
||||
|
||||
import { h, ref } from 'vue';
|
||||
|
||||
import { CodeMirror, Page } from '@vben/common-ui';
|
||||
import { CodeMirror, Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { Alert, Card, Modal, RadioGroup, Switch } from 'ant-design-vue';
|
||||
@@ -14,6 +14,7 @@ import { FileUpload, ImageUpload } from '#/components/upload';
|
||||
|
||||
import { useFileType, useImageType } from './hook';
|
||||
import sql from './insert.sql?raw';
|
||||
import uploadModal from './upload-modal.vue';
|
||||
|
||||
const singleImageId = ref('1905537674682916865');
|
||||
const singleFileId = ref('1905191167882518529');
|
||||
@@ -53,6 +54,10 @@ const customThumbnailUrl: CustomGetter<undefined> = () => {
|
||||
const { copy } = useClipboard({ legacy: true });
|
||||
|
||||
const animationEnable = ref(false);
|
||||
|
||||
const [UploadModal, uploadModalApi] = useVbenModal({
|
||||
connectedComponent: uploadModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -63,6 +68,10 @@ const animationEnable = ref(false);
|
||||
<CodeMirror class="mt-2" v-model="sql" language="sql" readonly />
|
||||
</Card>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Card title="表单上传">
|
||||
<a-button @click="uploadModalApi.open()">打开</a-button>
|
||||
<UploadModal />
|
||||
</Card>
|
||||
<Card title="单上传, 会绑定为string" size="small">
|
||||
<ImageUpload v-model:value="singleImageId" />
|
||||
当前绑定值: {{ singleImageId }}
|
||||
|
70
apps/web-antd/src/views/演示使用自行删除/upload/upload-modal.vue
Normal file
70
apps/web-antd/src/views/演示使用自行删除/upload/upload-modal.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { h } from 'vue';
|
||||
|
||||
import { JsonPreview, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Modal, Space } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
layout: 'vertical',
|
||||
schema: [
|
||||
{
|
||||
label: '图片上传多图',
|
||||
component: 'ImageUpload',
|
||||
fieldName: 'ossIds',
|
||||
componentProps: {
|
||||
maxCount: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '图片上传单图',
|
||||
component: 'ImageUpload',
|
||||
fieldName: 'ossId',
|
||||
componentProps: {
|
||||
maxCount: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
async function getValues() {
|
||||
try {
|
||||
const v = await formApi.getValues();
|
||||
console.log(v);
|
||||
|
||||
Modal.info({
|
||||
content: () => h(JsonPreview, { data: v }),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAssign() {
|
||||
const ids = ['1908761290673315841', '1907738568539332610'];
|
||||
await formApi.setValues({
|
||||
ossIds: ids,
|
||||
ossId: ids[0],
|
||||
});
|
||||
}
|
||||
|
||||
const [BasicModal] = useVbenModal({
|
||||
title: '上传',
|
||||
footer: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal>
|
||||
<div class="flex flex-col">
|
||||
<Space>
|
||||
<a-button @click="handleAssign">赋值</a-button>
|
||||
<a-button @click="getValues">获取值</a-button>
|
||||
</Space>
|
||||
<BasicForm />
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
Reference in New Issue
Block a user