JavaScript初探_7

发表于
字数统计 566 | 阅读时长 2

这一部分主要新增了Setting.vue以及对Form.vue进行了改动。

Setting.vue

主要功能有相片的上传（update），主要参照图片列表缩略图，同时加入了一些新的内容，例如判别图片类型是否合乎规范，上传张数是否超额等；另外一个功能为评分（rate），本来想用示例中笑脸的例子，可是当时安装element时没有void-icon-class所需要的库，所以改为了普通的星状，具体代码如下：

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
<template>
  <div>
    <el-row style="margin-top:20px;margin-bottom:80px">
      <div>请上传头像!</div>
      <el-upload class="upload-demo"
                 action="https://jsonplaceholder.typicode.com/posts/"
                 :before-upload="beforeAvatarUpload"
                 :on-success="handleSuccess"
                 :on-remove="handleRemove"
                 :before-remove="beforeRemove"
                 :limit="3"
                 :on-exceed="handleExceed"
                 :file-list="fileList2"
                 list-type="picture">
        <el-button size="small"
                   type="primary">点击上传</el-button>
        <div slot="tip"
             class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%"
             :src="dialogImageUrl"
             alt="">
      </el-dialog>

    </el-row>
    <div>请对本系统进行评分！</div>
    <el-rate v-model="value"
             show-text>
    </el-rate>

  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      fileList2: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
    };
  },
  methods: {
    // 判断上传文件类型
    beforeAvatarUpload: function (file) {
      var me = this
      var isJPG = file.type === 'image/jpeg'
      var isPNG = file.type === 'image/png'
      if (!(isJPG || isPNG)) {
        me.$message.error('上传的文件只能是 JPG 或者是 PNG 格式的')
      }
      else me.handlePreview(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 文件超出个数限制时的钩子
    handleExceed(file, fileList) {
      const me = this
      me.$message.warning('只能上传一个文件')
    },
    //确认删除
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //上传成功
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  }
}
</script>

Form.vue

以上。

注：转载文章请注明出处，谢谢~