Notify.vue 3.58 KB
Newer Older
Nature's avatar
Nature committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
<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;
Nature's avatar
Nature committed
114
    z-index: 5;
Nature's avatar
Nature committed
115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132

    &-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;
JingChao's avatar
JingChao committed
133
      height: 44px;
Nature's avatar
Nature committed
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
      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 {
JingChao's avatar
JingChao committed
153
    padding-top: 20px;
JingChao's avatar
JingChao committed
154
    height: 64px;
Nature's avatar
Nature committed
155 156 157 158
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
Nature's avatar
Nature committed
159
    .platform-ios{
Nature's avatar
Nature committed
160
      .hls-notify .hls-notify-wrap-plugin {
JingChao's avatar
JingChao committed
161 162
        padding-top: 40px;
        height: 84px;
Nature's avatar
Nature committed
163 164 165 166 167 168
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
Nature's avatar
Nature committed
169
    .platform-ios{
Nature's avatar
Nature committed
170
      .hls-notify .hls-notify-wrap-plugin {
JingChao's avatar
JingChao committed
171 172
        padding-top: 40px;
        height: 84px;
Nature's avatar
Nature committed
173 174 175 176
      }
    }
  }
</style>