alertMixin.js 1007 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. import Alert from './Alert'
  2. const AlertMixin = {
  3. install(Vue) {
  4. Vue.mixin({
  5. methods: {
  6. $alert(message, duration = 2000) {
  7. let Constructor= Vue.extend(Alert)
  8. let alert = new Constructor()
  9. alert.$slots.default = message
  10. alert.$props.alert = this.$page.alert
  11. alert.$mount()
  12. document.body.appendChild(alert.$el)
  13. const appendHeight = alert.$el.offsetHeight + 16
  14. this.$page.alert.top += appendHeight
  15. setTimeout(() => {
  16. this.$page.alert.top -= appendHeight
  17. this.triggerRemoveAlert(appendHeight)
  18. setTimeout(() => {
  19. alert.$destroy()
  20. alert.$el.remove()
  21. }, 100)
  22. }, duration)
  23. },
  24. triggerRemoveAlert(height) {
  25. const event = new CustomEvent('alert_remove', {
  26. detail: {height}
  27. })
  28. window.dispatchEvent(event)
  29. }
  30. }
  31. })
  32. }
  33. }
  34. export default AlertMixin