Lx-UI

# 上传图片列表

# 介绍

上传图片列表主要功能

  • 上传图片
  • 展示图片列表
  • 拖拽改变顺序

# 示例

# 图片列表，非编辑模式

<template>
  <div>
    <lx-upload-image v-model="list" :is-edit="false">
      
    </lx-upload-image>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
          'http://gl.sanguosha.com/uploads/4/583d19d178e22.png',
          'http://gl.sanguosha.com/uploads/4/583cefb2f199c.png',
          'https://www.sanguosha.com/uploads/201611/581876dee9e52.jpg'
      ]
    }
  },
  methods: {
    
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# 图片列表，编辑模式，多图

<template>
  <div>
    <lx-upload-image v-model="list" :is-edit="true" :is-multi="true">
      
    </lx-upload-image>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
          'http://gl.sanguosha.com/uploads/4/583d19d178e22.png',
          'http://gl.sanguosha.com/uploads/4/583cefb2f199c.png',
          'https://www.sanguosha.com/uploads/201611/581876dee9e52.jpg'
      ]
    }
  },
  methods: {
    
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# 图片列表，编辑模式，单图

<template>
  <div>
    <lx-upload-image v-model="list">
      
    </lx-upload-image>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
          'http://gl.sanguosha.com/uploads/4/583d19d178e22.png',
      ]
    }
  },
  methods: {
    
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy

# 上传按钮：隐藏、替换

正常情况

隐藏上传按钮

slot替换上传按钮

slot替换上传按钮，并且不需要列表，仅作上传功能

<template>
  <div>
    <h3>正常情况</h3>
    <lx-upload-image v-model="list"
                     :is-multi="true"
                     :limit="10">
    </lx-upload-image>
    <h3>隐藏上传按钮</h3>
    <lx-upload-image v-model="list"
                     :is-multi="true"
                     :upload-btn-show="false"
                     :limit="10">
    </lx-upload-image>
    <h3>slot替换上传按钮</h3>
    <lx-upload-image v-model="list"
                     :is-multi="true"
                     :limit="10">
      <template #uploadButton>
        <el-button type="primary">上传</el-button>
      </template>
    </lx-upload-image>
    <h3>slot替换上传按钮，并且不需要列表，仅作上传功能</h3>
    <lx-upload-image>
      <template #uploadButton>
        <el-button type="primary">上传</el-button>
      </template>
    </lx-upload-image>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        'http://gl.sanguosha.com/uploads/4/583d19d178e22.png',
        'http://gl.sanguosha.com/uploads/4/583cefb2f199c.png',
        'https://www.sanguosha.com/uploads/201611/581876dee9e52.jpg'
      ]
    }
  },
  methods: {
    
  }
}
</script>
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
Expand Copy

# Upload-Image Attributes

参数 说明 数值类型 可选值 默认值 其他
v-model 数据 Array / String - -
is-edit 是否编辑模式 Boolean - true -
is-multi 是否可上传多张图片 Boolean - false -
limit 限制上传数量 Number - 1 -
limit-message 超过上传数量的提示消息 String - - -
show-index 是否显示图片序号 Boolean - true -
upload-btn-show 是否显示上传按钮 Boolean - true -
del-confirm 删除图片前是否提示 Boolean - true -
tips 注释 Object - - -
filedPrimaryKey 主键，如果v-model传入的是一个对象数组的时候，需要设置一个字段名称来取图片，否则组件不知道哪个字段是图片资源 String - - -
accept 允许上传的格式，可填多个，使用 “,” 隔开 String - - -
accept-message 格式错误时的提示消息 String - - -
width 图片框宽度 String - - -
height 图片框高度 String - - -
limit-width 限制：上传图片的宽度 Number - - -
limit-height 限制：上传图片的高度 Number - - -
limit-width-range 限制：上传图片的宽度范围 Array - - 例如：限制宽度700~1000，值为：[700, 1000]
limit-height-range 限制：上传图片的高度范围 Array - - 例如：限制高度300~600，值为：[300, 600]
aspectRatio 限制：上传图片的宽高比例 Array - [0, 0] 例如：限制比例为16:9，值为：[16, 9]
aspectRatioMessage 不符合宽高比例的提示文字 String - - -
事件名称 说明 回调参数
file-change 选择资源后的回调函数 File, FileList, options

# slot

slot名称 说明 其他
uploadButton 上传按钮 -

← 模态框 →