微信小程序（原生）api全局提示组件toast

$Toast({
    content: '您还没有选择商品哦',
    type:'success'// success warning error loading
});

废话不多说 直接上代码

1-------------------------------------------------------------------------------------------------------------------------------------------------

function getCtx (selector) {
    const pages = getCurrentPages();
    const ctx = pages[pages.length - 1];

    const componentCtx = ctx.selectComponent(selector);

    if (!componentCtx) {
        console.error('无法找到对应的组件，请按文档说明使用组件');
        return null;
    }
    return componentCtx;
}

function Toast(options) {
    const { selector = '#toast' } = options;
    const ctx = getCtx(selector);

    ctx.handleShow(options);
}

Toast.hide = function (selector = '#toast') {
    const ctx = getCtx(selector);

    ctx.handleHide();
};

module.exports = {
    $Toast: Toast,
};

2--------------toast组件-----------------------------------------------------------------------------------------------------------------------------------

index.js

const default_data = {
    visible: false,
    content: '',
    icon: '',
    image: '',
    duration: 2,
    mask: true,
    type: 'default', // default || success || warning || error || loading
};

let timmer = null;

Component({
    // externalClasses: ['i-class'],

    data: {
        ...default_data
    },

    methods: {
        handleShow (options) {
            const { type = 'default', duration = 2 } = options;

            this.setData({
                ...options,
                type,
                duration,
                visible: true
            });

            const d = this.data.duration * 1000;

            if (timmer) clearTimeout(timmer);
            if (d !== 0) {
                timmer = setTimeout(() => {
                    this.handleHide();
                    timmer = null;
                }, d);
            }
        },

        handleHide () {
            this.setData({
                ...default_data
            });
        }
    }
});

index.json

{
    "component": true,
    "usingComponents": {
    }
}

index.wxml

<view class="i-toast-mask" wx:if="{{ visible && mask }}" bindtap="handleHide"></view>
<view class="i-class i-toast" wx:if="{{ visible }}">
    <block wx:if="{{ type !== 'default' }}">
        <view class="i-toast-type">
            <text class="i-toast-icon iconfont iconsuccess" type="success" wx:if="{{ type === 'success' }}"></text>
            <text class="i-toast-icon iconfont iconwarningo" type="prompt" wx:elif="{{ type === 'warning' }}"></text>
            <text class="i-toast-icon iconfont iconerror" type="delete" wx:elif="{{ type === 'error' }}"></text>
            <view class="i-toast-icon i-toast-loading" wx:elif="{{ type === 'loading' }}"></view>
        </view>
    </block>
    <block wx:else>
        <text class="i-toast-icon iconfont" type="{{ icon }}" wx:if="{{ icon }}"></text>
        <image class="i-toast-image" src="{{ image }}" wx:if="{{ image }}" mode="aspectFit"></image>
    </block>
    <text class="i-toast-content" wx:if="{{ content }}">{{ content }}</text>
</view>

ps：其中class iconfont iconsuccess我是用了阿里矢量图标 如果不用可以直接注释掉

index.wxss

@import "../../core/wxss/fonts.wxss";

.i-icon {
    display: inline-block;
    font-family: iconfont;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle
}

.i-toast {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 14px;
    line-height: 1.5em;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 18px;
    text-align: center;
    border-radius: 8px;
    z-index: 1010
}

.i-toast-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1010
}

.i-toast-icon {
    font-size: 27px !important;
    margin-bottom: 6px
}

.i-toast-image {
    max-width: 100px;
    max-height: 100px
}

.i-toast-loading {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    background: 0 0;
    border-radius: 50%;
    border: 2px solid #fff;
    border-color: #fff #fff #fff #ec4155;
    animation: btn-spin .8s linear;
    animation-iteration-count: infinite
}

@keyframes btn-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

3--------------如何使用-----------------------------------------------------------------------------------------------------------------------------------

在你想要使用的页面

.wxml加入

<i-toast id="toast" />

.json加入

{
    "usingComponents": {
        "i-toast": "/components/toast/index"
    }
}

.js中加入

//1.先引入
const { $Toast } = require('../../base/index');

//2.如何使用
$Toast({
    content: '您还没有选择商品哦',
});

$Toast({
    content: '您还没有选择商品哦',
    type:'success'// success warning error loading
});

over~~~~~~~~~~~~~~~~~~~~