Blame view

src/components/base/notification/notification.vue 2.34 KB
7c15ac9e   梁灏   add Message compo...
1
2
3
4
5
6
7
8
9
  <template>
      <div :class="classes" :style="style">
          <Notice v-for="notice in notices"
              :prefix-cls="prefixCls"
              :style="notice.style"
              :content="notice.content"
              :duration="notice.duration"
              :closable="notice.closable"
              :key="notice.key"
40f8606f   梁灏   add Notice component
10
              :transition-name="notice.transitionName"
7c15ac9e   梁灏   add Message compo...
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
              :on-close="notice.onClose">
          </Notice>
      </div>
  </template>
  <script>
      import Notice from './notice.vue';
  
      const prefixCls = 'ivu-notification';
      let seed = 0;
      const now = Date.now();
  
      function getUuid () {
          return 'ivuNotification_' + now + '_' + (seed++);
      }
  
      export default {
          components: { Notice },
          props: {
              prefixCls: {
                  type: String,
                  default: prefixCls
              },
              style: {
                  type: Object,
                  default: function () {
                      return {
                          top: '65px',
                          left: '50%'
                      }
                  }
              },
              content: {
                  type: String
              },
              className: {
                  type: String
40f8606f   梁灏   add Notice component
47
              }
7c15ac9e   梁灏   add Message compo...
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
          },
          data () {
              return {
                  notices: []
              }
          },
          computed: {
              classes () {
                  return [
                      `${this.prefixCls}`,
                      {
                          [`${this.className}`]: !!this.className
                      }
                  ]
              }
          },
          methods: {
              add (notice) {
47e58396   梁灏   message component...
66
                  const key = notice.key || getUuid();
7c15ac9e   梁灏   add Message compo...
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
  
                  let _notice = Object.assign({
                      style: {
                          right: '50%'
                      },
                      content: '',
                      duration: 1.5,
                      closable: false,
                      key: key
                  }, notice);
  
                  this.notices.push(_notice);
              },
              close (key) {
                  const notices = this.notices;
  
                  for (let i = 0; i < notices.length; i++) {
                      if (notices[i].key === key) {
                          this.notices.splice(i, 1);
                          break;
                      }
                  }
              }
          }
      }
  </script>