apt-nl/src/components/toast.vue

<template>
  <div class="toast">
    <div class="toast-wrap">
      <div class="text">
        {{toastMsg}}
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: mapState({
    toastMsg: state => state.com.toastMsg
  })
}
</script>

<style lang="stylus" scoped>
.toast
  .toast-wrap
    position fixed
    z-index 10001
    width 90%
    min-height 48px
    text-align center
    left 50%
    top 50%
    transform translate(-50%, -50%)
    .text
      line-height 40px
      display inline-block
      width auto
      text-align center
      padding 14px 73px
      border-radius 16px
      background #858586
      font-size 32px
      color #fff
</style>