AMS文档

# Imagelist 图片列表

# 基础用法

默认是带有图片的模式。

暂无数据
{
  "type": "imagelist",
  "resource": {
    "api": {
      "prefix": "https://nei.netease.com/api/apimock/b7c10125b452d3142d8375cf634f0b47/ams/mock/",
      "list": "imagelist"
    },
    "fields": {
      "id": {
        "type": "text"
      }
    }
  },
  "operations": {
    "id": {
      "slot": "searchs",
      "type": "field",
      "label": "文本"
    },
    "search": {
      "slot": "searchs",
      "type": "button",
      "props": {
        "type": "primary"
      },
      "label": "搜索",
      "event": "list:1"
    },
    "rejectedItem": {
      "type": "text",
      "props": {
        "type": "danger",
        "size": "mini"
      },
      "label": "驳回"
    },
    "rejectedItem1": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(设计)"
    },
    "rejectedItem2": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(协助)"
    },
    "deleteItem": {
      "type": "button",
      "props": {
        "size": "mini",
        "type": "text",
        "icon": "el-icon-delete"
      }
    },
    "editItem": {
      "type": "icon",
      "label": "编辑",
      "icon": "el-icon-edit"
    }
  },
  "pageSize": 10,
  "props": {},
  "events": {
    "init": "@list"
  },
  "actions": {
    "rejectedItem": function() {
      alert("点击了驳回")
    },
    "rejectedItem1": function() {
      alert("通过(设计)")
    },
    "clickImageItem": function(e) {
      console.log(e), alert("点击图片")
    },
    "editItem": function() {
      alert("点击了编辑")
    }
  },
  "options": {
    "title": {
      "field": "title",
      "prefix-tag": {
        "type": "info",
        "label": function(e) {
          return e.status
        }
      }
    },
    "subtitle": {
      "field": "content"
    },
    "info": {
      "field": "info"
    }
  }
}
显示配置 在线运行

# 没有图片

options: {
    imageText: { // imageSrc不存在，则认为是无图列表模式，图片显示的位置显示该文案
        field: 'name'
    }
}
暂无数据
{
  "type": "imagelist",
  "resource": {
    "api": {
      "prefix": "https://nei.netease.com/api/apimock/b7c10125b452d3142d8375cf634f0b47/ams/mock/",
      "list": "imagelist2"
    },
    "fields": {
      "id": {
        "type": "text"
      }
    }
  },
  "operations": {
    "id": {
      "slot": "searchs",
      "type": "field",
      "label": "文本"
    },
    "search": {
      "slot": "searchs",
      "type": "button",
      "props": {
        "type": "primary"
      },
      "label": "搜索",
      "event": "list:1"
    },
    "rejectedItem": {
      "type": "text",
      "props": {
        "type": "danger",
        "size": "mini"
      },
      "label": "驳回"
    },
    "rejectedItem1": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(设计)"
    },
    "rejectedItem2": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(协助)"
    },
    "deleteItem": {
      "type": "button",
      "props": {
        "size": "mini",
        "type": "text",
        "icon": "el-icon-delete"
      }
    },
    "editItem": {
      "type": "icon",
      "label": "编辑",
      "icon": "el-icon-edit"
    }
  },
  "props": {},
  "events": {
    "init": "@list"
  },
  "actions": {
    "rejectedItem": function() {
      alert("点击了驳回")
    },
    "rejectedItem1": function() {
      alert("通过(设计)")
    },
    "clickImageItem": function(e) {
      console.log(e), alert("点击图片")
    },
    "editItem": function() {
      alert("点击了编辑")
    }
  },
  "options": {
    "title": {
      "field": "title",
      "prefix-tag": {
        "type": "info",
        "label": function(e) {
          return e.status
        }
      }
    },
    "subtitle": {
      "field": "content"
    },
    "info": {
      "field": "info"
    }
  }
}
显示配置 在线运行

# 没有图片下面的标题信息

接口直接不返回 title 和 info 字段，或者配置 options.title 和 options.info 同时为false。

注意：不显示标题信息块，批量操作的多选框也无法显示。

options: {
    title: false,
    info: false
}
暂无数据
{
  "type": "imagelist",
  "resource": {
    "api": {
      "prefix": "https://nei.netease.com/api/apimock/b7c10125b452d3142d8375cf634f0b47/ams/mock/",
      "list": "imagelist"
    },
    "fields": {
      "id": {
        "type": "text"
      }
    }
  },
  "operations": {
    "id": {
      "slot": "searchs",
      "type": "field",
      "label": "文本"
    },
    "search": {
      "slot": "searchs",
      "type": "button",
      "props": {
        "type": "primary"
      },
      "label": "搜索",
      "event": "list:1"
    },
    "rejectedItem": {
      "type": "text",
      "props": {
        "type": "danger",
        "size": "mini"
      },
      "label": "驳回"
    },
    "rejectedItem1": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(设计)"
    },
    "rejectedItem2": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(协助)"
    },
    "deleteItem": {
      "type": "button",
      "props": {
        "size": "mini",
        "type": "text",
        "icon": "el-icon-delete"
      }
    },
    "editItem": {
      "type": "icon",
      "label": "编辑",
      "icon": "el-icon-edit"
    }
  },
  "pageSize": 10,
  "events": {
    "init": "@list"
  },
  "actions": {
    "rejectedItem": function() {
      alert("点击了驳回")
    },
    "rejectedItem1": function() {
      alert("通过(设计)")
    },
    "clickImageItem": function(e) {
      console.log(e), alert("点击图片")
    },
    "editItem": function() {
      alert("点击了编辑")
    }
  },
  "options": {
    "title": false,
    "subtitle": {
      "field": "content"
    },
    "info": false
  }
}
显示配置 在线运行

# 多选批量操作

配置 operations，注意 operations.showBatch（显示所有批量操作按钮）、operations.hideBatch（隐藏所有批量操作按钮）这两个是内置了action

暂无数据
{
  "type": "imagelist",
  "resource": {
    "api": {
      "prefix": "https://nei.netease.com/api/apimock/b7c10125b452d3142d8375cf634f0b47/ams/mock/",
      "list": "imagelist"
    },
    "fields": {
      "id": {
        "type": "text"
      }
    }
  },
  "operations": {
    "showBatch": {
      "slot": "multipleSelect",
      "type": "button",
      "label": "批量操作",
      "show": function() {
        return !this.showBatchOperations
      }
    },
    "batchPassItems": {
      "slot": "multipleSelect",
      "type": "button",
      "label": "批量通过",
      "show": function() {
        return this.showBatchOperations
      }
    },
    "batchRejectedItems": {
      "slot": "multipleSelect",
      "type": "button",
      "label": "批量驳回",
      "show": function() {
        return this.showBatchOperations
      }
    },
    "hideBatch": {
      "slot": "multipleSelect",
      "type": "button",
      "label": "退出",
      "show": function() {
        return this.showBatchOperations
      }
    },
    "buttonMulti": {
      "type": "button",
      "props": {
        "size": "mini",
        "type": "text",
        "icon": "el-icon-delete"
      }
    }
  },
  "pageSize": 10,
  "props": {},
  "events": {
    "init": "@list"
  },
  "actions": {
    "batchPassItems": function() {
      this.batchSelected.length ? console.log(this.batchSelected) : this.$message.error("请先勾选数据"), console.log("批量通过")
    },
    "batchRejectedItems": function() {
      this.batchSelected.length ? console.log(this.batchSelected) : this.$message.error("请先勾选数据"), console.log("批量驳回")
    }
  },
  "options": {
    "imageSrc": {
      "field": "image"
    },
    "title": {
      "field": "title",
      "prefix-tag": {
        "type": "info",
        "label": function(e) {
          return e.status
        }
      }
    },
    "subtitle": {
      "field": "content"
    },
    "info": {
      "field": "info"
    }
  }
}
显示配置 在线运行

# slotBlocks 插槽配置

  • 搜索条顶部：配置子block的slot为top，可以插入到搜索条顶部

  • 搜索条和表格之间：配置子block的slot为tableTop，可以插入到搜索条和表格之间

我是图片列表区块最顶部的插槽内容！！
我是图片列表区块图片顶部的插槽内容！！
暂无数据
{
  "type": "imagelist",
  "resource": {
    "api": {
      "prefix": "https://nei.netease.com/api/apimock/b7c10125b452d3142d8375cf634f0b47/ams/mock/",
      "list": "imagelist"
    },
    "fields": {
      "id": {
        "type": "text"
      }
    }
  },
  "operations": {
    "id": {
      "slot": "searchs",
      "type": "field",
      "label": "文本"
    },
    "search": {
      "slot": "searchs",
      "type": "button",
      "props": {
        "type": "primary"
      },
      "label": "搜索",
      "event": "list:1"
    },
    "rejectedItem": {
      "type": "text",
      "props": {
        "type": "danger",
        "size": "mini"
      },
      "label": "驳回"
    },
    "rejectedItem1": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(设计)"
    },
    "rejectedItem2": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(协助)"
    },
    "deleteItem": {
      "type": "button",
      "props": {
        "size": "mini",
        "type": "text",
        "icon": "el-icon-delete"
      }
    },
    "editItem": {
      "type": "icon",
      "label": "编辑",
      "icon": "el-icon-edit"
    }
  },
  "pageSize": 10,
  "events": {
    "init": "@list"
  },
  "actions": {
    "rejectedItem": function() {
      alert("点击了驳回")
    },
    "rejectedItem1": function() {
      alert("通过(设计)")
    },
    "clickImageItem": function(e) {
      console.log(e), alert("点击图片")
    },
    "editItem": function() {
      alert("点击了编辑")
    }
  },
  "options": {
    "title": {
      "field": "title",
      "prefix-tag": {
        "type": "info",
        "label": function(e) {
          return e.status
        }
      }
    },
    "subtitle": {
      "field": "content"
    },
    "info": {
      "field": "info"
    }
  },
  "blocks": {
    "listTop": {
      "type": "component",
      "options": {
        "is": "div",
        "text": "我是图片列表区块最顶部的插槽内容！！"
      },
      "style": {
        "padding": "20px",
        "marginBottom": "20px",
        "border": "1px solid #3eaf7c"
      },
      "slot": "top"
    },
    "listTableTop": {
      "type": "component",
      "options": {
        "is": "div",
        "text": "我是图片列表区块图片顶部的插槽内容！！"
      },
      "style": {
        "padding": "20px",
        "border": "1px solid #f60"
      },
      "slot": "tableTop"
    }
  }
}
显示配置 在线运行

# 手动插入分类名称

只实现了比较简单（和接口约定，知道在哪插入分类名）死板的插入分类方式。如果要求灵活的，建议分多个图片列表区块，每个区块根据分类查询条件从接口获取对应数据。

options: {
    categorys: [{ // 分类
        title: '90后', // 分类名称
        index: 0 // 插入分类的位置
    }, {
        title: '80后',
        index: 3
    }, {
        title: '70后',
        index: 4
    }]
}
暂无数据
{
  "type": "imagelist",
  "resource": {
    "api": {
      "prefix": "https://nei.netease.com/api/apimock/b7c10125b452d3142d8375cf634f0b47/ams/mock/",
      "list": "imagelist"
    },
    "fields": {
      "id": {
        "type": "text"
      }
    }
  },
  "operations": {
    "id": {
      "slot": "searchs",
      "type": "field",
      "label": "文本"
    },
    "search": {
      "slot": "searchs",
      "type": "button",
      "props": {
        "type": "primary"
      },
      "label": "搜索",
      "event": "list:1"
    },
    "rejectedItem": {
      "type": "text",
      "props": {
        "type": "danger",
        "size": "mini"
      },
      "label": "驳回"
    },
    "rejectedItem1": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(设计)"
    },
    "rejectedItem2": {
      "type": "text",
      "props": {
        "size": "mini"
      },
      "label": "通过(协助)"
    },
    "deleteItem": {
      "type": "button",
      "props": {
        "size": "mini",
        "type": "text",
        "icon": "el-icon-delete"
      }
    },
    "editItem": {
      "type": "icon",
      "label": "编辑",
      "icon": "el-icon-edit"
    }
  },
  "pageSize": 10,
  "events": {
    "init": "@list"
  },
  "actions": {
    "rejectedItem": function() {
      alert("点击了驳回")
    },
    "rejectedItem1": function() {
      alert("通过(设计)")
    },
    "clickImageItem": function(e) {
      console.log(e), alert("点击图片")
    },
    "editItem": function() {
      alert("点击了编辑")
    }
  },
  "options": {
    "title": {
      "field": "title",
      "prefix-tag": {
        "type": "info",
        "label": function(e) {
          return e.status
        }
      }
    },
    "subtitle": {
      "field": "content"
    },
    "info": {
      "field": "info"
    },
    "categorys": [{
      "title": "90后",
      "index": 0
    }, {
      "title": "80后",
      "index": 3
    }, {
      "title": "70后",
      "index": 4
    }]
  }
}
显示配置

# 配置

显示数据的字段配置：

options: { // 可以通过options设置显示内容映射的字段名
    imageSrc: { // 图片地址（默认为list的image），如果没有image字段且没指定的其它字段，则认为是无图列表模式
        field: 'imagexxx' // 默认是取image字段，也可以在这指定其它字段
    },
    imageText: { // 无图模式时，图片的位置显示的文案
        field: 'imageText' // 默认是取imageText字段，也可以在这指定其它字段
    }
    title: { // 主标题（默认：list的title）
        field: 'title', // 或在这指定其它字段
        // 'prefix-icon': 'el-icon-search' // 主标题前显示icon
        'prefix-tag': { // 主标题显示tag标签
            type: 'info', // success | info | warning | danger
            label(args) { // 标签内容，args是当前list-item的所有信息
                return args.status;
            }
        }
    },
    subtitle: { // 副标题（默认：list的subtitle）
        field: 'content' // 或在这指定其它字段
    },
    info: { // 主标题右边的信息（默认：list的info）
        field: 'info' // 或在这指定其它字段
    },
    subscript: { // 右下角角标（默认：list的subscript）
        field: 'info' // 或在这指定其它字段
    }
}

操作栏（没有配置slot的操作都会会显示列表每一项的这左上角）：

operations: {
    rejectedItem: {
        type: 'text', // 文字类型
        props: {
            type: 'danger', // 可设置状态
            size: 'mini',
        },
        label: '驳回'
    },
    rejectedItem2: {
        type: 'text', // 文字类型
        props: {
            size: 'mini',
        },
        label: '通过(协助)'
    },
    deleteItem: {
        type: 'button', // icon类型的按钮
        props: {
            size: 'mini',
            icon: 'el-icon-delete'
        }
    },
    editItem: {
        type: 'icon', // hover时会带提示的icon
        label: '编辑',
        icon: 'el-icon-edit'
    }
}
参数 说明 类型 可选值 默认值
type block类型 string imagelist --
ctx 状态，可取值 string view --
resource 依赖资源 string / object -- --
operations 可操作项（没有配置slot的操作都会会显示列表每一项的这左上角） object -- --
options 可以设置显示内容映射的字段名 object -- --
props 辅助配置 object -- --
props.shadow 辅助配置 object hover / always / never hover
props.subtitle 辅助配置 object hover / always hover
props.pagination 前端模拟分页 string simulate --

← Table 表格 →