other / mew-iview

Blame view

src/components/base/notification/notice.vue 2.49 KB
Edit Raw Normal View History
7c15ac9e   梁灏   add Message compo... 
1
 
  <template>
40f8606f   梁灏   add Notice component 
2
 
      <div :class="classes" :style="style" :transition="transitionName">
d6342fe1   jingsam   fixed ie bug 
3
4
 
          <div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
          <a :class="[baseClass + '-close]" @click="close" v-if="closable">
40f8606f   梁灏   add Notice component 
5
6
 
              <i class="ivu-icon ivu-icon-ios-close-empty"></i>
          </a>
7c15ac9e   梁灏   add Message compo... 
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
 
      </div>
  </template>
  <script>
      export default {
          props: {
              prefixCls: {
                  type: String,
                  default: ''
              },
              duration: {
                  type: Number,
                  default: 1.5
              },
              content: {
                  type: String,
                  default: ''
              },
              style: {
                  type: Object,
                  default: function() {
                      return {
                          right: '50%'
                      }
                  }
              },
              closable: {
                  type: Boolean,
                  default: false
              },
              className: {
                  type: String
              },
              key: {
                  type: String,
                  required: true
              },
              onClose: {
                  type: Function
40f8606f   梁灏   add Notice component 
45
46
47
 
              },
              transitionName: {
                  type: String
7c15ac9e   梁灏   add Message compo... 
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
 
              }
          },
          computed: {
              baseClass () {
                  return `${this.prefixCls}-notice`;
              },
              classes () {
                  return [
                      this.baseClass,
                      {
                          [`${this.className}`]: !!this.className,
                          [`${this.baseClass}-closable`]: this.closable
                      }
                  ]
              },
              contentClasses () {
                  return `${this.baseClass}-content`;
              }
          },
          methods: {
              clearCloseTimer () {
                  if (this.closeTimer) {
                      clearTimeout(this.closeTimer);
                      this.closeTimer = null;
                  }
              },
              close () {
                  this.clearCloseTimer();
                  this.onClose();
                  this.$parent.close(this.key);
              }
          },
          compiled () {
              this.clearCloseTimer();
  
              if (this.duration !== 0) {
                  this.closeTimer = setTimeout(() => {
                      this.close();
                  }, this.duration * 1000)
              }
          },
          beforeDestroy () {
              this.clearCloseTimer();
          }
      }
d6342fe1   jingsam   fixed ie bug 
93
 
  </script>