vux toast的使用

vux官网
vux github地址
toast官方演示地址

Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

vux给出的demo都是通过i18n的，看起来吧感觉不是太好，如下：

WechatIMG2.jpeg

toast的可配置属性有以下几个：

WechatIMG3.jpeg

事件有以下两种：

WechatIMG4.jpeg

所以我把我自己平时用到的写成的简单的demo，下面是vux 的toast的简单使用

<template>
    <div id="test">
        <button class="btn-bind" @click="switchStatus">按钮</button>
        <toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="toastText" :position="position"></toast>
    </div>
</template>

<script>
    import { Toast } from 'vex';
    export default {
        name: 'test',
        data() {
            return {
                showPositionValue: false, //是否显示提示
                position: 'center', //提示信息的位置
                toastText: '', // 提示文本
            }
        },
        components: {
            Toast
        },
        methods: {
            switchStatus: function() {
                this.showPositionValue = true;
                this.toastText = "我是显示在中间的";
            }
        },
        mounted() {},
        watch: {}
    }
</script>
<style lang="sass">
    .btn-bind {
        width: 9.2rem;
        height: 1.173333rem;
        line-height: 1.173333rem;
        text-align: center;
        font-size: 0.48rem;
        margin: 0.8rem auto 0 auto;
        background: #FFA73B;
        color: #FFFFFF;
        border-radius: 0.106666rem;
        display: block;
        &:active {
            background: #D8590C;
            background: lighten(#FFA73B, 10%);
            color: lighten(#FFA73B, 30%);
        }
    }
</style>