UI 框架-顶边栏

发表于 | 分类于

显然顶边栏比较好做，且首页和文档页都需要它，那让我们先做好顶边栏

初始化

首先，在 components 文件夹下，新建一个 vue 组件，就叫 Topnav.vue 吧，然后打板

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    
  </div>
</template>
<script lang="ts">
export default {
  
}
</script>
<style lang="scss" scoped>
  
</style>

建议使用 scss 书写所有 css，下略

以后所有 vue 组件，无特殊说明的话，均沿用此初始化模板，下略

页面结构

分析顶边栏的结构，显然，有以下成分

成分 位置 默认 小于 500px
首页跳转入口 左侧 可见 居中
文档页跳转入口 右侧 可见 不可见
展开菜单按键 左侧 不可见 可见

容易得到以下页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div class="topnav">
        <router-link to="/">
            首页
        </router-link>
        <router-link to="/document">
            文档页
        </router-link>
        <button>
            菜单
        </button>
    </div>
</template>

但是，未来有可能变更需求，在右侧出现不只一个文档页跳转入口，所以应该做一个列表，以备未来扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <div class="topnav">
        <router-link to="/" class="logo">
            首页
        </router-link>
        <ul class="menu">
            <li>
                <router-link to="/document">
                    文档页
                </router-link>
            </li>
        </ul>
        <button @click="toggleMenu">
            菜单
        </button>
    </div>
</template>

功能

先分析需要的控制元素

显然，顶边栏中的弹出菜单按键，可以在引入它的组件中，被设置是否可见，那么应当有一个 Boolean 类型的变量来控制可见

且需要提供一个方法，控制菜单本体是否可见

但是，现在又犯难了——菜单本体是属于文档页的，而不是属于顶边栏的。如何跨组件控制呢？

回顾需求分析可得，通过弹出菜单按键，以及视口宽度，共同控制菜单是否可见

其中，视口宽度显然是一个全局属性，那么理应在 App.vue 中控制

于是我们在 App.vue 中定义其是否可见，并通过 provide/inject API 暴露给子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// App.vue script
import { provide, ref } from "vue";
export default {
    name: "App",
    setup() {
        const width = ref(document.documentElement.clientWidth);
        const menuVisible = ref(width.value > 500 ? true : false);
        window.onresize = () => {
            width.value = document.documentElement.clientWidth;
            if (width.value > 500) {
                menuVisible.value = true;
            } else {
                menuVisible.value = false;
            }
        };

        provide("menuVisible", menuVisible);
    },
};

初始化时根据视口宽度决定顶边栏的弹出菜单按键是否可见，并监听视口大小变化，根据视口宽度自动更新控制变量

然后编写 Topnav.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Topnav.vue script
import { inject, Ref } from "vue";
export default {
    props: {
        toggleMenuButtonVisible: {
            type: Boolean,
            default: false,
        },
    },
    setup() {
        const menuVisible = inject<Ref<boolean>>("menuVisible");
        const toggleMenu = () => {
            menuVisible.value = !menuVisible.value;
        };
        return {
            toggleMenu,
        };
    },
};

注意，此处的 inject 需要注明变量的类型。因为 menuVisible 声明的时候是 ref(true|false)，所以其类型为 Ref<boolean>

将暴露出的变量引回模板，同时再贴个图美化一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div class="topnav">
        <router-link to="/" class="logo">
            <img src="../assets/logo.png" alt="首页" />
        </router-link>
        <ul class="menu">
            <li>
                <router-link to="/document">
                    <img src="../assets/document.png" alt="文档" />
                </router-link>
            </li>
        </ul>
        <button
                v-if="toggleMenuButtonVisible"
                class="toggleAside"
                @click="toggleMenu"
                >
            菜单
        </button>
    </div>
</template>

样式表

此处为了美观，选用线性渐变来做到下边一条分割线的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
$color: #fe9acf;
.topnav {
  color: $color;
  display: flex;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 97%,
    #ffb5dc 97%,
    #ffb5dc 100%
  );
  padding: 0 32px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  justify-content: space-between;
  align-items: center;
  > .logo {
    max-width: 6em;
    margin-right: auto;
    > svg {
      width: 80px;
      height: 80px;
    }
    > img {
      height: 80px;
    }
  }
  > .menu {
    display: flex;
    white-space: nowrap;
    flex-wrap: nowrap;
    > li {
      margin: 0 1em;
      > a {
        > svg {
          width: 32px;
          height: 32px;
        }
        > img {
          height: 80px;
        }
      }
    }
  }
  > .toggleAside {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    cursor: pointer;
  }
  @media (max-width: 500px) {
    > .menu {
      display: none;
    }
    > .logo {
      margin: 0 auto;
    }
    > .toggleAside {
      display: inline-block;
    }
  }
}
img {
  padding: 6px 0;
}

引入 App.vue 看看效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div class="app">
    <Topnav />
    <router-view />
  </div>
</template>

<script lang="ts">
import { provide, ref } from "vue";
import Topnav from "./components/Topnav.vue";
export default {
  name: "App",
  components: {
    Topnav,
  },
  setup() {
    const width = ref(document.documentElement.clientWidth);
    const menuVisible = ref(width.value > 500 ? true : false);
    window.onresize = () => {
      width.value = document.documentElement.clientWidth;
      if (width.value > 500) {
        menuVisible.value = true;
      } else {
        menuVisible.value = false;
      }
    };

    provide("menuVisible", menuVisible);
  },
};
</script>
<style lang="scss" scoped>
$max-width: 1200px;
.app {
  max-width: $max-width;
  margin-left: calc(50vw - 600px);
  position: relative;
  @media (max-width: $max-width) {
    margin-left: 0;
  }
}
</style>

效果图

效果图

感谢阅读

--It's the end.Thanks for your read.--