Notify.vue

<template>
  <transition :name="transition">
    <div v-show="show && !!content || showNotify" :class="[c(),cusClass,positionClass]" name="notify">
      <div :class="[c('wrap'),wrapClass,c('wrap-'+type)]">
        <div :class="c('content')">{{ content }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
import assign from 'object-assign'
import {base, prefix} from '../../common/mixins'

export default {
  name: 'Notify',
  /* eslint-disable vue/require-default-prop */
  mixins: [base, prefix],

  props: {
    value: Boolean,
    showNotify: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: '',
    },
    position: {
      type: String,
      default: 'top',
    },
    time: {
      type: Number,
      default: 3000,
    },
    cusClass: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
  },
  /* eslint-enable */
  data () {
    return {
      show: false,
      plugin: false,
      wrapClass: '',
      wrapType: '',
    }
  },
  computed: {
    transition () {
      return this.position === 'bottom' ? 'slide-in-up' : 'slide-in-down'
    },
    positionClass () {
      return this.position === 'bottom' ? this.c('bottom') : this.c('top')
    },
    pluginClass () {
      let vm = this
      if (vm.plugin === true) {
        return vm.position === 'bottom' ? 'notify-plugin-bottom' : 'notify-plugin-top'
      }
    },
  },
  watch: {
    value (val) {
      this.show = val
    },
    show (val) {
      // 标签用法时需要发射一个input事件，修改v-model绑定的属性值
      this.$emit('input', val)
      val &&
        setTimeout(() => {
          this.show = false
        }, this.time)
    },
  },

  methods: {
    showPlugin (options) {
      let vm = this
      let _options = assign({}, this.defaultOptions, options)
      vm.content = _options.content
      vm.position = _options.position
      vm.time = _options.time
      vm.type = _options.type
      vm.showNotify = true
      vm.plugin = true
      vm.wrapClass = 'hls-notify-wrap-plugin'
      setTimeout(function () {
        vm.showNotify = false
        if (vm.plugin) {
          document.body.removeChild(vm.$el)
        }
      }, vm.time)
    },
  },

}
</script>

<style lang="less">

  .hls-notify {
    width: 100%;
    position: absolute;
    left: 0;
    text-align: center;
    z-index: 5;

    &-top {
      top: 0;
    }

    &-bottom {
      bottom: 0;
    }

    &-wrap {
      padding: 8px 13px;
      line-height: 15px;
      font-size: 15px;
      color: @notifyFontColor;
      background-color: @dialogWrapBackgroundColor;
    }
    .hls-notify-wrap-plugin {
      padding: 0;
      height: 44px;
      line-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &-wrap-warning {
      background-color: @dialogWrapWarningBackgroundColor;
    }
    &-wrap-success {
      background-color: @dialogWrapSuccessBackgroundColor;
    }

    &-content {
      word-wrap: break-word;
    }
  }

  // ios平台
  .platform-ios .hls-notify .hls-notify-wrap-plugin {
    padding-top: 20px;
    height: 64px;
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios{
      .hls-notify .hls-notify-wrap-plugin {
        padding-top: 40px;
        height: 84px;
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios{
      .hls-notify .hls-notify-wrap-plugin {
        padding-top: 40px;
        height: 84px;
      }
    }
  }
</style>