Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev
						commit
						4d1bff9d4a
					
				|  | @ -114,8 +114,6 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) { | ||||||
| ```ts | ```ts | ||||||
| const dashboardMenus = [ | const dashboardMenus = [ | ||||||
|   { |   { | ||||||
|     // 这里固定写死 BasicLayout,不可更改 |  | ||||||
|     component: 'BasicLayout', |  | ||||||
|     meta: { |     meta: { | ||||||
|       order: -1, |       order: -1, | ||||||
|       title: 'page.dashboard.title', |       title: 'page.dashboard.title', | ||||||
|  | @ -144,6 +142,16 @@ const dashboardMenus = [ | ||||||
|       }, |       }, | ||||||
|     ], |     ], | ||||||
|   }, |   }, | ||||||
|  |   { | ||||||
|  |     name: 'Test', | ||||||
|  |     path: '/test', | ||||||
|  |     component: '/test/index', | ||||||
|  |     meta: { | ||||||
|  |       title: 'page.test', | ||||||
|  |       // 部分特殊页面如果不需要基础布局(页面顶部和侧边栏),可将noBasicLayout设置为true | ||||||
|  |       noBasicLayout: true, | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
| ]; | ]; | ||||||
| ``` | ``` | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -47,6 +47,10 @@ function onAlertClosed() { | ||||||
|   isConfirm.value = false; |   isConfirm.value = false; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | function onEscapeKeyDown() { | ||||||
|  |   isConfirm.value = false; | ||||||
|  | } | ||||||
|  | 
 | ||||||
| const getIconRender = computed(() => { | const getIconRender = computed(() => { | ||||||
|   let iconRender: Component | null = null; |   let iconRender: Component | null = null; | ||||||
|   if (props.icon) { |   if (props.icon) { | ||||||
|  | @ -116,13 +120,11 @@ function handleCancel() { | ||||||
| 
 | 
 | ||||||
| const loading = ref(false); | const loading = ref(false); | ||||||
| async function handleOpenChange(val: boolean) { | async function handleOpenChange(val: boolean) { | ||||||
|   const confirmState = isConfirm.value; |   await nextTick(); // 等待标记isConfirm状态 | ||||||
|   isConfirm.value = false; |  | ||||||
|   await nextTick(); |  | ||||||
|   if (!val && props.beforeClose) { |   if (!val && props.beforeClose) { | ||||||
|     loading.value = true; |     loading.value = true; | ||||||
|     try { |     try { | ||||||
|       const res = await props.beforeClose({ isConfirm: confirmState }); |       const res = await props.beforeClose({ isConfirm: isConfirm.value }); | ||||||
|       if (res !== false) { |       if (res !== false) { | ||||||
|         open.value = false; |         open.value = false; | ||||||
|       } |       } | ||||||
|  | @ -142,6 +144,7 @@ async function handleOpenChange(val: boolean) { | ||||||
|       :overlay-blur="overlayBlur" |       :overlay-blur="overlayBlur" | ||||||
|       @opened="emits('opened')" |       @opened="emits('opened')" | ||||||
|       @closed="onAlertClosed" |       @closed="onAlertClosed" | ||||||
|  |       @escape-key-down="onEscapeKeyDown" | ||||||
|       :class=" |       :class=" | ||||||
|         cn( |         cn( | ||||||
|           containerClass, |           containerClass, | ||||||
|  |  | ||||||
|  | @ -41,7 +41,6 @@ watch( | ||||||
|         innerValue.value.length > 0 ? innerValue.value[0] : undefined; |         innerValue.value.length > 0 ? innerValue.value[0] : undefined; | ||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   { immediate: true }, |  | ||||||
| ); | ); | ||||||
| 
 | 
 | ||||||
| watch( | watch( | ||||||
|  | @ -60,7 +59,7 @@ watch( | ||||||
|       innerValue.value = val === undefined ? [] : [val as ValueType]; |       innerValue.value = val === undefined ? [] : [val as ValueType]; | ||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   { deep: true }, |   { deep: true, immediate: true }, | ||||||
| ); | ); | ||||||
| 
 | 
 | ||||||
| async function onBtnClick(value: ValueType) { | async function onBtnClick(value: ValueType) { | ||||||
|  |  | ||||||
|  | @ -1,4 +1,6 @@ | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
|  | import { CircleX } from '@vben-core/icons'; | ||||||
|  | 
 | ||||||
| import { | import { | ||||||
|   Select, |   Select, | ||||||
|   SelectContent, |   SelectContent, | ||||||
|  | @ -8,17 +10,33 @@ import { | ||||||
| } from '../../ui'; | } from '../../ui'; | ||||||
| 
 | 
 | ||||||
| interface Props { | interface Props { | ||||||
|  |   allowClear?: boolean; | ||||||
|   class?: any; |   class?: any; | ||||||
|   options?: Array<{ label: string; value: string }>; |   options?: Array<{ label: string; value: string }>; | ||||||
|   placeholder?: string; |   placeholder?: string; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| const props = defineProps<Props>(); | const props = withDefaults(defineProps<Props>(), { | ||||||
|  |   allowClear: false, | ||||||
|  | }); | ||||||
|  | 
 | ||||||
|  | const modelValue = defineModel<string>(); | ||||||
|  | 
 | ||||||
|  | function handleClear() { | ||||||
|  |   modelValue.value = undefined; | ||||||
|  | } | ||||||
| </script> | </script> | ||||||
| <template> | <template> | ||||||
|   <Select> |   <Select v-model="modelValue"> | ||||||
|     <SelectTrigger :class="props.class"> |     <SelectTrigger :class="props.class" class="flex w-full items-center"> | ||||||
|       <SelectValue :placeholder="placeholder" /> |       <SelectValue class="flex-auto text-left" :placeholder="placeholder" /> | ||||||
|  |       <CircleX | ||||||
|  |         @pointerdown.stop | ||||||
|  |         @click.stop.prevent="handleClear" | ||||||
|  |         v-if="allowClear && modelValue" | ||||||
|  |         data-clear-button | ||||||
|  |         class="mr-1 size-4 cursor-pointer opacity-50 hover:opacity-100" | ||||||
|  |       /> | ||||||
|     </SelectTrigger> |     </SelectTrigger> | ||||||
|     <SelectContent> |     <SelectContent> | ||||||
|       <template v-for="item in options" :key="item.value"> |       <template v-for="item in options" :key="item.value"> | ||||||
|  |  | ||||||
|  | @ -148,7 +148,9 @@ const toolbarOptions = computed(() => { | ||||||
|     icon: 'vxe-icon-search', |     icon: 'vxe-icon-search', | ||||||
|     circle: true, |     circle: true, | ||||||
|     status: showSearchForm.value ? 'primary' : undefined, |     status: showSearchForm.value ? 'primary' : undefined, | ||||||
|     title: $t('common.search'), |     title: showSearchForm.value | ||||||
|  |       ? $t('common.hideSearchPanel') | ||||||
|  |       : $t('common.showSearchPanel'), | ||||||
|   }; |   }; | ||||||
|   // 将搜索按钮合并到用户配置的toolbarConfig.tools中 |   // 将搜索按钮合并到用户配置的toolbarConfig.tools中 | ||||||
|   const toolbarConfig: VxeGridPropTypes.ToolbarConfig = { |   const toolbarConfig: VxeGridPropTypes.ToolbarConfig = { | ||||||
|  |  | ||||||
|  | @ -18,5 +18,7 @@ | ||||||
|   "delete": "Delete", |   "delete": "Delete", | ||||||
|   "create": "Create", |   "create": "Create", | ||||||
|   "yes": "Yes", |   "yes": "Yes", | ||||||
|   "no": "No" |   "no": "No", | ||||||
|  |   "showSearchPanel": "Show search panel", | ||||||
|  |   "hideSearchPanel": "Hide search panel" | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -18,5 +18,7 @@ | ||||||
|   "delete": "删除", |   "delete": "删除", | ||||||
|   "create": "新增", |   "create": "新增", | ||||||
|   "yes": "是", |   "yes": "是", | ||||||
|   "no": "否" |   "no": "否", | ||||||
|  |   "showSearchPanel": "显示搜索面板", | ||||||
|  |   "hideSearchPanel": "隐藏搜索面板" | ||||||
| } | } | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 xingyu4j
						xingyu4j