Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
This commit is contained in:
dap
commit
359d837dee
18
.github/CODEOWNERS
vendored
18
.github/CODEOWNERS
vendored
@ -1,14 +1,14 @@
|
||||
# default onwer
|
||||
* anncwb@126.com vince292007@gmail.com
|
||||
* anncwb@126.com vince292007@gmail.com netfan@foxmail.com
|
||||
|
||||
# vben core onwer
|
||||
/.github/ anncwb@126.com vince292007@gmail.com
|
||||
/.vscode/ anncwb@126.com vince292007@gmail.com
|
||||
/packages/ anncwb@126.com vince292007@gmail.com
|
||||
/packages/@core/ anncwb@126.com vince292007@gmail.com
|
||||
/internal/ anncwb@126.com vince292007@gmail.com
|
||||
/scripts/ anncwb@126.com vince292007@gmail.com
|
||||
/.github/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
|
||||
/.vscode/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
|
||||
/packages/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
|
||||
/packages/@core/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
|
||||
/internal/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
|
||||
/scripts/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
|
||||
|
||||
# vben team onwer
|
||||
apps/ anncwb@126.com vince292007@gmail.com @vbenjs/team-v5
|
||||
docs/ anncwb@126.com vince292007@gmail.com @vbenjs/team-v5
|
||||
apps/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5
|
||||
docs/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5
|
||||
|
||||
@ -108,7 +108,13 @@ async function initComponentAdapter() {
|
||||
return h(Button, { ...props, attrs, type: 'default' }, slots);
|
||||
},
|
||||
Divider,
|
||||
IconPicker: (props, { attrs, slots }) => {
|
||||
return h(
|
||||
IconPicker,
|
||||
{ iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
|
||||
slots,
|
||||
);
|
||||
},
|
||||
Input: withDefaultPlaceholder(Input, 'input'),
|
||||
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
|
||||
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
*/
|
||||
|
||||
import type { BaseFormComponentType } from '@vben/common-ui';
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { Component, SetupContext } from 'vue';
|
||||
import { h } from 'vue';
|
||||
@ -88,15 +89,67 @@ async function initComponentAdapter() {
|
||||
return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
|
||||
},
|
||||
Divider: ElDivider,
|
||||
IconPicker: (props, { attrs, slots }) => {
|
||||
return h(
|
||||
IconPicker,
|
||||
{
|
||||
iconSlot: 'append',
|
||||
modelValueProp: 'model-value',
|
||||
inputComponent: ElInput,
|
||||
...props,
|
||||
...attrs,
|
||||
},
|
||||
slots,
|
||||
);
|
||||
},
|
||||
Input: withDefaultPlaceholder(ElInput, 'input'),
|
||||
InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
|
||||
RadioGroup: ElRadioGroup,
|
||||
Select: withDefaultPlaceholder(ElSelect, 'select'),
|
||||
Space: ElSpace,
|
||||
Switch: ElSwitch,
|
||||
TimePicker: ElTimePicker,
|
||||
DatePicker: ElDatePicker,
|
||||
TimePicker: (props, { attrs, slots }) => {
|
||||
const { name, id, isRange } = props;
|
||||
const extraProps: Recordable<any> = {};
|
||||
if (isRange) {
|
||||
if (name && !Array.isArray(name)) {
|
||||
extraProps.name = [name, `${name}_end`];
|
||||
}
|
||||
if (id && !Array.isArray(id)) {
|
||||
extraProps.id = [id, `${id}_end`];
|
||||
}
|
||||
}
|
||||
return h(
|
||||
ElTimePicker,
|
||||
{
|
||||
...props,
|
||||
...attrs,
|
||||
...extraProps,
|
||||
},
|
||||
slots,
|
||||
);
|
||||
},
|
||||
DatePicker: (props, { attrs, slots }) => {
|
||||
const { name, id, type } = props;
|
||||
const extraProps: Recordable<any> = {};
|
||||
if (type && type.includes('range')) {
|
||||
if (name && !Array.isArray(name)) {
|
||||
extraProps.name = [name, `${name}_end`];
|
||||
}
|
||||
if (id && !Array.isArray(id)) {
|
||||
extraProps.id = [id, `${id}_end`];
|
||||
}
|
||||
}
|
||||
return h(
|
||||
ElDatePicker,
|
||||
{
|
||||
...props,
|
||||
...attrs,
|
||||
...extraProps,
|
||||
},
|
||||
slots,
|
||||
);
|
||||
},
|
||||
TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
|
||||
Upload: ElUpload,
|
||||
};
|
||||
|
||||
@ -89,7 +89,13 @@ async function initComponentAdapter() {
|
||||
return h(NButton, { ...props, attrs, type: 'primary' }, slots);
|
||||
},
|
||||
Divider: NDivider,
|
||||
IconPicker: (props, { attrs, slots }) => {
|
||||
return h(
|
||||
IconPicker,
|
||||
{ iconSlot: 'suffix', inputComponent: NInput, ...props, ...attrs },
|
||||
slots,
|
||||
);
|
||||
},
|
||||
Input: withDefaultPlaceholder(NInput, 'input'),
|
||||
InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
|
||||
RadioGroup: NRadioGroup,
|
||||
|
||||
@ -316,6 +316,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
|
||||
| commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
|
||||
| schema | 表单项的每一项配置 | `FormSchema` | - |
|
||||
| submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
|
||||
| submitOnChange | 字段值改变时提交表单 | `boolean` | false |
|
||||
|
||||
### TS 类型说明
|
||||
|
||||
|
||||
@ -18,15 +18,14 @@ outline: deep
|
||||
|
||||
### Props
|
||||
|
||||
| 属性名 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 页面标题 | `string\|slot` | - |
|
||||
| description | 页面描述（标题下的内容） | `string\|slot` | - |
|
||||
| contentClass | 内容区域的class | `string` | - |
|
||||
| headerClass | 头部区域的class | `string` | - |
|
||||
| footerClass | 底部区域的class | `string` | - |
|
||||
| autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` |
|
||||
| fixedHeader | 固定头部在页面内容区域顶部，在滚动时保持可见 | `boolean` | `false` |
|
||||
| 属性名 | 描述 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| title | 页面标题 | `string\|slot` | - | - |
|
||||
| description | 页面描述（标题下的内容） | `string\|slot` | - | - |
|
||||
| contentClass | 内容区域的class | `string` | - | - |
|
||||
| headerClass | 头部区域的class | `string` | - | - |
|
||||
| footerClass | 底部区域的class | `string` | - | - |
|
||||
| autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` | - |
|
||||
|
||||
::: tip 注意
|
||||
|
||||
|
||||
@ -76,6 +76,8 @@ const formOptions: VbenFormProps = {
|
||||
submitButtonOptions: {
|
||||
content: '查询',
|
||||
},
|
||||
// 是否在字段值改变时提交表单
|
||||
submitOnChange: false,
|
||||
// 按下回车时是否提交表单
|
||||
submitOnEnter: false,
|
||||
};
|
||||
|
||||
@ -16,3 +16,11 @@ export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
|
||||
export function formatDateTime(time: number | string) {
|
||||
return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
|
||||
export function isDate(value: any): value is Date {
|
||||
return value instanceof Date;
|
||||
}
|
||||
|
||||
export function isDayjsObject(value: any): value is dayjs.Dayjs {
|
||||
return dayjs.isDayjs(value);
|
||||
}
|
||||
|
||||
@ -14,6 +14,8 @@ import { Store } from '@vben-core/shared/store';
|
||||
import {
|
||||
bindMethods,
|
||||
createMerge,
|
||||
isDate,
|
||||
isDayjsObject,
|
||||
isFunction,
|
||||
isObject,
|
||||
mergeWithArrayOverride,
|
||||
@ -36,6 +38,7 @@ function getDefaultState(): VbenFormProps {
|
||||
showCollapseButton: false,
|
||||
showDefaultActions: true,
|
||||
submitButtonOptions: {},
|
||||
submitOnChange: false,
|
||||
submitOnEnter: false,
|
||||
wrapperClass: 'grid-cols-1',
|
||||
};
|
||||
@ -251,10 +254,19 @@ export class FormApi {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 合并算法有待改进，目前的算法不支持object类型的值。
|
||||
* antd的日期时间相关组件的值类型为dayjs对象
|
||||
* element-plus的日期时间相关组件的值类型可能为Date对象
|
||||
* 以上两种类型需要排除深度合并
|
||||
*/
|
||||
const fieldMergeFn = createMerge((obj, key, value) => {
|
||||
if (key in obj) {
|
||||
obj[key] =
|
||||
!Array.isArray(obj[key]) && isObject(obj[key])
|
||||
!Array.isArray(obj[key]) &&
|
||||
isObject(obj[key]) &&
|
||||
!isDayjsObject(obj[key]) &&
|
||||
!isDate(obj[key])
|
||||
? fieldMergeFn(obj[key], value)
|
||||
: value;
|
||||
}
|
||||
|
||||
@ -342,6 +342,12 @@ export interface VbenFormProps<
|
||||
*/
|
||||
submitButtonOptions?: ActionButtonOptions;
|
||||
|
||||
/**
|
||||
* 是否在字段值改变时提交表单
|
||||
* @default false
|
||||
*/
|
||||
submitOnChange?: boolean;
|
||||
|
||||
/**
|
||||
* 是否在回车时提交表单
|
||||
* @default false
|
||||
|
||||
@ -6,7 +6,9 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
|
||||
import { useForwardPriorityValues } from '@vben-core/composables';
|
||||
// import { isFunction } from '@vben-core/shared/utils';
|
||||
|
||||
import { useTemplateRef } from 'vue';
|
||||
import { toRaw, useTemplateRef, watch } from 'vue';
|
||||
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
|
||||
import FormActions from './components/form-actions.vue';
|
||||
import {
|
||||
@ -56,6 +58,17 @@ function handleKeyDownEnter(event: KeyboardEvent) {
|
||||
|
||||
formActionsRef.value?.handleSubmit?.();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => form.values,
|
||||
useDebounceFn(() => {
|
||||
(props.handleValuesChange ?? state.value.handleValuesChange)?.(
|
||||
toRaw(form.values),
|
||||
);
|
||||
state.value.submitOnChange && props.formApi?.submitForm();
|
||||
}, 300),
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -172,7 +172,7 @@ function handleFocusOutside(e: Event) {
|
||||
ref="contentRef"
|
||||
:class="
|
||||
cn(
|
||||
'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-2xl',
|
||||
'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-[var(--radius)]',
|
||||
modalClass,
|
||||
{
|
||||
'border-border border': bordered,
|
||||
|
||||
@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
|
||||
props.class,
|
||||
)
|
||||
cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
|
||||
"
|
||||
>
|
||||
<slot></slot>
|
||||
|
||||
@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
|
||||
props.class,
|
||||
)
|
||||
cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
|
||||
"
|
||||
>
|
||||
<slot></slot>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, watchEffect } from 'vue';
|
||||
import { computed, h, ref, type VNode, watch, watchEffect } from 'vue';
|
||||
|
||||
import { usePagination } from '@vben/hooks';
|
||||
import { EmptyIcon, Grip, listIcons } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Pagination,
|
||||
PaginationEllipsis,
|
||||
PaginationFirst,
|
||||
@ -29,12 +28,24 @@ interface Props {
|
||||
* 图标列表
|
||||
*/
|
||||
icons?: string[];
|
||||
/** Input组件 */
|
||||
inputComponent?: VNode;
|
||||
/** 图标插槽名，预览图标将被渲染到此插槽中 */
|
||||
iconSlot?: string;
|
||||
/** input组件的值属性名称 */
|
||||
modelValueProp?: string;
|
||||
/** 图标样式 */
|
||||
iconClass?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
prefix: 'ant-design',
|
||||
pageSize: 36,
|
||||
icons: () => [],
|
||||
inputComponent: () => h('div'),
|
||||
iconSlot: 'default',
|
||||
iconClass: 'size-4',
|
||||
modelValueProp: 'value',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
@ -110,6 +121,19 @@ function close() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
function onKeywordChange(v: string) {
|
||||
keyword.value = v;
|
||||
}
|
||||
|
||||
const searchInputProps = computed(() => {
|
||||
return {
|
||||
placeholder: $t('ui.iconPicker.search'),
|
||||
[props.modelValueProp]: keyword.value,
|
||||
[`onUpdate:${props.modelValueProp}`]: onKeywordChange,
|
||||
class: 'mx-2',
|
||||
};
|
||||
});
|
||||
|
||||
defineExpose({ toggleOpenState, open, close });
|
||||
</script>
|
||||
<template>
|
||||
@ -119,24 +143,18 @@ defineExpose({ toggleOpenState, open, close });
|
||||
content-class="p-0 pt-3"
|
||||
>
|
||||
<template #trigger>
|
||||
<slot :close="close" :icon="currentSelect" :open="open" name="trigger">
|
||||
<div class="flex items-center gap-2">
|
||||
<Input
|
||||
:value="currentSelect"
|
||||
class="flex-1 cursor-pointer"
|
||||
v-bind="$attrs"
|
||||
<component
|
||||
:is="inputComponent"
|
||||
:[modelValueProp]="currentSelect"
|
||||
:placeholder="$t('ui.iconPicker.placeholder')"
|
||||
/>
|
||||
<VbenIcon :icon="currentSelect || Grip" class="size-8" />
|
||||
</div>
|
||||
</slot>
|
||||
>
|
||||
<template #[iconSlot]>
|
||||
<VbenIcon :icon="currentSelect || Grip" class="size-4" />
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
<div class="mb-2 flex w-full">
|
||||
<Input
|
||||
v-model="keyword"
|
||||
:placeholder="$t('ui.iconPicker.search')"
|
||||
class="mx-2"
|
||||
/>
|
||||
<component :is="inputComponent" v-bind="searchInputProps" />
|
||||
</div>
|
||||
|
||||
<template v-if="paginationList.length > 0">
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onMounted,
|
||||
ref,
|
||||
type StyleValue,
|
||||
useTemplateRef,
|
||||
} from 'vue';
|
||||
import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
|
||||
|
||||
import { preferences } from '@vben-core/preferences';
|
||||
import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
|
||||
import { cn } from '@vben-core/shared/utils';
|
||||
|
||||
interface Props {
|
||||
@ -19,8 +12,6 @@ interface Props {
|
||||
* 根据content可见高度自适应
|
||||
*/
|
||||
autoContentHeight?: boolean;
|
||||
/** 头部固定 */
|
||||
fixedHeader?: boolean;
|
||||
headerClass?: string;
|
||||
footerClass?: string;
|
||||
}
|
||||
@ -29,13 +20,7 @@ defineOptions({
|
||||
name: 'Page',
|
||||
});
|
||||
|
||||
const {
|
||||
contentClass = '',
|
||||
description = '',
|
||||
autoContentHeight = false,
|
||||
title = '',
|
||||
fixedHeader = false,
|
||||
} = defineProps<Props>();
|
||||
const { autoContentHeight = false } = defineProps<Props>();
|
||||
|
||||
const headerHeight = ref(0);
|
||||
const footerHeight = ref(0);
|
||||
@ -44,22 +29,11 @@ const shouldAutoHeight = ref(false);
|
||||
const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
|
||||
const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
|
||||
|
||||
const headerStyle = computed<StyleValue>(() => {
|
||||
return fixedHeader
|
||||
? {
|
||||
position: 'sticky',
|
||||
zIndex: 200,
|
||||
top:
|
||||
preferences.header.mode === 'fixed' ? 'var(--vben-header-height)' : 0,
|
||||
}
|
||||
: undefined;
|
||||
});
|
||||
|
||||
const contentStyle = computed(() => {
|
||||
if (autoContentHeight) {
|
||||
return {
|
||||
height: shouldAutoHeight.value
|
||||
? `calc(var(--vben-content-height) - ${headerHeight.value}px - ${footerHeight.value}px)`
|
||||
? `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`
|
||||
: '0',
|
||||
// 'overflow-y': shouldAutoHeight.value?'auto':'unset',
|
||||
};
|
||||
@ -97,15 +71,12 @@ onMounted(() => {
|
||||
ref="headerRef"
|
||||
:class="
|
||||
cn(
|
||||
'bg-card relative px-6 py-4',
|
||||
'bg-card border-border relative flex items-end border-b px-6 py-4',
|
||||
headerClass,
|
||||
fixedHeader
|
||||
? 'border-border border-b transition-all duration-200'
|
||||
: '',
|
||||
)
|
||||
"
|
||||
:style="headerStyle"
|
||||
>
|
||||
<div class="flex-auto">
|
||||
<slot name="title">
|
||||
<div v-if="title" class="mb-2 flex text-lg font-semibold">
|
||||
{{ title }}
|
||||
@ -117,8 +88,9 @@ onMounted(() => {
|
||||
{{ description }}
|
||||
</p>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.extra" class="absolute bottom-4 right-4">
|
||||
<div v-if="$slots.extra">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,8 +104,8 @@ onMounted(() => {
|
||||
ref="footerRef"
|
||||
:class="
|
||||
cn(
|
||||
footerClass,
|
||||
'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
|
||||
footerClass,
|
||||
)
|
||||
"
|
||||
>
|
||||
|
||||
@ -103,7 +103,13 @@ async function initComponentAdapter() {
|
||||
return h(Button, { ...props, attrs, type: 'default' }, slots);
|
||||
},
|
||||
Divider,
|
||||
IconPicker: (props, { attrs, slots }) => {
|
||||
return h(
|
||||
IconPicker,
|
||||
{ iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
|
||||
slots,
|
||||
);
|
||||
},
|
||||
Input: withDefaultPlaceholder(Input, 'input'),
|
||||
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
|
||||
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { h, ref } from 'vue';
|
||||
|
||||
import { IconPicker, Page } from '@vben/common-ui';
|
||||
import {
|
||||
IconifyIcon,
|
||||
MdiGithub,
|
||||
MdiGoogle,
|
||||
MdiKeyboardEsc,
|
||||
@ -22,6 +21,8 @@ import {
|
||||
import { Card, Input } from 'ant-design-vue';
|
||||
|
||||
const iconValue = ref('ant-design:trademark-outlined');
|
||||
|
||||
const inputComponent = h(Input);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -84,23 +85,8 @@ const iconValue = ref('ant-design:trademark-outlined');
|
||||
<IconPicker class="w-[200px]" prefix="svg" />
|
||||
</div>
|
||||
<div class="mb-5 flex items-center gap-5">
|
||||
<span>完整替换触发组件:</span>
|
||||
<IconPicker class="w-[200px]">
|
||||
<template #trigger="{ icon }">
|
||||
<Input
|
||||
:value="icon"
|
||||
placeholder="点击这里选择图标"
|
||||
style="width: 300px"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<IconifyIcon
|
||||
:icon="icon || 'ant-design:appstore-filled'"
|
||||
class="text-2xl"
|
||||
/>
|
||||
</template>
|
||||
</Input>
|
||||
</template>
|
||||
</IconPicker>
|
||||
<span>使用Input:</span>
|
||||
<IconPicker :input-component="inputComponent" icon-slot="addonAfter" />
|
||||
</div>
|
||||
<div class="flex items-center gap-5">
|
||||
<span>可手动输入，只能点击图标打开弹窗:</span>
|
||||
@ -111,14 +97,7 @@ const iconValue = ref('ant-design:trademark-outlined');
|
||||
style="width: 300px"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<IconPicker v-model="iconValue" class="w-[200px]">
|
||||
<template #trigger="{ icon }">
|
||||
<IconifyIcon
|
||||
:icon="icon || 'ant-design:appstore-filled'"
|
||||
class="text-2xl"
|
||||
/>
|
||||
</template>
|
||||
</IconPicker>
|
||||
<IconPicker v-model="iconValue" class="w-[200px]" />
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
|
||||
@ -362,7 +362,6 @@ function handleSetFormValue() {
|
||||
<Page
|
||||
content-class="flex flex-col gap-4"
|
||||
description="表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。"
|
||||
fixed-header
|
||||
header-class="pb-0"
|
||||
title="表单组件"
|
||||
>
|
||||
|
||||
@ -77,7 +77,6 @@ function openFormModal() {
|
||||
<template>
|
||||
<Page
|
||||
description="弹窗组件常用于在不离开当前页面的情况下，显示额外的信息、表单或操作提示，更多api请查看组件文档。"
|
||||
fixed-header
|
||||
title="弹窗组件示例"
|
||||
>
|
||||
<template #extra>
|
||||
|
||||
@ -65,6 +65,8 @@ const formOptions: VbenFormProps = {
|
||||
],
|
||||
// 控制表单是否显示折叠按钮
|
||||
showCollapseButton: true,
|
||||
// 是否在字段值改变时提交表单
|
||||
submitOnChange: true,
|
||||
// 按下回车时是否提交表单
|
||||
submitOnEnter: false,
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user