107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<!-- 尾部链接 -->
|
|
<template>
|
|
<div class="link" id="link">
|
|
<div>
|
|
<span class="title borderRight">友情链接</span>
|
|
<span class="myLi1 borderRight" v-for="(link, index) in linkList" :key="index" @click="openLinkUrl(link.url)" :title="link.name" >
|
|
{{ link.name }}
|
|
</span>
|
|
<span class="myLi1" @click="$router.push('linkManage')">更多链接 ⋙</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Empennage',
|
|
components: {},
|
|
mixins: [],
|
|
data() {
|
|
return {
|
|
linkList: [],
|
|
width: ''
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
width(val) {
|
|
console.log(val);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLink();
|
|
this.width = document.getElementById("link").offsetWidth
|
|
let self = this
|
|
this.screenWidth = document.body.clientWidth
|
|
window.onresize = () => {
|
|
return (() => {
|
|
console.log(document.body.clientWidth);
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
// 跳转链接
|
|
openLinkUrl (linkUri) {
|
|
let getHttp = linkUri.substring(0, 7)
|
|
let getHttps = linkUri.substring(0, 8)
|
|
if (getHttp === 'http://' || getHttps === 'https://') {
|
|
window.open(linkUri)
|
|
} else {
|
|
window.open('https://' + linkUri)
|
|
}
|
|
},
|
|
// 获取链接数据
|
|
getLink () {
|
|
var width = document.getElementById("link").offsetWidth
|
|
this.$http.get('sarUrl/tsUrl', {
|
|
}, {
|
|
_this: this,
|
|
loading: 'Loading'
|
|
}, res=> {
|
|
let b = 0
|
|
let c = 0
|
|
for (let a = 0; a < res.data.length; a++) {
|
|
b += res.data[a].name.length * 14 + 100
|
|
if (b > width) {
|
|
c = a - 1
|
|
} else {
|
|
c = a
|
|
}
|
|
}
|
|
let list
|
|
list = res.data.slice(0, c)
|
|
this.linkList = list
|
|
})
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.link {
|
|
margin-right: 10px;
|
|
display: flex;
|
|
border-radius: 3px;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
|
|
.borderRight {
|
|
padding-right: 30px;
|
|
margin-right: 30px;
|
|
border-right: 2px dotted #aaa;
|
|
}
|
|
.title {
|
|
font-weight: bold;
|
|
padding-left: 10px;
|
|
width: 80px;
|
|
}
|
|
.myLi1 {
|
|
cursor: pointer;
|
|
color: #0068B7;
|
|
}
|
|
}
|
|
</style>
|
|
|