在业务需求中,我们总是遇见需要点击按钮实现分享页面弹出分享界面的功能,所以我就简单实现了一下这个功能。
效果图:
Share组件:
<template>
<view class="share">
<view :class="{'share-box': shareState}" @click="handleHiddenShare">
</view>
<view class="share-item" :class="{'share-show': shareState}">
<view class="share-to">
<text>分享到</text>
</view>
<view class="content">
<view class="block">
<button class="wechat" open-type="share">
<image src="/static/img/wechat.png" mode="aspectFill"></image>
<text>微信</text>
</button>
</view>
<view class="block" @click="toUrl()">
<button class="moment">
<image src="/static/img/moment.png" mode="aspectFill"></image>
<text>朋友圈</text>
</button>
</view>
</view>
<view class="cancel" @click.stop="handleHiddenShare">
<text>取消</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
carInfo: []
},
data() {
return {
shareState: false,
};
},
onShareAppMessage(res) {
return {
title: '页面分享的标题',
path: '/pages/my/my',
imageUrl: '/static/imgs/mylogo.png'
}
},
methods: {
toUrl() {
uni.navigateTo({
url: '/pages/share/poster?carId=' + this.carInfo.car_id,
})
this.handleHiddenShare()
},
// 显示分享
handleShowShare() {
this.shareState = true;
},
// 隐藏分享
handleHiddenShare() {
this.shareState = false;
}
}
}
</script>
<style lang="less">
button::after{border: initial;}
.share {
width: 100%;
height: 100%;
}
.share-box {
width: 100%;
height: 100%;
position: fixed;
top: 0rpx;
left: 0rpx;
bottom: 0rpx;
right: 0rpx;
background-color: rgba(0, 0, 0, 0.4);
transition: .3s;
z-index: 999;
}
.block>button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
border-style: none;
width: 300rpx;
height: 180rpx;
// outline:none;
// opacity: 0;
}
// 进入分享动画
.share-show {
transition: all 0.3s ease;
transform: translateY(0%) !important;
}
// 离开分享动画
.share-item {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: #FFFFFF;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 1999;
.share-to {
width: 100%;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
&::after {
content: '';
width: 240rpx;
height: 0rpx;
border-top: 1px solid #E4E7ED;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
margin-left: 30rpx;
}
&::before {
content: '';
width: 240rpx;
height: 0rpx;
border-top: 1px solid #E4E7ED;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
margin-right: 30rpx;
}
}
.content {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
.block {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 180rpx;
image {
width: 80rpx;
height: 80rpx;
}
text {
margin-top: 16rpx;
font-size: 28rpx;
color: #606266;
}
}
}
.cancel {
width: 100%;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
border-top: 1rpx solid #E4E7ED;
}
}
</style>
父组件:
通过点击事件触发Share组件的显示函数来改变Share组件的分享状态
<template>
<div>
<button @click="showShare">
分享
</button>
<Share ref="refShare" :carInfo='carInfo'></Share>
</div>
</template>
<script>
import Share from '@/components/share.vue'
export default{
components:{
Share
},
data(){
return{
}
},
methods:{
showShare() {
this.$refs.refShare.handleShowShare();
},
}
}
</script>