Skip to content

Commit

Permalink
优化菜单的交互效果
Browse files Browse the repository at this point in the history
  • Loading branch information
baishun committed Aug 18, 2023
1 parent 8f88a97 commit b74f492
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 20 deletions.
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@

## 日志

### 2023 年 04 月 25 日
### 2023年04月25日

更新到 `0.51.8` ,新增了 `uno.config.ts` 文件,发现使用 `eslint` 进行自动 `fix` 时,会出现大量的空行,故引入 `prettier` ,双重处理,然而 `prettier` 的最终效果我并不喜欢,因此又操作了一次 `lint:fix` 。(当然务必注意 eslint 配置和 prettier 不要冲突!!!)

### 2023年08月18日

解决了左侧菜单,点击后,高亮下样式与`group-hover` 一致。你可以看到本项目的左侧菜单来进行演示。也可看这个[UnoCSS Demo - actived](https://codesandbox.io/p/sandbox/unocss-demo-actived-xvst5l)
2 changes: 1 addition & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ onMounted(() => {
href="https://unocss.dev/"
font-bold
decoration-none
rainbow-text>【UnoCSS】</a>技术分享代码演示和说明
rainbow-text>【UnoCSS】</a>入门技术分享,专注实践与应用
</div>
</div>
<!-- <div>{{ prefersDark }}</div> -->
Expand Down
17 changes: 10 additions & 7 deletions src/components/VMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,15 @@
<el-menu-item
v-for="item in menu"
:key="item.name"
class="group flex items-center text-sm decoration-none space-x-2"
class="group flex items-center text-sm decoration-none space-x-2 [&.is-active_i]:text-[--rb-brand] [&.is-active_span]:text-[--rb-brand] [&.is-active]:text-[--rb-brand]"
:class="item.isActiveIcon"
:index="item.name"
:route="item">
<i
class="text-dark dark:text-white hover:text-cyan"
:class="`${item.icon} ${item.hoverIcon}`"></i><span text-dark dark:text-white>{{ item.topic }}</span>
class="text-dark dark:text-white group-hover:text-[--rb-brand]"
:class="`${item.icon} ${item.groupHoverIcon}`"></i><span class="text-dark dark:text-white group-hover:text-[--rb-brand]">{{
item.topic
}}</span>
</el-menu-item>
</el-menu>
</template>
Expand All @@ -25,7 +28,8 @@ interface MenuItem {
name: string;
path: string;
icon: string;
hoverIcon: string;
groupHoverIcon: string;
isActiveIcon: string;
topic: string;
menuShow: false;
}
Expand Down Expand Up @@ -66,13 +70,12 @@ const handleSelect = (index: string) => {
}
router.push(`/${index}`);
};
</script>

<style scoped>
.is-active,
/* .is-active,
.is-active span,
.is-active i {
color: var(--rb-brand);
}
} */
</style>
23 changes: 12 additions & 11 deletions src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,19 @@ import Thinkings from "@/views/TheThinkings.vue";
// 因此路由这里的icon可以直接写全名了,但是我这个项目用了个小技巧,就是hover的时候会改变icon
// 因此,这里的hoverIcon也随之改变了 `group-hover:i-carbon-notebook-reference` 这样的代码
// 务必记住,这个不能在Vue中拼接成 “:class="item.icon + ' group-hover:' + item.hoverIcon"></i>”
// 所以这里使用的groupHoverIcon和isActiveIcon都是为了构建而提前写的。
const routes = [
{ path: "/", redirect: "/Intro", meta: { icon: "i-carbon-book", hoverIcon: "group-hover:i-carbon-face-satisfied", topic: "前言", menuShow: false } },
{ path: "/Intro", name: "Intro", component: Intro, meta: { icon: "i-carbon-book", hoverIcon: "group-hover:i-carbon-notebook-reference", topic: "前言", menuShow: true } },
{ path: "/Customizable", name: "Customizable", component: Customizable, meta: { icon: "i-carbon-ibm-toolchain", hoverIcon: "group-hover:i-carbon-ibm-toolchain", topic: "高可定制", menuShow: true } },
{ path: "/Shortcuts", name: "Shortcuts", component: Shortcuts, meta: { icon: "i-carbon-asset", hoverIcon: "group-hover:i-carbon-asset", topic: "简写模式", menuShow: true } },
{ path: "/Attributify", name: "Attributify", component: Attributify, meta: { icon: "i-carbon-code", hoverIcon: "group-hover:i-carbon-code", topic: "属性化模式", menuShow: true } },
{ path: "/CSSIcon", name: "CSSIcon", component: CSSIcon, meta: { icon: "i-carbon-face-wink", hoverIcon: "group-hover:i-carbon-face-satisfied", topic: "纯CSS图标", menuShow: true } },
{ path: "/VariantGroups", name: "VariantGroups", component: VariantGroups, meta: { icon: "i-carbon-group-objects", hoverIcon: "group-hover:i-carbon-group-objects", topic: "组合缩写", menuShow: true } },
{ path: "/CSSDirectives", name: "CSSDirectives", component: CSSDirectives, meta: { icon: "i-carbon-at", hoverIcon: "group-hover:i-carbon-at", topic: "CSS指令", menuShow: true } },
{ path: "/Compilation", name: "Compilation", component: Compilation, meta: { icon: "i-carbon-tree-view-alt", hoverIcon: "group-hover:i-carbon-tree-view-alt", topic: "编译模式", menuShow: true } },
{ path: "/Inspector", name: "Inspector", component: Inspector, meta: { icon: "i-carbon-inspection", hoverIcon: "group-hover:i-carbon-inspection", topic: "调试模式", menuShow: true } },
{ path: "/Thinkings", name: "Thinkings", component: Thinkings, meta: { icon: "i-carbon-face-dizzy-filled", hoverIcon: "group-hover:i-carbon-user-favorite", topic: "个人思考", menuShow: true } },
{ path: "/", redirect: "/Intro", meta: { icon: "i-carbon-book", hoverIcon: "i-carbon-face-satisfied", groupHoverIcon: "group-hover:i-carbon-face-satisfied", isActiveIcon: "[&.is-active_i]:i-carbon-face-satisfied", topic: "前言", menuShow: false } },
{ path: "/Intro", name: "Intro", component: Intro, meta: { icon: "i-carbon-book", hoverIcon: "i-carbon-notebook-reference", groupHoverIcon: "group-hover:i-carbon-notebook-reference", isActiveIcon: "[&.is-active_i]:i-carbon-notebook-reference", topic: "前言", menuShow: true } },
{ path: "/Customizable", name: "Customizable", component: Customizable, meta: { icon: "i-carbon-ibm-toolchain", hoverIcon: "i-carbon-ibm-toolchain", groupHoverIcon: "group-hover:i-carbon-ibm-toolchain", isActiveIcon: "[&.is-active_i]:i-carbon-ibm-toolchain", topic: "高可定制", menuShow: true } },
{ path: "/Shortcuts", name: "Shortcuts", component: Shortcuts, meta: { icon: "i-carbon-asset", hoverIcon: "i-carbon-asset", groupHoverIcon: "group-hover:i-carbon-asset", isActiveIcon: "[&.is-active_i]:i-carbon-asset", topic: "简写模式", menuShow: true } },
{ path: "/Attributify", name: "Attributify", component: Attributify, meta: { icon: "i-carbon-code", hoverIcon: "i-carbon-code", groupHoverIcon: "group-hover:i-carbon-code", isActiveIcon: "[&.is-active_i]:i-carbon-code", topic: "属性化模式", menuShow: true } },
{ path: "/CSSIcon", name: "CSSIcon", component: CSSIcon, meta: { icon: "i-carbon-face-wink", hoverIcon: "i-carbon-face-satisfied", groupHoverIcon: "group-hover:i-carbon-face-satisfied", isActiveIcon: "[&.is-active_i]:i-carbon-face-satisfied", topic: "纯CSS图标", menuShow: true } },
{ path: "/VariantGroups", name: "VariantGroups", component: VariantGroups, meta: { icon: "i-carbon-group-objects", hoverIcon: "i-carbon-group-objects", groupHoverIcon: "group-hover:i-carbon-group-objects", isActiveIcon: "[&.is-active_i]:i-carbon-group-objects", topic: "组合缩写", menuShow: true } },
{ path: "/CSSDirectives", name: "CSSDirectives", component: CSSDirectives, meta: { icon: "i-carbon-at", hoverIcon: "i-carbon-at", groupHoverIcon: "group-hover:i-carbon-at", isActiveIcon: "[&.is-active_i]:i-carbon-at", topic: "CSS指令", menuShow: true } },
{ path: "/Compilation", name: "Compilation", component: Compilation, meta: { icon: "i-carbon-tree-view-alt", hoverIcon: "i-carbon-tree-view-alt", groupHoverIcon: "group-hover:i-carbon-tree-view-alt", isActiveIcon: "[&.is-active_i]:i-carbon-tree-view-alt", topic: "编译模式", menuShow: true } },
{ path: "/Inspector", name: "Inspector", component: Inspector, meta: { icon: "i-carbon-inspection", hoverIcon: "i-carbon-inspection", groupHoverIcon: "group-hover:i-carbon-inspection", isActiveIcon: "[&.is-active_i]:i-carbon-inspection", topic: "调试模式", menuShow: true } },
{ path: "/Thinkings", name: "Thinkings", component: Thinkings, meta: { icon: "i-carbon-face-dizzy-filled", hoverIcon: "i-carbon-user-favorite", groupHoverIcon: "group-hover:i-carbon-user-favorite", isActiveIcon: "[&.is-active_i]:i-carbon-user-favorite", topic: "个人思考", menuShow: true } },
];

export const router = createRouter({
Expand Down

0 comments on commit b74f492

Please sign in to comment.