lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加下拉菜单

Browse Source
This commit is contained in:
jmal 2020-02-19 23:01:16 +08:00
parent 5e4a8469d1
commit b2569db9a5
3 changed files with 109 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main.js
View File

@ -14,7 +14,7 @@ import store from './store'
import router from './router'
// import WeVue from 'we-vue'
// import 'we-vue/lib/style.css'
import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem} from 'vant';
import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet} from 'vant';
import '@/icons' // icon
import '@/permission' // permission control
@ -58,6 +58,7 @@ Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(ActionSheet);
Vue.use(uploader)
Vue.use(EVueContextmenu)
@ -74,7 +75,7 @@ new Vue({
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
Vue.prototype.$pc = false
} else {
Vue.prototype.$pc = false
Vue.prototype.$pc = true
let winWidth = document.documentElement.offsetWidth ||
document.body.offsetWidth
winWidth = winWidth < 1366 ? 1366 : winWidth

213
src/views/demo/index_m.vue
View File

@ -1,160 +1,65 @@
<template>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getFileList"
>
<van-row class="classification">
<van-col span="6" align="center">
<svg-icon icon-class="image" />
<div>图片</div>
</van-col>
<van-col span="6" align="center">
<svg-icon icon-class="document" />
<div>文档</div>
</van-col>
<van-col span="6" align="center">
<svg-icon icon-class="video" />
<div>视屏</div>
</van-col>
<van-col span="6" align="center">
<svg-icon icon-class="audio" />
<div>音乐</div>
</van-col>
</van-row>
<!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name"></van-cell>-->
<!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name" :label="item.updateDate"></van-cell>-->
<van-swipe-cell v-for="(item,index) in fileList" :key="item.id" :title="item.name">
<van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>
<van-row>
<van-col span="4" align="center">
<svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
<svg-icon v-if="item.isFolder" icon-class="folder" />
<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
<svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
<el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
<svg-icon v-else icon-class="file" />
</van-col>
<van-col span="16">
<van-col span="16">
{{item.name}}
</van-col>
<van-col span="16" class="file-description" justify="space-between">
<van-col span="8">
{{formatTime(item.agoTime)}}
</van-col>
<van-col span="8">
{{formatSize(item.size)}}
</van-col>
</van-col>
</van-col>
<van-col span="4"></van-col>
</van-row>
<van-button
slot="right"
square
text="删除"
type="danger"
class="delete-button">
</van-button>
<van-divider></van-divider>
</van-swipe-cell>
</van-list>
</van-pull-refresh>
<!-- 背景图高斯模糊效果 -->
<div class="bgFilter">
<div class="box">
<img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img" class="bg">
<div class="content">
<!-- <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img"> -->
<div class="text">我是文字我是文字我是文字</div>
</div>
</div>
</div>
</template>
<script>
import 'vant/lib/button/style';
import 'vant/lib/cell/style';
import 'vant/lib/cell-group/style'
import 'vant/lib/image/style';
import 'vant/lib/list/style';
import 'vant/lib/pull-refresh/style';
import 'vant/lib/swipe-cell/style';
import 'vant/lib/col/style';
import 'vant/lib/row/style';
import 'vant/lib/divider/style';
import { getPath, getPathList, setPath, removePath } from '@/utils/path'
import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
import api from '@/api/upload-api'
export default {
data() {
return {
fileList: [],
loading: false,
finished: false,
refreshing: false
};
},
methods: {
formatTime(time) {
return formatTime(time)
},
formatSize(size) {
return formatSize(size)
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.getFileList();
},
getFileList() {
this.loading = true
api.fileList({
userId: this.$store.state.user.userId,
currentDirectory: getPath(),
pageIndex: 1,
pageSize: 30
}).then(res => {
this.fileList = res.data
// 加载状态结束
this.loading = true;
this.refreshing = false;
// 数据全部加载完成
if (this.fileList.length >= res.count) {
this.finished = true;
}
}).catch(e => {})
},
}
}
name: "bgFilter"
};
</script>
<style lang="scss" scoped>
.svg-icon {
width: 2.5em;
height: 2.5em;
}
.van-divider {
margin: 5px 15px 5px 15px;
}
.file-description {
color: #646566;
font-size: 12px;
margin-top: 0.6rem;
}
.van-col {
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.classification {
padding: 1rem 0 1rem 0;
}
</style>
.bgFilter {
width: 100%;
height: 100%;
background-color: #000;
.box {
width: 700px;
height: 500px;
position: relative;
// 我是模糊的背景
.bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
}
// 我是图片和上面的文字
.content {
.text {
width: 100%;
padding: 30px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
text-align: right;
}
img {
position: absolute;
top: 50%;
left: 5%;
transform: translate(0, -50%);
z-index: 2;
}
}
}
}
</style>

51
src/views/home/mobile/index.vue
View File

@ -38,7 +38,7 @@
<!--</van-nav-bar>-->
<van-sticky :offset-top="0">
<div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div>
<!-- <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div> -->
<van-nav-bar
v-if="pathList.length < 3"
title="浏览"
@ -148,6 +148,13 @@
</van-tabbar>
</div>
<van-action-sheet
v-model="actionSheetShow"
:actions="actions"
cancel-text="取消"
@cancel="onCancel"
/>
</div>
</template>
<script>
@ -178,6 +185,7 @@
lastTabbarOffsetTop: 0,// 底部tabbar与上边框 上次的距离
diffTabbarTop: 0,// 底部tabbar与上边框的变化距离
isiPhoneX: 0,
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
tabActive: 0,
path: this.$route.query.path,
fileList: [],
@ -192,7 +200,13 @@
},
loading: false,
finished: false,
refreshing: false
refreshing: false,
actionSheetShow: false, // 下拉菜单
actions: [
{ name: '上传文件' },
{ name: '上传文件夹' },
{ name: '新建文件夹' }
],
};
},
mounted(){
@ -282,6 +296,7 @@
},
// 点击右边按钮(标题)
titleRightClick() {
this.actionSheetShow = true
console.log('titleRightClick')
},
handleLink(item, index, isPushLink) {
@ -441,6 +456,9 @@
window.open(url, '_blank')
}
},
onCancel() {
this.actionSheetShow = false;
},
swipeUp() {
this.test = 10
console.log(67)
@ -507,6 +525,10 @@
text-overflow:ellipsis;
}
.van-list {
margin-bottom: 75px
}
.list-item {
padding: 5px 10px;
@ -523,13 +545,34 @@
background-color: #bfcbd930;
}
.van-nav-bar {
background: #ffffffcc;
position: relative;
box-shadow: 4px 0px 2px rgba(0,0,0,0.5);
}
.van-nav-bar::after{
background: inherit;
-webkit-filter: blur(15px);
filter: blur(20px);
}
.van-nav-bar__title {
max-width: 30%;
width: 30%;
position: absolute;
margin-left: 35%;
z-index: 11;
}
.van-nav-bar__left {
max-width: 30%;
// max-width: 30%;
z-index: 11;
}
.van-nav-bar__left:active {
background-color: hsl(0, 94%, 47%);
}
.van-nav-bar__right {
z-index: 11;
}
/*.van-nav-bar__left {*/
/*left: 0;*/
/*}*/