重构文件展示list视图
This commit is contained in:
jmal
parent
78f1dfb840
commit
33dbee0844
@ -24,6 +24,7 @@
|
||||
"e-vue-contextmenu": "^0.1.3",
|
||||
"element-ui": "2.13.0",
|
||||
"exif-js": "^2.3.0",
|
||||
"gsap": "^3.2.6",
|
||||
"highlightjs-line-numbers.js": "^2.7.0",
|
||||
"jquery": "^1.12.4",
|
||||
"js-cookie": "2.2.0",
|
||||
|
||||
13
src/assets/js/Physics2DPlugin.js
Normal file
13
src/assets/js/Physics2DPlugin.js
Normal file
File diff suppressed because one or more lines are too long
@ -5,14 +5,14 @@
|
||||
<a v-if="pathList.length >= 7">
|
||||
<span v-if="index === pathList.length-6" class="redirect" > </span>
|
||||
<a v-if="index === pathList.length-6" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="pathList.length < 7">
|
||||
<a v-if="index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
<a v-if="index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="index===pathList.length-2">
|
||||
<a v-if="index===pathList.length-1">
|
||||
<span v-if="strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 10 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
@ -24,14 +24,14 @@
|
||||
<a v-if="pathList.length >= 7">
|
||||
<span v-if="index === pathList.length-6" class="redirect" > </span>
|
||||
<a v-if="index === pathList.length-6" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
<a v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="pathList.length < 7">
|
||||
<a v-if="index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
<a v-if="index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
|
||||
<span v-if="index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
|
||||
</a>
|
||||
<a v-if="index===pathList.length-2">
|
||||
<a v-if="index===pathList.length-1">
|
||||
<span v-if="strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 10 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span>
|
||||
<span v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
217
src/components/button/ButtonUpload.vue
Normal file
217
src/components/button/ButtonUpload.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<button class="button">
|
||||
<div class="icon">
|
||||
<div class="arrow"></div>
|
||||
<svg class="line" viewBox="0 0 24 24"></svg>
|
||||
</div>
|
||||
{{name}}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import gsap from 'gsap'
|
||||
export default {
|
||||
name: 'ButtonUpload',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: '上传'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
interval: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
const $ = (s, o = document) => o.querySelector(s);
|
||||
const $$ = (s, o = document) => o.querySelectorAll(s);
|
||||
|
||||
$$('.button').forEach(button => {
|
||||
let icon = $('.icon', button),
|
||||
line = $('.line', icon),
|
||||
svgPath = new Proxy({
|
||||
y: null
|
||||
}, {
|
||||
set(target, key, value) {
|
||||
target[key] = value;
|
||||
if(target.y !== null) {
|
||||
line.innerHTML = getPath(target.y, .25, null);
|
||||
}
|
||||
return true;
|
||||
},
|
||||
get(target, key) {
|
||||
return target[key];
|
||||
}
|
||||
}),
|
||||
timeline = gsap.timeline({
|
||||
paused: true
|
||||
});
|
||||
|
||||
svgPath.y = 12;
|
||||
|
||||
timeline.to(icon, {
|
||||
'--arrow-y': 6,
|
||||
'--arrow-rotate': 70,
|
||||
ease: "elastic.in(1.1, .8)",
|
||||
duration: .7
|
||||
}).to(icon, {
|
||||
'--arrow-y': 0,
|
||||
'--arrow-rotate': 45,
|
||||
ease: "elastic.out(1.1, .8)",
|
||||
duration: .7
|
||||
});
|
||||
|
||||
timeline.to(svgPath, {
|
||||
y: 15,
|
||||
duration: .15
|
||||
}, .65).to(svgPath, {
|
||||
y: 12,
|
||||
ease: "elastic.out(1.2, .7)",
|
||||
duration: .6
|
||||
}, .8);
|
||||
this.interval = setInterval(() => timeline.restart(), 1500);
|
||||
});
|
||||
|
||||
function getPoint(point, i, a, smoothing) {
|
||||
let cp = (current, previous, next, reverse) => {
|
||||
let p = previous || current,
|
||||
n = next || current,
|
||||
o = {
|
||||
length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
|
||||
angle: Math.atan2(n[1] - p[1], n[0] - p[0])
|
||||
},
|
||||
angle = o.angle + (reverse ? Math.PI : 0),
|
||||
length = o.length * smoothing;
|
||||
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
|
||||
},
|
||||
cps = cp(a[i - 1], a[i - 2], point, false),
|
||||
cpe = cp(point, a[i - 1], a[i + 1], true);
|
||||
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
|
||||
}
|
||||
|
||||
function getPath(update, smoothing, pointsNew) {
|
||||
let points = pointsNew ? pointsNew : [
|
||||
[5, 12],
|
||||
[12, update],
|
||||
[19, 12]
|
||||
],
|
||||
d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
|
||||
return `<path d="${d}" />`;
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed')
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.button {
|
||||
--background: #409EFF;
|
||||
--background-hover: #6bcbff;
|
||||
--text: #fff;
|
||||
--icon: #fff;
|
||||
display: flex;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 8px 20px 8px 20px;
|
||||
border-radius: 9px;
|
||||
line-height: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
background: var(--b, var(--background));
|
||||
transition: transform .3s, background .4s;
|
||||
transform: scale(var(--scale, 1)) translateZ(0);
|
||||
&:active {
|
||||
--scale: .95;
|
||||
}
|
||||
&:hover {
|
||||
--b: var(--background-hover);
|
||||
}
|
||||
.icon {
|
||||
--arrow-y: 0;
|
||||
--arrow-rotate: 45;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
pointer-events: none;
|
||||
.arrow,
|
||||
.line {
|
||||
position: absolute;
|
||||
}
|
||||
.arrow {
|
||||
left: 11px;
|
||||
top: 4px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
border-radius: 1px;
|
||||
background: var(--icon);
|
||||
transform: translateY(calc(var(--arrow-y) * 1px)) translateZ(0);
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 1px;
|
||||
background: inherit;
|
||||
transform-origin: 1px 1px;
|
||||
transform: rotate(var(--r, calc(var(--arrow-rotate) * -1deg)));
|
||||
}
|
||||
&:after {
|
||||
--r: calc(var(--arrow-rotate) * 1deg);
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
fill: none;
|
||||
stroke: var(--icon);
|
||||
stroke-width: 2;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dribbble {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
img {
|
||||
display: block;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
.twitter {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 64px;
|
||||
bottom: 14px;
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: #1da1f2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
src/icons/svg/back.svg
Normal file
1
src/icons/svg/back.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1586694120514" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3309" width="32" height="32"><path d="M503.33333362 302.00000029V62L83.33333333 482.00000029l420.00000029 419.99999942V656c299.99999971 0 510.00000029 96.00000029 659.99999971 306-60.00000029-299.99999971-240.00000029-600.00000029-659.99999971-659.99999971z" p-id="3310" fill="#6bcbff"></path></svg>
|
||||
|
After Width: | Height: | Size: 415 B |
1
src/icons/svg/menu-unfavorite-hover.svg
Normal file
1
src/icons/svg/menu-unfavorite-hover.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1586768474164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17267" width="32" height="32"><path d="M1012 409.1c0-18.7-12.5-31.2-31.2-37.5l-306-43.7L537.5 53.2c-3.6-6.4-8.4-12-13.9-14.9-9-4.8-29.8-3.8-42.3 14.9L375.1 271.7 162.8 59.4l-43.7 43.7 830.4 830.5 50-43.7-206-206.1-6.2-37.5 218.5-218.5c2.9-3.4 6.2-12.5 6.2-18.7zM269 340.4L38 377.9c-6.2 0-16.1 3.4-21.9 10.1-9.9 11.5-4.1 30 3.1 39.9L244 646.4l-50 306c-1.9 9.3 0 17.6 2.5 23.3 6.2 14.1 28.7 14.1 41.2 7.9L512.4 840l281 149.9c7.4 2.6 19.4 0.9 25.3-1.2 14.6-5.3 21.3-18.4 18.4-36.2l-12.5-56.2L269 340.4z" p-id="17268" fill="#d81e06"></path></svg>
|
||||
|
After Width: | Height: | Size: 658 B |
1
src/icons/svg/menu-unfavorite.svg
Normal file
1
src/icons/svg/menu-unfavorite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1586768414859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17132" width="32" height="32"><path d="M1012 409.1c0-18.7-12.5-31.2-31.2-37.5l-306-43.7L537.5 53.2c-3.6-6.4-8.4-12-13.9-14.9-9-4.8-29.8-3.8-42.3 14.9L375.1 271.7 162.8 59.4l-43.7 43.7 830.4 830.5 50-43.7-206-206.1-6.2-37.5 218.5-218.5c2.9-3.4 6.2-12.5 6.2-18.7zM269 340.4L38 377.9c-6.2 0-16.1 3.4-21.9 10.1-9.9 11.5-4.1 30 3.1 39.9L244 646.4l-50 306c-1.9 9.3 0 17.6 2.5 23.3 6.2 14.1 28.7 14.1 41.2 7.9L512.4 840l281 149.9c7.4 2.6 19.4 0.9 25.3-1.2 14.6-5.3 21.3-18.4 18.4-36.2l-12.5-56.2L269 340.4z" p-id="17133"></path></svg>
|
||||
|
After Width: | Height: | Size: 643 B |
@ -1,78 +1,24 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<viewer v-show="false"
|
||||
:options="options"
|
||||
:images="images"
|
||||
@inited="inited"
|
||||
class="viewer" ref="viewer"
|
||||
>
|
||||
<template scope="scope">
|
||||
<img v-for="src in scope.images" :src="src" :key="src">
|
||||
{{scope.options}}
|
||||
</template>
|
||||
</viewer>
|
||||
<button type="button" @click="show">Show</button>
|
||||
<div>
|
||||
<button-upload></button-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// /filepreview/1583564534768屏幕快照 22.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad95
|
||||
// /filepreview/1583563260541image-20200304202759093.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad97
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import ButtonUpload from "@/components/button/ButtonUpload";
|
||||
export default {
|
||||
components: {
|
||||
ButtonUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
initialViewIndex: 0,
|
||||
button: true, //右上角关闭按钮
|
||||
navbar: 2,
|
||||
title: 0,
|
||||
toolbar: 0,
|
||||
keyboard: false,
|
||||
ready: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
show: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
shown: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
hide: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
hidden: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
view: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
viewed: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
zoom: function (e) {
|
||||
console.log(e.type);
|
||||
},
|
||||
zoomed: function (e) {
|
||||
console.log(e.type);
|
||||
}
|
||||
},
|
||||
images: ['/filepreview/1583564534768屏幕快照 22.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad95',
|
||||
'/filepreview/1583563260541image-20200304202759093.png?jmal-token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJXRUIiLCJpc3MiOiJTZXJ2aWNlIiwiZXhwIjoxNTg2MDY5NDUyLCJpYXQiOjE1ODU0NjQ2NTIsInVzZXJuYW1lIjoiam1hbCJ9.V49aAZ-lI7T4P_eFW-eeI4OMIylOyGUZxyrxv55Xthk&fileIds=5e71989499db019a5747ad97']
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
inited (viewer) {
|
||||
this.$viewer = viewer
|
||||
},
|
||||
show (viewIndex) {
|
||||
let index = 0
|
||||
if(viewIndex){
|
||||
index = viewIndex
|
||||
}
|
||||
this.$viewer.index = index
|
||||
console.log(this.$viewer)
|
||||
this.$viewer.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user