前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的组件是：

前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈 ，

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发

效果图如下：

#### 使用方法

```使用方法

<!-- 分享 ref: 设置一个唯一ref contentHeight：弹框高度 shareList：分享数组 click：分享菜单按钮点击 -->

<cc-shareMenu ref="share" :contentHeight="580" :shareList="shareList" @click="shareMenuClick"></cc-shareMenu>

```

#### HTML代码部分

```html

<template>

<view class="content">

<view class="shareView" @click="goShareClick">分享</view>

<!-- 分享 ref: 设置一个唯一ref contentHeight：弹框高度 shareList：分享数组 click：分享菜单按钮点击 -->

<cc-shareMenu ref="share" :contentHeight="580" :shareList="shareList" @click="shareMenuClick"></cc-shareMenu>

</view>

</template>

<script>

export default {

data() {

return {

shareList: []

}

},

onLoad() {

this.shareList = [{

type: 1,

icon: '/static/share_wechat.png',

text: '微信好友'

},

{

type: 2,

icon: '/static/share_moment.png',

text: '朋友圈'

},

{

type: 3,

icon: '/static/share_qq.png',

text: 'QQ好友'

},

{

type: 4,

icon: '/static/share_qqzone.png',

text: 'QQ空间'

},

{

type: 5,

icon: '/static/share_weibo.png',

text: '微博'

}

];

},

methods: {

goShareClick() {

this.$refs.share.toggleMask();

},

shareMenuClick(name){

uni.showModal({

title: '温馨提示',

content:'点击的分享菜单名称是 = ' + name

})

}

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

}

.shareView{

margin-top: 60px;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: antiquewhite;

align-self: center;

}

</style>

```