Uniapp全局消息提示以及其组件的实现方法

Uniapp是一个跨端开发框架，使得我们可以非常方便地开发和部署多种移动端应用。在开发移动应用时，全局消息提示是一个必不可少的功能，这可以让用户在操作后接收到系统的反馈以便更好地交互。

Uniapp提供了一个uni.showToast()的API方法，可以让我们在全局范围内显示消息提示。下面是如何使用该API的方法:

uni.showToast({
    title: '这是一条消息提示', // 消息内容
    duration: 2000, // 持续时间（单位：毫秒）
    icon: 'none' // 图标类型（可选值：success/loading/none）
});

这个方法可以满足基本的需求，但我们也可以建立自己的组件来实现更高级的全局消息提示。下面是几个例子，展示了如何利用组件来实现不同类型的全局消息提示。

1. 状态栏样式的全局消息提示

首先，我们在项目中创建一个名为StatusTip的组件，并定义其内部结构和样式。该组件以横幅的方式显示全局消息，并提供了三种不同的状态：success、warning和error。这是StatusTip组件的代码：

<template>
    <div class="status-tip" :class="{success: type === 'success', warning: type === 'warning', error: type === 'error'}">
        {{message}}
    </div>
</template>

<script>
export default {
    props: {
        type: String,
        message: String
    }
}
</script>

<style scoped>
.status-tip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    z-index: 9999;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.status-tip.success {
    background-color: green;
}

.status-tip.warning {
    background-color: orange;
}

.status-tip.error {
    background-color: red;
}
</style>

然后我们在Main.vue中注册该组件，在mounted()函数里全局引入，使其成为一个全局组件。接下来，我们就可以使用该组件来显示全局消息提示了。以下是一个例子，演示了如何在用户点击一个按钮时发出成功的全局消息提示：

<template>
    <button v-on:click="showSuccessTip()">点击按钮</button>
</template>

<script>
import StatusTip from '@/components/StatusTip';

export default {
    components: {
        StatusTip
    },
    methods: {
        showSuccessTip() {
            let tip = this.$create(StatusTip, {
                type: 'success',
                message: '操作成功！'
            });
            tip.show();
        }
    }
}
</script>

2. 自定义样式的全局消息提示

我们将创建一个名为Toast的组件，该组件允许用户定制消息提示的样式和显示时间。这是Toast组件的代码：

<template>
    <div class="toast" :style="{
        backgroundColor: bgColor,
        color: fontColor
    }" v-show="visible">{{message}}</div>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        };
    },
    props: {
        message: String,
        duration: {
            type: Number,
            default: 2000
        },
        bgColor: {
            type: String,
            default: 'rgba(0, 0, 0, 0.7)'
        },
        fontColor: {
            type: String,
            default: '#fff'
        }
    },
    methods: {
        show() {
            this.visible = true;
            setTimeout(() => {
                this.visible = false;
            }, this.duration);
        }
    }
}
</script>

<style scoped>
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 9999;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
</style>

在Main.vue中注册该组件并测试，用以下代码测试：

<template>
    <button v-on:click="showToast()">点击按钮</button>
</template>

<script>
import Toast from '@/components/Toast';

export default {
    components: {
        Toast
    },
    methods: {
        showToast() {
            let toast = this.$create(Toast, {
                message: '消息提示',
                duration: 3000,
                bgColor: 'yellow',
                fontColor: 'black'
            });
            toast.show();
        }
    }
}
</script>

这两个例子展示了全局消息提示的两种策略，让你可以选择适合你应用场景的方案。