使用Vue打造一个文件管理系统

文件管理是我们在有些项目中会碰到的,我们怎么去实现项目的分类和筛选呢?如何用vue去实现展示的效果呢?接下来我将为大家详细讲解一下,源码如下: html代码如下: 12345678…

文件管理是我们在有些项目中会碰到的,我们怎么去实现项目的分类和筛选呢?如何用vue去实现展示的效果呢?接下来我将为大家详细讲解一下,源码如下:

html代码如下:

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>

    <div class="container" id="app">
        <!--左侧边栏-->
        <div class="aside">
            <h1 class="header">
                <a href="javascript:;">{{appName}}</a>
            </h1>
            <ul class="menu-list">
                <li :class="{cur: showType=='all'}" @click="changeShowType('all')">
                    <a href="javascript:;">
                        <i class="icon icon-all"></i>
                        <span>全部</span>
                    </a>
                </li>
                <li :class="{cur: showType=='doc'}" @click="changeShowType('doc')">
                    <a href="javascript:;">
                        <i class="icon icon-doc"></i>
                        <span>文档</span>
                    </a>
                </li>
                <li :class="{cur: showType=='pic'}" @click="changeShowType('pic')">
                    <a href="javascript:;">
                        <i class="icon icon-pic"></i>
                        <span>图片</span>
                    </a>
                </li>
                <li :class="{cur: showType=='video'}" @click="changeShowType('video')">
                    <a href="javascript:;">
                        <i class="icon icon-video"></i>
                        <span>视频</span>
                    </a>
                </li>
                <li :class="{cur: showType=='music'}" @click="changeShowType('music')">
                    <a href="javascript:;">
                        <i class="icon icon-music"></i>
                        <span>音乐</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--右侧主区域内容-->
        <div class="main">

            <!--顶部工具栏-->
            <div class="toolbar">

                <div class="layout clearfix">

                    <div class="action-wrap action-wrap-upload">
                        <div class="action-item">
                            <i class="icon icon-upload-s"></i>
                            <span class="act-txt">上传</span>
                        </div>
                    </div>

                    <div class="action-wrap">
                        <div class="action-item">
                            <i class="icon icon-add"></i>
                            <span class="act-txt">新建</span>
                        </div>
                    </div>

                    <div class="action-wrap">
                        <div class="action-item">
                            <i class="icon icon-trash"></i>
                            <span class="act-txt">删除</span>
                        </div>
                    </div>

                </div>

            </div>

            <!--主体内容-->
            <div class="main-body">

                <div class="hd">

                    <div class="right clearfix">

                        <div class="action-wrap">
                            <div @click="changeShowMode('list')" class="action-item" :class="{act:showMode=='list'}">
                                <i class="icon icon-mod-list"></i>
                                <span class="act-txt">列表</span>
                            </div>
                        </div>

                        <div class="action-wrap">
                            <div @click="changeShowMode('thumb')" class="action-item" :class="{act:showMode=='thumb'}">
                                <i class="icon icon-mode-thumb"></i>
                                <span class="act-txt">缩略图</span>
                            </div>
                        </div>

                    </div>

                    <ul class="breadcrumb clearfix">
                        <li class="item all">
                            <a href="javascript:void(0)">全部 </a>
                        </li>
                        <li class="item all">
                            <i class="icon icon-bread-next"></i>
                            <a href="javascript:void(0)">资料</a>
                        </li>
                        <li class="item cur">
                            <i class="icon icon-bread-next"></i>
                            <a href="javascript:void(0)" title="视频">视频</a>
                        </li>
                    </ul>

                </div>

                <div class="list-wrap">


                    <!--列表头部-->
                    <div class="list-header clearfix">

                        <div class="col checkbox">
                            <!--icon-checkbox,icon-checkbox-hover,icon-checkbox-cur-->
                            <i class="icon icon-checkbox"></i>
                        </div>

                        <div class="col col-border name" style="display: block;">
                            <strong>名称</strong>
                        </div>

                        <div class="col col-border info" style="display: none;">
                            已选择 ?
                        </div>

                    </div>
                    <!--列表头部end-->

                    <!--正文,缩略图-->
                    <div v-if="showMode == 'thumb'" class="list-item-wrap list-item-wrap-thumb">

                        <ul class="list-item clearfix">
                            <li class="item" v-for="file of folderFiles">
                                <div class="inner">
                                    <i class="icon-wrapper">
                                        <i class="icon icon-file-l"></i>
                                    </i>
                                    <span title="a4" class="txt">{{file.name}}</span>
                                </div>
                                <i class="icon checkbox icon-checkbox"></i>
                            </li>
                        </ul>

                        <ul class="figure-item clearfix">
                            <li v-for="file of otherFiles" class="figure-list-item">
                                <div class="figure-list-item-inner">
                                    <i class="icon checkbox icon-checkbox"></i>
                                    <div class="figure-list-item-pic">
                                        <div class="img-wrapper">
                                            <i class="icon icon-l icon-zip-l"></i>
                                        </div>
                                    </div>
                                    <div class="figure-list-item-txt">
                                        <p class="tit">{{file.name}}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>

                    </div>

                    <!--列表模式-->
                    <div v-else class="list-item-wrap list-item-wrap-list clearfix">

                        <div class="row clearfix" v-for="file of folderFiles">
                            <div class="col checkbox-wrap">
                                <!--icon-checkbox,icon-checkbox-hover,icon-checkbox-cur-->
                                <i class="icon checkbox icon-checkbox-cur"></i>
                            </div>

                            <div class="col col-border name">{{file.name}}</div>
                        </div>

                        <div class="row clearfix" v-for="file of otherFiles">
                            <div class="col checkbox-wrap">
                                <!--icon-checkbox,icon-checkbox-hover,icon-checkbox-cur-->
                                <i class="icon checkbox icon-checkbox-cur"></i>
                            </div>

                            <div class="col col-border name">{{file.name}}</div>
                        </div>

                        <!--选中:cur-->
                        <!--<div class="row cur clearfix">-->
                            <!--<div class="col checkbox-wrap">-->
                                <!--&lt;!&ndash;icon-checkbox,icon-checkbox-hover,icon-checkbox-cur,icon-checkbox-cur2(反色)&ndash;&gt;-->
                                <!--<i class="icon checkbox icon-checkbox-cur2"></i>-->
                            <!--</div>-->

                            <!--<div class="col col-border name">修改时间</div>-->
                        <!--</div>-->

                    </div>

                </div>


            </div>

        </div>
    </div>

    <!--画框-->
    <div class="draw-selector"></div>

    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>

</body>
</html>

js代码如下:

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/*
* 初始化
*   配置对象
*
* 数据驱动视图
*   页面中的表现/功能 是通过数据的形式来反馈的
*
* el
*   指定vue处理的模板边界范围
*
* data配置项
*   存储应用中所需要用到的数据,他是一个对象
*
* MIME
*
* 模板
*
* {{表达式}}
*
* 指令
*   v-for
*
* computed
*   计算属性,产生派生数据,data存放原始数据,computed存放根据原始数据计算(派生)出来的数据
*
* v-if
* v-show
*
* v-on/@
* */


const app = new Vue({

    el: '#app',

    data: {
        appName: '国瑞云盘',
        // 显示模式:缩略图、列表
        showMode: 'thumb',
        // 显示的文件类型
        showType: 'all',
        // 类型与MIME的映射关系
        MIMEMAPS: {
            doc: ['text/html','text/css'],
            pic: ['image/png', 'image/gif'],
            music: ['audio/mp3'],
            video: ['video/mp4']
        },
        // 所有的文件夹、文件信息
        files: [
            // 每一个对象就是一个文件夹、文件信息
            {
                // 文件夹、文件的名称
                name: '文件夹1',
                // 类型,如果为空,则为文件夹
                type: ''
            },
            {
                name: '文件夹2',
                type: ''
            },
            {
                name: '1.html',
                type: 'text/html'
            },
            {
                name: '1.css',
                type: 'text/css'
            },
            {
                name: '朋友.mp3',
                type: 'audio/mp3'
            },
            {
                name: 'vue案例.mp4',
                type: 'video/mp4'
            }
        ]
    },
    // 计算属性,存放派生数据
    computed: {
        // 每一个计算属性都是一个函数,函数的返回值就是这个函数对应的属性的值,计算属性使用的时候,使用的是方法对应的属性
        folderFiles() {
            return this.showType == 'all' ? this.files.filter( file => file.type == '' ) : [];
        },
        otherFiles() {
            // console.log(this.MIMEMAPS[this.showType])
            let otherFiles = this.files.filter( file => file.type != '' );
            if (this.showType == 'all') {
                return otherFiles;
            } else {
                return otherFiles.filter(file => this.MIMEMAPS[this.showType].includes(file.type));
            }
        }
    },
    // methods,存放所有vue中使用的函数
    methods: {
        changeShowMode(type) {
            this.showMode = type;
        },
        changeShowType(type) {
            this.showType = type;
        }
    }

});

// console.log(app)

Vue文件管理系统效果猛戳此处:点击

下载请请猛戳此处:下载

作者: huanggr

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注