vuepress-theme-reco/components/FriendLink.vue

197 lines
5.1 KiB
Vue
Raw Normal View History

2019-11-13 19:05:04 +08:00
<template>
<div class="friend-link-wrapper">
2019-11-13 20:46:00 +08:00
<div
class="friend-link-item"
2019-11-14 16:01:39 +08:00
v-for="(item, index) in dataAddColor"
2019-11-13 19:05:04 +08:00
:key="index"
2019-11-14 16:01:39 +08:00
@mouseenter="showDetail($event)"
@mouseleave="hideDetail($event)"
2019-11-13 19:05:04 +08:00
target="_blank">
<span
class="list-style"
2019-11-14 16:01:39 +08:00
:style="{ 'backgroundColor': item.color }">
2019-11-13 19:05:04 +08:00
</span>
{{item.title}}
2019-11-14 16:01:39 +08:00
<transition name="fade">
<div class="popup-window-wrapper">
<div
class="popup-window"
:style="popupWindowStyle"
ref="popupWindow">
2019-11-24 16:06:16 +08:00
<div class="logo">
2019-11-14 16:01:39 +08:00
<img :src="getImgUrl(item)" />
</div>
<div class="info">
<div class="title">
<h4>{{ item.title }}</h4>
<a
class="btn-go"
:style="{ 'backgroundColor': item.color }"
:href="item.link"
target="_blank">GO</a>
</div>
<p v-if="item.desc">{{ item.desc }}</p>
</div>
2019-11-14 01:09:34 +08:00
</div>
2019-11-13 20:46:00 +08:00
</div>
2019-11-14 16:01:39 +08:00
</transition>
</div>
2019-11-13 19:05:04 +08:00
</div>
</template>
<script>
2019-11-13 20:46:00 +08:00
import md5 from 'md5'
import { getOneColor } from '@theme/helpers/other'
2019-11-13 19:05:04 +08:00
export default {
2019-11-13 20:46:00 +08:00
data () {
return {
2019-11-14 16:01:39 +08:00
popupWindowStyle: {}
}
},
computed: {
dataAddColor () {
let { friendLink } = this.$themeConfig
if (friendLink && friendLink.length > 0) {
friendLink = friendLink.map(item => ({
...item,
color: getOneColor()
}))
return friendLink
}
return []
2019-11-13 20:46:00 +08:00
}
},
methods: {
getMd5 (str) {
return md5(str)
},
2019-11-14 16:01:39 +08:00
showDetail (e) {
2019-11-13 20:46:00 +08:00
const currentDom = e.target
2019-11-14 16:01:39 +08:00
const popupWindowWrapper = currentDom.querySelector('.popup-window-wrapper')
const popupWindow = currentDom.querySelector('.popup-window')
popupWindowWrapper.style.display = 'block'
const { clientWidth } = currentDom
const {
clientWidth: windowWidth,
clientHeight: windowHeight
} = popupWindow
2019-11-13 20:46:00 +08:00
this.popupWindowStyle = {
2019-11-14 16:01:39 +08:00
left: (clientWidth - windowWidth) / 2 + 'px',
top: -windowHeight + 'px'
2019-11-13 20:46:00 +08:00
}
2019-11-14 01:09:34 +08:00
this.$nextTick(() => {
2019-11-14 16:01:39 +08:00
this._adjustPosition(currentDom.querySelector('.popup-window'))
2019-11-14 01:09:34 +08:00
})
2019-11-13 20:46:00 +08:00
},
2019-11-14 16:01:39 +08:00
hideDetail (e) {
const currentDom = e.target
currentDom.querySelector('.popup-window-wrapper').style.display = 'none'
2019-11-14 01:09:34 +08:00
},
2019-11-14 16:01:39 +08:00
getImgUrl (info) {
2019-11-24 16:06:16 +08:00
const { logo, email } = info
if (logo && /^http/.test(logo)) return logo
if (logo && !/^http/.test(logo)) return this.$withBase(logo)
2020-01-21 16:15:36 +08:00
return `//1.gravatar.com/avatar/${this.getMd5(email || '')}?s=50&amp;d=mm&amp;r=x`
2019-11-14 01:09:34 +08:00
},
2019-11-14 16:01:39 +08:00
_adjustPosition (dom) {
2019-11-14 01:09:34 +08:00
const { offsetWidth } = document.body
2019-11-14 16:01:39 +08:00
const { x, width } = dom.getBoundingClientRect()
2019-11-14 01:09:34 +08:00
const distanceToRight = offsetWidth - (x + width)
if (distanceToRight < 0) {
2019-11-14 16:01:39 +08:00
const { offsetLeft } = dom
2019-11-14 01:09:34 +08:00
this.popupWindowStyle = {
...this.popupWindowStyle,
left: offsetLeft + distanceToRight + 'px'
}
}
}
2019-11-13 20:46:00 +08:00
}
2019-11-13 19:05:04 +08:00
}
</script>
<style lang="stylus" scoped>
@require '../styles/mode.styl'
2019-11-13 19:05:04 +08:00
.friend-link-wrapper
2019-11-13 20:46:00 +08:00
position relative
2019-11-13 19:05:04 +08:00
margin 30px 0
2019-11-13 20:46:00 +08:00
.friend-link-item
2019-11-13 19:05:04 +08:00
position relative
vertical-align: middle;
margin: 4px 4px 10px;
padding: 4px 8px 4px 20px;
2019-11-13 20:46:00 +08:00
line-height 20px
2019-11-13 19:05:04 +08:00
display: inline-block;
2020-03-23 14:27:21 +08:00
cursor: default;
2019-11-13 19:05:04 +08:00
border-radius: $borderRadius
font-size: 13px;
box-shadow var(--box-shadow)
2019-11-13 19:05:04 +08:00
transition: all .5s
.list-style
position absolute
left .4rem
top 0
bottom 0
margin auto
display block
width .4rem
height .4rem
border-radius .1rem
background $accentColor
content ''
2019-11-14 16:01:39 +08:00
.popup-window-wrapper
display none
.popup-window
position absolute
2019-11-13 20:46:00 +08:00
display flex
background var(--background-color)
box-shadow var(--box-shadow)
2019-11-14 16:01:39 +08:00
border-radius $borderRadius
box-sizing border-box
padding .8rem 1rem
width 300px
2019-11-24 16:06:16 +08:00
.logo
2019-11-14 16:01:39 +08:00
margin-right .4rem
width 2rem
height 2rem
flex 0 0 2rem
2019-11-13 20:46:00 +08:00
border-radius $borderRadius
2019-11-14 16:01:39 +08:00
overflow hidden
img
width 2rem
height 2rem
.info
flex 0 0 85%
width 85%
.title
display flex
align-items center
justify-content space-between
height 2rem
h4
margin .2rem 0
flex 0 0 86%
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.btn-go
width 1.4rem
height 1.2rem
border-radius $borderRadius
font-size .1rem
color #ffffff
text-align center
line-height 1.2rem
cursor pointer
transition all .5s
&:hover
transform scale(1.1)
2019-11-14 01:09:34 +08:00
.fade-enter-active, .fade-leave-active
transition opacity .5s
.fade-enter, .fade-leave-to
opacity 0
2019-11-13 19:05:04 +08:00
</style>