hongze_yb_xcx/components/sharePoster/sharePoster.vue

<template>
  <view class="share-poster-wrap">
      <image @click="handleCreatePoster" :style="style" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill"/>

      <van-popup :show="show" @close="show=false" :close-on-click-overlay="false">
        <view class="loading-box" v-if="!posterImg">
            <image class="load-img" src="../../static/loading.png" mode="aspectFill" />
            <view>加载中...</view>
        </view>
      </van-popup>
      
  </view>
</template>

<script>
export default {
    // shareData.type 分享页面: chartList(图列表), reportList(报告列表), specialColumnList(专栏列表),
    props:{
        style:null,
        shareData:null,
    },
    data () {
        return {
            loading:false,
            show:false,
            posterImg:''
        }
    },
    methods: {
        handleCreatePoster(){
            this.show=true
        }
    }

}
</script>

<style lang="scss" scoped>
.share-poster-wrap{
    .share-icon{
        position: fixed;
        bottom: 100rpx;
        right: 34rpx;
        z-index: 50;
        width: 76rpx;
        height: 76rpx;
    }
    .loading-box{
        width: 417rpx;
        height: 261rpx;
        text-align: center;
        padding-top: 80rpx;
        font-size: 32rpx;
        font-weight: bold;
        .load-img{
            width: 91rpx;
            height: 91rpx;
            animation: circle 1s linear infinite;
        }
        @keyframes circle {
            0%{
                transform: rotateZ(0);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }
    }
}
</style>