|
|
@@ -1,20 +1,10 @@
|
|
|
<template>
|
|
|
- <Dropdown trigger="click">
|
|
|
- <template #overlay>
|
|
|
- <Menu @click="handleMenuClick">
|
|
|
- <MenuItem v-for="(title, key) in OPTIONS" :key="key">{{ title }}</MenuItem>
|
|
|
- </Menu>
|
|
|
- </template>
|
|
|
- <Button :class="prefixCls" type="primary">
|
|
|
- {{ text }}
|
|
|
- <DownOutlined />
|
|
|
- </Button>
|
|
|
- </Dropdown>
|
|
|
+ <a-select :class="prefixCls" v-model:value="text" :options="OPTIONS" @change="handleMenuClick"> </a-select>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
|
|
|
- import { DownOutlined } from '@ant-design/icons-vue';
|
|
|
+ // import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
|
|
|
+ // import { DownOutlined } from '@ant-design/icons-vue';
|
|
|
import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
import { onMounted, ref } from 'vue';
|
|
|
import { PageEnum } from '/@/enums/pageEnum';
|
|
|
@@ -26,19 +16,29 @@
|
|
|
const { t } = useI18n();
|
|
|
const text = ref('');
|
|
|
|
|
|
- function handleMenuClick({ key }) {
|
|
|
- text.value = OPTIONS.value[key];
|
|
|
- router.push({ path: key });
|
|
|
+ function handleMenuClick(value) {
|
|
|
+ router.push({ path: value });
|
|
|
}
|
|
|
|
|
|
- const OPTIONS = ref({
|
|
|
- [PageEnum.BASE_HOME]: t('routes.basic.baseHome'),
|
|
|
- [PageEnum.SECONDARY_HOME]: t('routes.basic.secondaryHome'),
|
|
|
- });
|
|
|
+ // const OPTIONS = ref({
|
|
|
+ // [PageEnum.BASE_HOME]: t('routes.basic.baseHome'),
|
|
|
+ // [PageEnum.SECONDARY_HOME]: t('routes.basic.secondaryHome'),
|
|
|
+ // });
|
|
|
+ const OPTIONS = ref([
|
|
|
+ {
|
|
|
+ value: PageEnum.BASE_HOME,
|
|
|
+ label: t('routes.basic.baseHome'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: PageEnum.SECONDARY_HOME,
|
|
|
+ label: t('routes.basic.secondaryHome'),
|
|
|
+ },
|
|
|
+ ]);
|
|
|
|
|
|
onMounted(() => {
|
|
|
// 由于BASE_HOME仅代表了一个页面,其他页面都隶属于SECONDARY_HOME,所以简单处理
|
|
|
- text.value = OPTIONS.value[router.currentRoute.value.path] || t('routes.basic.secondaryHome');
|
|
|
+ const isBaseHome = router.currentRoute.value.path === PageEnum.BASE_HOME;
|
|
|
+ text.value = isBaseHome ? t('routes.basic.baseHome') : t('routes.basic.secondaryHome');
|
|
|
});
|
|
|
|
|
|
defineExpose({ OPTIONS, prefixCls, handleMenuClick });
|
|
|
@@ -52,13 +52,17 @@
|
|
|
width: 210px;
|
|
|
position: relative;
|
|
|
z-index: @layout-basic-z-index;
|
|
|
+ }
|
|
|
|
|
|
- // :deep(.ant-select-selector) {
|
|
|
- // background-color: @primary-color;
|
|
|
- // }
|
|
|
-
|
|
|
- // :deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-item) {
|
|
|
- // color: @white;
|
|
|
- // }
|
|
|
+ .@{prefix-cls}.ant-select {
|
|
|
+ :deep(.ant-select-selector) {
|
|
|
+ background-color: @primary-color;
|
|
|
+ .ant-select-selection-item {
|
|
|
+ color: @white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.ant-select-arrow) {
|
|
|
+ color: @white;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|