wepy - 调起（关闭）弹窗分享组件 (一)

主要用到 hidden=’{{show}}’ 进行判断,做弹窗可以用这个方法；

要注意组件与调组件页面 true 和 false 的用法；

---

组件部分：

<style lang="less">
page {
    min-height: 100%;
}
.shade-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9996;
    color: #979797;
    background: rgba(18,17,16,.3);
    .shop-box { position: relative;
        height: 100%;
        .item { position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 30rpx 40rpx;
            background: #fff;
            .shade-hd .img-box { width: 50rpx;
                height: 50rpx;
                opacity: .6;
            }
        }
    }
    .shade-ft {
        position: relative;
        padding: 30rpx 0 40rpx 0;
        .img-box { width: 120rpx;
            height: 120rpx;
            margin: 30rpx auto;
        }
    }
    .shade-ft:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: block;
        width: 1px;
        height: 140rpx;
        border-radius: 20rpx;
        background-color: #e5e5e5;
    }
}
style>

<template>
<view class='shade-box' hidden='{{show}}'>
    <view class='shop-box'>
        <view class='item backg-white'>
            <view class='shade-hd'>
                <view class='weui-cell'>
                    <view class='weui-cell-bd text-center'><label class="font-md font-wg">分享至微信label>view>
                    <view class='weui-cell-ft ' @tap='hideShare'>
                        <view class='img-box'>
                            <image src='/image/icon-close.png' class='img img-xs' mode='widthFix'>image>
                        view>
                    view>
                view>
            view>
            <view class='shade-ft'>
                <view class='weui-cell text-center font-sm'>
                    <view class='weui-cell-bd'>
                        <poster id="poster" config="{{posterConfig}}"  bind:success="onPosterSuccess" bind:fail="onPosterFail">
                            <view class='img-box'>
                                <image src='/image/icon-share-save.png' class='img img-xs' mode='widthFix'>image>
                            view>
                            <view>朋友圈view>
                        poster>
                    view>
                    <view class='weui-cell-bd form-btn'>
                        <button class='btn' open-type='share'>zhuanfabutton>
                        <view class='img-box'>
                            <image src='/image/icon-share-wechat.png' class='img img-xs' mode='widthFix'>image>
                        view>
                        <view>微信好友view>
                    view>
                view>
            view>
        view>
    view>
view>
template>

调起组件部分：

效果：