分享功能组件开发(上)

<template>
	<view class="animated fadeIn fast" v-if="shareshow">
		<view class="more-share-model"  @tap="toggle()"></view>
		<view class="more-share">
			<view class="more-share-title u-f-ajc">分享到</view>
			<scroll-view scroll-x class="more-share-body" >
				<view class="more-share-item" hover-class="more-share-hover">
					<view class="icon iconfont icon-weixin u-f-ajc more-share-wx"></view>
					<view>微信</view>
				</view>
				<view class="more-share-item" hover-class="more-share-hover">
					<view class="icon iconfont icon-weixin u-f-ajc more-share-pyq"></view>
					<view>朋友圈</view>
				</view>
				<view class="more-share-item" hover-class="more-share-hover">
					<view class="icon iconfont icon-xinlangweibo u-f-ajc more-share-wb"></view>
					<view>新浪微博</view>
				</view>
				<view class="more-share-item" hover-class="more-share-hover">
					<view class="icon iconfont icon-QQ u-f-ajc more-share-qq"></view>
					<view>QQ</view>
				</view>
				<view class="more-share-item" hover-class="more-share-hover">
					<view class="icon iconfont icon-huiyuanvip u-f-ajc more-share-qq"></view>
					<view>其它</view>
				</view>
			</scroll-view>
			<view class="more-share-bottom u-f-ajc" hover-class="more-share-hover" @tap="toggle()">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			shareshow: Boolean
		},
		methods:{
			toggle() {
				this.$emit('toggle')
			}
		}
	}
</script>

<style lang="less" scoped>
	.more-share-model {
		background-color: rgba(51,51,51,0.49);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		}
	.more-share {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 110;
	}
	.more-share-title, .more-share-bottom {
		font-size: 32rpx;
		padding: 25rpx;
	}
	.more-share-body {
		white-space: nowrap;
		width: 100%;
		height: 200rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		line-height: 200rpx;
	}
	.more-share-item{
		width: 25%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100%;
		}
		.more-share-item>view:first-child {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			font-size: 55rpx;
			color: #fff;
		}
		.more-share-item>view:last-child {
			color: #7a7a7a
		}
		.more-share-hover {
			background-color: #eee
		}
		.more-share-wx {
			background-color: #2ad19b;
		}
		.more-share-pyq {
			background-color: #514d4c;
		}
		.more-share-wb {
			background-color: #ee5e5e;
		}
		.more-share-qq {
			background-color: #4a73ba;
		}
</style>