pc端要实现分享页面的功能,效果图如下
image.png
找了vshare 插件,实现了分享
https://github.com/1006008051/vshare
页面初始化后可以实现分享功能,但是页面跳出去,然后再回来,分享图标就不显示了,于是修改了vshare的代码
<template>
<div class="bdsharebuttonbox">
<a v-for="item in defaultConfig.shareList" :key="item.id" :class="'bds_'+item" :data-cmd="item"></a>
</div>
</template>
<script>
export default {
data () {
return {
defaultConfig: {
shareList: ['more','qzone','tsina','tqq','renren','weixin'],
share: [{bdSize: 24}],
slide: false,
image: false,
selectShare: false
}
}
},
props: ['vshareConfig'],
beforeCreate () {
if(process.client) {
window._bd_share_main = ''
}
},
mounted () {
console.log(this.vshareConfig)
if(process.client) {
this.$nextTick(()=>{
this.initShare()
})
}
},
methods: {
initShare() {
if (this.vshareConfig) {
this.vshareConfig.shareList ? this.defaultConfig.shareList = this.vshareConfig.shareList :'';
if (this.vshareConfig.shareList) {
}
if (this.vshareConfig.share) {
this.defaultConfig.share = this.vshareConfig.share
}
if (this.vshareConfig.slide) {
this.defaultConfig.slide = this.vshareConfig.slide
}
if (this.vshareConfig.image) {
this.defaultConfig.image = this.vshareConfig.image
}
if (this.vshareConfig.selectShare) {
this.defaultConfig.selectShare = this.vshareConfig.selectShare
}
}
window._bd_share_config = this.defaultConfig
// 如果有意外 为了避免冲突 先干掉以前的分享script
const $el = document.querySelector('#baiduShare')
console.info($el)
$el && document.body.removeChild($el)
const s = document.createElement('script');
s.type = 'text/javascript';
s.id = 'baiduShare'
s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=440186'
document.body.appendChild(s);
}
}
}
</script>
if(process.client) {} 这个因为是ssr项目所以才加入的,不是ssr项目无需加这个判断,引用方式如下(用了elementui el-popover)
<el-popover
placement="bottom"
width="200"
trigger="click">
<div style="padding-left: 13px;" >
<vshare ref="vshare" :vshareConfig="vshareConfig"></vshare>
</div>
<li class="te3 pointer" style="background: #f59192" slot="reference">
<img src="~/assets/img/public/shouCan.png" />
<span>分享</span>
</li>
</el-popover>
import vshare from './bdShare'
export default {
name: 'optionbar',
data() {
return {
vshareConfig: {
shareList: [
'qzone',
'tsina',
'renren',
'tsohu',
'weixin'
],
common : {
//此处放置通用设置
},
share : [{
//此处放置分享按钮设置
bdSize: 24
}
],
// slide : [
// //此处放置浮窗分享设置
// ],
// image : [
// //此处放置图片分享设置
// ],
// selectShare : [
// //此处放置划词分享设置
// ]
}
}
},
components: {
vshare: vshare
}
}
具体的配置可以看vshare文档
最后效果如下
image.png
网友评论