other / mew-iview

Blame view

src/components/upload/upload-list.vue 3.03 KB
Edit Raw Normal View History
3affd6f3   梁灏   init upload compo... 
1
 
  <template>
ddef2bb3   梁灏   update Upload 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
      <ul :class="[prefixCls + '-list']">
          <li
              v-for="file in files"
              :class="fileCls(file)"
              @click="handleClick(file)">
              <span @click="handlePreview(file)">
                  <Icon :type="format(file)"></Icon> {{ file.name }}
              </span>
              <Icon
                  type="ios-close-empty"
                  :class="[prefixCls + '-list-remove']"
                  v-show="file.status === 'finished'"
                  @click="handleRemove(file)"></Icon>
              <Progress
                  v-if="file.showProgress"
                  :stroke-width="2"
                  :percent="parsePercentage(file.percentage)"
                  :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"
                  transition="fade"></Progress>
          </li>
      </ul>
3affd6f3   梁灏   init upload compo... 
23
24
 
  </template>
  <script>
ddef2bb3   梁灏   update Upload 
25
26
27
28
 
      import Icon from '../icon/icon.vue';
      import Progress from '../progress/progress.vue';
      const prefixCls = 'ivu-upload';
3affd6f3   梁灏   init upload compo... 
29
 
      export default {
ddef2bb3   梁灏   update Upload 
30
31
32
33
34
35
36
37
38
 
          components: { Icon, Progress },
          props: {
              files: {
                  type: Array,
                  default() {
                      return [];
                  }
              }
          },
3affd6f3   梁灏   init upload compo... 
39
 
          data () {
ddef2bb3   梁灏   update Upload 
40
41
42
 
              return {
                  prefixCls: prefixCls
              };
3affd6f3   梁灏   init upload compo... 
43
44
 
          },
          computed: {},
ddef2bb3   梁灏   update Upload 
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
          methods: {
              fileCls (file) {
                  return [
                      `${prefixCls}-list-file`,
                      {
                          [`${prefixCls}-list-file-finish`]: file.status === 'finished'
                      }
                  ];
              },
              handleClick (file) {
                  this.$emit('on-file-click', file);
              },
              handlePreview (file) {
                  this.$emit('on-file-preview', file);
              },
              handleRemove (file) {
                  this.$emit('on-file-remove', file);
              },
              format (file) {
                  const format = file.name.split('.').pop().toLocaleLowerCase() || '';
                  let type = 'document';
  
                  if (['gif','jpg','jpeg','png','bmp','webp'].indexOf(format) > -1) {
                      type = 'image';
                  }
                  if (['mp4','m3u8','rmvb','avi','swf','3gp','mkv','flv'].indexOf(format) > -1) {
                      type = 'ios-film';
                  }
                  if (['mp3','wav','wma','ogg','aac','flac'].indexOf(format) > -1) {
                      type = 'ios-musical-notes';
                  }
                  if (['doc','txt','docx','pages','epub','pdf'].indexOf(format) > -1) {
                      type = 'document-text';
                  }
                  if (['numbers','csv','xls','xlsx'].indexOf(format) > -1) {
                      type = 'stats-bars';
                  }
                  if (['keynote','ppt','pptx'].indexOf(format) > -1) {
                      type = 'ios-videocam';
                  }
  
                  return type;
              },
              parsePercentage (val) {
                  return parseInt(val, 10);
              }
          }
3affd6f3   梁灏   init upload compo... 
92
93
 
      };
  </script>