init

liuxiaolong

2019-05-06 2ab7a76a38fbf8fa107bf6371f5410ba54e1d394

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
import Vue from 'vue'
import Toasted from 'vue-toasted'
import '@/vendor/libs/vue-toasted/vue-toasted.scss'
Vue.use(Toasted)
const getCustomClasses = (toastStyle, toastVariant) => {
  if (!toastVariant) return null
  if (toastStyle !== 'outline') {
    return `bg-${toastVariant} text-${
      toastVariant === 'warning' ? 'dark' : 'white'
    }`
  } else {
    return `border-${toastVariant} text-${toastVariant}`
  }
}
// const getActionCustomClasses = (toastStyle, toastVariant) => {
//   if (!toastVariant) return null
 
//   if (toastStyle !== 'outline') {
//     return `opacity-75 text-${toastVariant === 'warning' ? 'dark' : 'white'}`
//   } else {
//     return `opacity-75 text-${toastVariant}`
//   }
// }
const Toast = ({
  message,
  type = 'default', // success warning  error  info default
  toastStyle = 'primary', // primary,bubble,outline
  toastVerticalPosition = 'top', // top,bottom
  toastHorizontalPosition = 'center', // left,center,right
  toastActions = null,
  toastIcon = null,
  toastDuration = 2000
}) => {
  let toastVariant = '' // primary secondary success warning  info  danger  dark
  switch (type) {
    case 'error':
      toastVariant = 'danger'
      break
    case 'default':
      toastVariant = 'dark'
      break
    default:
      toastVariant = type
  }
 
  const actions = [
    {
      text: '关闭',
      onClick: (e, toastObject) => {
        toastObject.goAway(0)
      }
    }
  ]
  // {
  //   text: 'Undo',
  //   push: {
  //     name: 'somewhere',
  //     dontClose: true
  //   },
  //   class: getActionCustomClasses()
  // }
 
  Vue.toasted.show(message, {
    theme: toastStyle,
    position: `${toastVerticalPosition}-${toastHorizontalPosition}`,
    action: toastActions ? actions : toastActions,
    icon: toastIcon || null,
    className: getCustomClasses(toastStyle, toastVariant),
    duration: toastDuration
  })
}
export default Toast