vue3-admin商品管理后台项目(图库模块开发)

今天我们继续来进行图库模块的开发工作
首先是布局实现：
使用element提供的container布局容器

利用布局将其分为左右两块，一块是侧边栏，一块是主体部分，然后书写它的样式

<template>
    <el-container class="bg-white rounded" :style="{ height: (h + 'px') }">
      <el-header class="image-header">Header</el-header>
      <el-container>
        <el-aside width="220px" class="image-aside">
            <div class="top">
                <div v-for="i in 100" :key="i">{
   {
    i }}</div>
            </div>
            <div class="bottom">
                分页区域
            </div>
        </el-aside>
        <el-main class="image-main">
            <div class="top">
                <div v-for="i in 100" :key="i">{
   {
    i }}</div>
            </div>
            <div class="bottom">
                分页区域
            </div>
        </el-main>
      </el-container>
    </el-container>
</template>

<script setup>
// 拿到浏览器高度
const windowHeight = window.innerHeight || document.body.clientHeight;
// 减去header高度+导肮栏高度+padding
const h = windowHeight - 64 - 44 -40;
</script>

<style>
.image-header{
   
    border-bottom: 1px solid #eeeeee;
    @apply flex items-center;
}

.image-aside{
   
    border-right: 1px solid #eeeeee;
    position: relative;
}

.image-main{
   
    position: relative;
}

.image-aside .top, .image-main .top{
   
    /* 相对aside定义,撑满左右两边和上下 */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    /* y轴方向上默认 */
    overflow-y: auto;
}

.image-aside .bottom, .image-main .bottom{
   
    position: absolute;
    bottom: 0;
    height: 50px;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
}
</style>
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
73
74
75

另外，在App.vue里面对其滚动条进行样式优化：

然后目前的效果就是：

因为后面很多部分要用到相同的侧边栏和主体部分，所以我们对这两块进行抽离：
在components文件夹下面创建ImageAside.vue和ImageMain.vue
然后抽离：
ImageAside.vue

<template>
    <el-aside width="220px" class="image-aside">
        <div class="top">
            <div v-for="i in 100" :key="i">{
   {
    i }}</div>
        </div>
        <div class="bottom">
            分页区域
        </div>
    </el-aside>
</template>

<style>
.image-aside{
   
    border-right: 1px solid #eeeeee;
    position: relative;
}

.image-aside .top{
   
    /* 相对aside定义,撑满左右两边和上下 */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    /* y轴方向上默认 */
    overflow-y: auto;
}

.image-aside .bottom{
   
    position: absolute;
    bottom: 0;
    height: 50px;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
}
</style>
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

ImageMain.vue

<template>
    <el-main class="image-main">
        <div class="top">
            <div v-for="i in 100" :key="i">{
   {
    i }}</div>
        </div>
        <div class="bottom">
            分页区域
        </div>
    </el-main>
</template>

<style>
.image-main{
   
    position: relative;
}
.image-main .top{
   
    /* 相对aside定义,撑满左右两边和上下 */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    /* y轴方向上默认 */
    overflow-y: auto;
}

.image-main .bottom{
   
    position: absolute;
    bottom: 0;
    height: 50px;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
}
</style>
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

此时的list.vue

<template>
    <el-container class="bg-white rounded" :style="{ height: (h + 'px') }">
      <el-header class="image-header">Header</el-header>
      <el-container>
        <!-- <el-aside width="220px" class="image-aside">
            <div class="top">
                <div v-for="i in 100" :key="i">{
   {
    i }}</div>
            </div>
            <div class="bottom">
                分页区域
            </div>
        </el-aside> -->
        <ImageAside />
        <!-- <el-main class="image-main">
            <div class="top">
                <div v-for="i in 100" :key="i">{
   {
    i }}</div>
            </div>
            <div class="bottom">
                分页区域
            </div>
        </el-main> -->
        <ImageMain />
      </el-container>
    </el-container>
</template>

<script setup>
// 引入公共侧边栏 
import ImageAside from "~/components/ImageAside.vue"
// 引入公共主体部分
import ImageMain from "~/components/ImageMain.vue"
// 拿到浏览器高度
const windowHeight = window.innerHeight || document.body.clientHeight;
// 减去header高度+导肮栏高度+padding
const h = windowHeight - 64 - 44 -40;
</script>

<style>
.image-header{
   
    border-bottom: 1px solid #eeeeee;
    @apply flex items-center;
}
</style>
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

抽离完成

然后我们进行图库分类组件开发：
除去之前的1-100，然后加上需要的按钮图标
此时的ImageAside.vue

<template>
    <el-aside width="220px" class="image-aside">
        <div class="top">

            <AsideList>
                分类标题
            </AsideList>

            <!-- 激活状态 -->
            <AsideList active>
                分类标题
            </AsideList>

        </div>
        <div class="bottom">
            分页区域
        </div>
    </el-aside>
</template>
<!-- 公共侧边栏部分抽离 -->

<script setup>
import AsideList from './AsideList.vue';
</script>

<style>
.image-aside{
   
    border-right: 1px solid #eeeeee;
    position
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