chenhaodong / mew-iview

Blame view

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">
7c15ac9e   梁灏   add Message compo... 
3
 
          <div :class="[`${baseClass}-content`]" v-el:content>{{{ content }}}</div>
40f8606f   梁灏   add Notice component 
4
5
6
 
          <a :class="[`${baseClass}-close`]" @click="close" v-if="closable">
              <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
93
 
              }
          },
          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();
          }
      }
  </script>