vue2.x 百度share分享组件-移动版

 <template>
 <div class="share" :class="{'share-open':visible}" @click="tap">
    <div class="bdsharebuttonbox bdshare-button-style0-16" v-show="visible">
        <el-col :span="8" v-for="(item,index) in list" :key="index">
          <a href="#" :class="'bds_'+item.cmd" :data-cmd="item.cmd"></a>
        </el-col>
    </div>
</div>
</template>

export default {
    data() {
      return {
        imgUrl: imgUrl,
        list : [
          {cmd:'tsina', img:imgUrl+'share_sina.png'},
          {cmd:'sqq', img:imgUrl+'share_qq.png'},
          {cmd:'weixin', img:imgUrl+'share_weixin.png'},
          {cmd:'fbook', img:imgUrl+'share_facebook.png'},
          {cmd:'twi', img:imgUrl+'share_twitter.png'},
          {cmd:'linkedin', img:imgUrl+'share_linkedin.png'},
        ]
      }
    },
    beforeCreate(){
        window._bd_share_main = '';
    },
    mounted() {
        this.$nextTick(() => {
            this.setup();
        });
    },
    props: {
        visible: {
            type: Boolean,
            required: false,
            default() {
                return false;
            }
        },
        shareDesc: {
            type: String,
            required: false,
            default() {
                return '';
            }
        }
    },
    methods:{
        setup(){
            var _this = this;
            window._bd_share_config = {
                "common":{
                    "bdSnsKey":{},
                    "bdText": _this.shareDesc,
                    "bdDesc": _this.shareDesc,
                    "bdMini":"2",
                    "bdPic": imgUrl + 'logo@2x.png',
                    "bdStyle":"0",
                    "bdSize":"16"
                },
                "share":{}
            };
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
            document.body.appendChild(s);
        },
        tap() {
          this.$emit('tap');
        }
    }
}

<style scoped>
.share { position: fixed; left:0; bottom:-132px; right:0; z-index: 100; height:132px; transition: all .15s linear; }
.share-open { bottom:0; transition: all .15s linear; }
.share-open:before { position: fixed; left:0; top:0; right:0; bottom:0; content:''; background: rgba(0, 0, 0, .2); z-index:1; transition: all .15s linear; }
.bdshare-button-style0-16 { position: relative; height: 112px; padding:10px 0; background: #fff; overflow: hidden; text-align: center; z-index:2; }
.bdshare-button-style0-16 a { display: block; float: none; height: 36px; padding:10px 0; margin:0; background-repeat: no-repeat; background-position: center; background-size: auto 80%; text-align: center; }
.bdshare-button-style0-16 img { height:100%; }
.bdshare-button-style0-16 .bds_tsina { background-image: url(/static/img/share_sina.png); }
.bdshare-button-style0-16 .bds_sqq { background-image: url(/static/img/share_qq.png); }
.bdshare-button-style0-16 .bds_weixin { background-image: url(/static/img/share_weixin.png); }
.bdshare-button-style0-16 .bds_fbook { background-image: url(/static/img/share_facebook.png); }
.bdshare-button-style0-16 .bds_twi { background-image: url(/static/img/share_twitter.png); }
.bdshare-button-style0-16 .bds_linkedin { background-image: url(/static/img/share_linkedin.png); }
</style>

转载于:https://my.oschina.net/imsole/blog/3010971