Closed imdap closed 1 week ago
Vben Admin V5
【antd】Select等选择器组件在Modal/Drawer丢失校验失败样式
在modal/drawer下 丢失边框样式
在packages\styles\src\antd\index.css中 ant-select-selector的样式需要在ant-app下才能生效
packages\styles\src\antd\index.css
ant-select-selector
ant-app
将表单放置在modal/drawer中 已经不在ant-app节点下 造成问题
<script lang="ts" setup> import { Page, useVbenModal } from '@vben/common-ui'; import { Button, Card, message } from 'ant-design-vue'; import { useVbenForm, z } from '#/adapter'; const [Form, formApi] = useVbenForm({ // 所有表单项共用,可单独在表单内覆盖 commonConfig: { // 所有表单项 componentProps: { class: 'w-full', }, }, // 提交函数 handleSubmit: onSubmit, // 垂直布局,label和input在不同行,值为vertical // 水平布局,label和input在同一行 layout: 'horizontal', schema: [ { // 组件需要在 #/adapter.ts内注册,并加上类型 component: 'Input', // 对应组件的参数 componentProps: { placeholder: '请输入', }, // 字段名 fieldName: 'field1', // 界面显示的label label: '字段1', rules: 'required', }, { component: 'Input', componentProps: { placeholder: '请输入', }, defaultValue: '默认值', fieldName: 'field2', label: '默认值(必填)', rules: 'required', }, { component: 'Input', componentProps: { placeholder: '请输入', }, fieldName: 'field3', label: '默认值(非必填)', rules: z.string().default('默认值').optional(), }, { component: 'Input', componentProps: { placeholder: '请输入', }, fieldName: 'field31', label: '自定义信息', rules: z.string().min(1, { message: '最少输入1个字符' }), }, { component: 'Input', // 对应组件的参数 componentProps: { placeholder: '请输入', }, // 字段名 fieldName: 'field4', // 界面显示的label label: '邮箱', rules: z.string().email('请输入正确的邮箱'), }, { component: 'InputNumber', componentProps: { placeholder: '请输入', }, fieldName: 'number', label: '数字', rules: 'required', }, { component: 'Select', componentProps: { allowClear: true, filterOption: true, options: [ { label: '选项1', value: '1', }, { label: '选项2', value: '2', }, ], placeholder: '请选择', showSearch: true, }, defaultValue: undefined, fieldName: 'options', label: '下拉选', rules: 'selectRequired', }, { component: 'RadioGroup', componentProps: { options: [ { label: '选项1', value: '1', }, { label: '选项2', value: '2', }, ], }, fieldName: 'radioGroup', label: '单选组', rules: 'selectRequired', }, { component: 'CheckboxGroup', componentProps: { name: 'cname', options: [ { label: '选项1', value: '1', }, { label: '选项2', value: '2', }, ], }, fieldName: 'checkboxGroup', label: '多选组', rules: 'selectRequired', }, { component: 'Checkbox', fieldName: 'checkbox', label: '', renderComponentContent: () => { return { default: () => ['我已阅读并同意'], }; }, rules: 'selectRequired', }, { component: 'DatePicker', defaultValue: undefined, fieldName: 'datePicker', label: '日期选择框', rules: 'selectRequired', }, { component: 'RangePicker', defaultValue: undefined, fieldName: 'rangePicker', label: '区间选择框', rules: 'selectRequired', }, ], // 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个 wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', }); function onSubmit(values: Record<string, any>) { message.success({ content: `form values: ${JSON.stringify(values)}`, }); } const [BasicModal, modalApi] = useVbenModal({}); </script> <template> <Page description="表单校验示例" title="表单组件"> <Card title="基础组件校验示例"> <template #extra> <Button @click="() => modalApi.open()">弹窗表单</Button> <Button @click="() => formApi.validate()">校验表单</Button> <Button class="mx-2" @click="() => formApi.resetValidate()"> 清空校验信息 </Button> </template> <Form /> </Card> <BasicModal :footer="false" class="w-full" title="弹窗表单"> <Form /> </BasicModal> </Page> </template>
System: OS: Windows 11 10.0.22631 Binaries: Node: 20.15.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD pnpm: 9.9.0 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.22621.3527
No response
Version
Vben Admin V5
Describe the bug?
【antd】Select等选择器组件在Modal/Drawer丢失校验失败样式
在modal/drawer下 丢失边框样式
在
packages\styles\src\antd\index.css
中ant-select-selector
的样式需要在ant-app
下才能生效将表单放置在modal/drawer中 已经不在
ant-app
节点下 造成问题Reproduction
System Info
Relevant log output
No response
Validations