toesbieya
6 years ago
parent
aa66f586cf
commit
bb98c5ad7b
@ -1,46 +0,0 @@ |
||||
<template> |
||||
<div :class="{active:isActive}" class="share-dropdown-menu"> |
||||
<div class="share-dropdown-menu-wrapper"> |
||||
<span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span> |
||||
|
||||
<div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item"> |
||||
<a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a> |
||||
<span v-else>{{ item.title }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
//参考drop.js |
||||
export default { |
||||
name: 'DropdownMenu', |
||||
|
||||
props: { |
||||
items: { |
||||
type: Array, |
||||
default: function () { |
||||
return [] |
||||
} |
||||
}, |
||||
title: { |
||||
type: String, |
||||
default: 'vue' |
||||
} |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
isActive: false |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
clickTitle() { |
||||
this.isActive = !this.isActive |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" src="./style.scss"></style> |
||||
@ -1,66 +0,0 @@ |
||||
$n: 9; //和items.length 相同 |
||||
$t: .1s; |
||||
.share-dropdown-menu { |
||||
width: 250px; |
||||
position: relative; |
||||
z-index: 1; |
||||
|
||||
&-title { |
||||
width: 100%; |
||||
display: block; |
||||
cursor: pointer; |
||||
background: black; |
||||
color: white; |
||||
height: 60px; |
||||
line-height: 60px; |
||||
font-size: 20px; |
||||
text-align: center; |
||||
z-index: 2; |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
|
||||
&-wrapper { |
||||
position: relative; |
||||
} |
||||
|
||||
&-item { |
||||
text-align: center; |
||||
position: absolute; |
||||
width: 100%; |
||||
background: #e0e0e0; |
||||
line-height: 60px; |
||||
height: 60px; |
||||
cursor: pointer; |
||||
font-size: 20px; |
||||
opacity: 1; |
||||
transition: transform 0.28s ease; |
||||
|
||||
&:hover { |
||||
background: black; |
||||
color: white; |
||||
} |
||||
|
||||
@for $i from 1 through $n { |
||||
&:nth-of-type(#{$i}) { |
||||
z-index: -1; |
||||
transition-delay: $i*$t; |
||||
transform: translate3d(0, -60px, 0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.active { |
||||
.share-dropdown-menu-wrapper { |
||||
z-index: 1; |
||||
} |
||||
|
||||
.share-dropdown-menu-item { |
||||
@for $i from 1 through $n { |
||||
&:nth-of-type(#{$i}) { |
||||
transition-delay: ($n - $i)*$t; |
||||
transform: translate3d(0, ($i - 1)*60px, 0); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,43 @@ |
||||
<template> |
||||
<el-row type="flex" justify="space-between"> |
||||
<el-col v-show="!expanded" :span="extraSpan"> |
||||
<slot name="extra"/> |
||||
</el-col> |
||||
<div style="display: flex;justify-content: center;align-items: center"> |
||||
<el-link :icon="iconClass" :underline="false" style="font-size: 16px" @click="expanded=!expanded"/> |
||||
</div> |
||||
<el-col :span="defaultSpan"> |
||||
<slot/> |
||||
</el-col> |
||||
</el-row> |
||||
</template> |
||||
|
||||
<script type="text/jsx"> |
||||
export default { |
||||
name: "ExtraArea", |
||||
|
||||
props: { |
||||
extra: {type: Number, default: 5} |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
expanded: false |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
extraSpan() { |
||||
return this.expanded ? 0 : this.extra |
||||
}, |
||||
defaultSpan() { |
||||
return 23 - this.extraSpan |
||||
}, |
||||
iconClass() { |
||||
return `el-icon-arrow-${this.expanded ? 'right' : 'left'}` |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
|
||||
@ -1,23 +0,0 @@ |
||||
<script type="text/jsx"> |
||||
import {isExternal} from "@/utils/validate" |
||||
|
||||
export default { |
||||
name: 'Link', |
||||
|
||||
functional: true, |
||||
|
||||
render(h, context) { |
||||
let to = context.props.to |
||||
if (isExternal(to)) return ( |
||||
<a href={to} target="_blank" rel="nofollow"> |
||||
{context.children} |
||||
</a> |
||||
) |
||||
else return ( |
||||
<router-link to={to}> |
||||
{context.children} |
||||
</router-link> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,17 @@ |
||||
import {isEmpty} from "@/utils" |
||||
|
||||
export default { |
||||
computed: { |
||||
showOfflineTip() { |
||||
const state = this.$store.state |
||||
const isLogin = !isEmpty(state.user.id, state.user.token) |
||||
return !state.socket.online && isLogin |
||||
}, |
||||
}, |
||||
|
||||
watch: { |
||||
showOfflineTip(v) { |
||||
v ? this.$bottomTip('与服务器失去连接') : this.$bottomTip.close() |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue