国瑞个人博客
首页 > Vue > 使用Vue打造一个文件管理系统

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

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

 2017年07月18日 作者: 国瑞个人博客 1117次浏览

文件管理是我们在有些项目中会碰到的,我们怎么去实现项目的分类和筛选呢?如何用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文件管理系统效果猛戳此处:点击

下载请请猛戳此处:下载

百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《使用Vue打造一个文件管理系统》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/163.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 47 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
47

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 222 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 807 天
  • 注册用户: 659 人
  • 访问总量: 8784708 次
  • 最近更新: 2019年7月15日
-->