移动端弹框

HTML

<transition name="fade">
    <div class="tips" v-show="tipVisible">{{tipMsg}}</div>
</transition>

JS

<script>
    export default {
        data() {
            return {
                tipVisible: false, //提示语弹框
                tipMsg: ''
            }
        },
        mouted() {
            this.tips('test');
        },
        methods: {
            tips(msg) {
                this.tipVisible = true;
                this.tipMsg = msg;
                setTimeout(() => {
                    this.tipVisible = false;
                }, 1500)
            }
        }
    }
</script>

CSS

<style scoped lang="stylus">
    .tips
        z-index 100000
        position fixed
        top 40%
        left 50%
        margin-top -5rem
        margin-left -32.5rem
        width 65rem
        height 8rem
        font-size 2.8rem
        color #fff
        text-align center
        line-height 8rem
        font-weight normal
        letter-spacing .5rem
        border-radius 2rem
        background-color rgba(0, 0, 0, 0.8)
</style>