上图

支持版本

>=0.2.0

说明

支持自定义弹窗标题，按钮使用Element默认样式，会跟随自定义Element主题变化而变化

起步

在需要引用的地方直接引用组件AntImageDialog

<AntImageDialog
      :atitle="imagetitle"
      :dialog-visible="imgShowDialog"
      @dialog-cancel="imgShowDialog = false"
      @antClick="antClickImg"
      :ant-data="imageData"
      rootUrl="http://file-wxunpor.heikeit.com/"
    ></AntImageDialog>
<el-button type="primary" @click="imgShowDialog = true" size="mini" >弹出图片选择器</el-button>

// DATA设置
data(){
    return {
        imgShowDialog: false, // 控制弹窗是否显示
        imageData:[]
        imagetitle: "图片选择器",
    }
}

参数说明

参数 类型 说明
dialog-visible Boolean 控制弹窗是否显示，默认false
atitle String 弹窗的标题
ant-data Array 传入的数组，也是弹窗内容数据渲染需要用到的接口参数
rootUrl String 图片地址根地址

ant-data 数组参数说明

ant-data以json的方式给组件传递每个接口的地址和参数，下面我们会一点点跟大家详细介绍

数据

下面我们先给大家来一个简单的数据Demo，基本包含所有数据了，接一个接口要求在后面详细说明

{
  "data": {
    "getBox": {  //  获取左侧分组的接口参数
      "url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/getBoxAll",   // 请求URL
      "parame": {},  // 请求额外参数
      "headers": { "uniacid": "2" }  // 请求头
    },
    "getImage": {   //  分页获取图片的接口参数
      "url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/getImagesByBoxidAndPage",   // 请求URL
      "parame": {},   // 请求额外参数
      "headers": { "uniacid": "2" }  // 请求头
    },
    "saveImageBox": {  //  新增分组或者修改分组标题的接口参数
      "url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/saveBox",  // 请求URL
      "parame": {},   // 请求额外参数
      "headers": { "uniacid": "2" }   // 请求头
    },
    "delImageBox": {  //  删除图片分组的接口参数
      "url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/delBox",  // 请求URL
      "parame": {},  // 请求额外参数
      "headers": { "uniacid": "2" }  // 请求头
    },
    "updateImage": {    //  上传图片的接口参数
      "url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Memory/uploadfile",  // 请求URL
      "parame": {},  // 请求额外参数
      "headers": { "uniacid": "2" },  // 请求头
    },
    "delImage": {  // 删除图片的接口参数
      "url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/delImagesByid",  // 请求URL
      "parame": {},   // 请求额外参数
      "headers": { "uniacid": "2" }  // 请求头
    }
  }
}

说明

注意：接口需要自己处理跨域问题，组件中使用的是POST请求，你的接口返回值需要严格按照下面的方式返回，下面展示的额外请求参数是指除了用户自己在接口中输入的parame，组件额外会给接口传递的参数，如果没有写，则说明该接口组件不会额外传递参数，返回值中如果有其他参数需要返回的可以自己返回吗，但是组件需要的信息和格式，必须完全匹配！

[getBox]-获取左侧分组的接口参数

返回参数：

参数 说明 类型
code 状态码，必须是0，否则组件默认接口请求不成功 Number
date 数据 Object
>>-id 唯一id int/String
>>-name 分组名称 String

[getImage]- 分页获取图片的接口参数

额外请求参数：

参数 说明 类型
id 分组ID，如果分组ID为空，或者分组id=0，都说明获取全部图片 int/String
limit 每页显示条数，为了美观，固定设置的15，不能单独设置 int
page 当前页 int
search 搜索关键词 String

返回参数：

参数 说明 类型
code 状态码，必须是0，否则组件默认接口请求不成功 Number
date 数据 Object
>>-list 列表 Array
>>>>-id 突破唯一ID int/String
>>>>-name 图片名称 String
>>>>-url 图片相对路径，会拼接rootUrl展示 String
>>>>-high 图片相对高度 int
>>>>-width 图片相对宽度 int
>>-total 列表总条数用于分页 Number

[saveImageBox]- 新增分组或者修改分组标题的接口参数

额外请求参数：

参数 说明 类型
id 需要删除的分组ID int/String

返回参数：

参数 说明 类型
code 状态码，必须是0，否则组件默认接口请求不成功 Number
date 正确信息提示 String
msg 错误信息提示 String

[delImageBox]- 删除图片分组的接口参数

额外请求参数：

参数 说明 类型
id 图片分组ID int/String

返回参数：

参数 说明 类型
code 状态码，必须是0，否则组件默认接口请求不成功 Number
date 正确信息提示 String
msg 错误信息提示 String

[updateImage]- 上传图片的接口参数

额外请求参数：

参数 说明 类型
file 上传的文件 FromData

返回参数：

参数 说明 类型
code 状态码，必须是0，否则组件默认接口请求不成功 Number
date 正确信息提示 String
msg 错误信息提示 String

[delImage]- 删除图片的接口参数

额外请求参数：

参数 说明 类型
id 图片ID int/String

返回参数：

参数 说明 类型
code 状态码，必须是0，否则组件默认接口请求不成功 Number
date 正确信息提示 String
msg 错误信息提示 String

方法

参数 说明
@dialog-cancel 点击弹窗右上角的关闭时候出发，必须是修改绑定的参数@dialog-cancel=”showDialog = false”这里的showDialog可以自己定义
@antClick 点击了确认之后没，出发事件

@antClick 返回值说明

antClick(e) {
    console.log("弹窗返回值：", e);
}

返回值是一个json

参数 说明 类型 区别
root 图片地址根地址 String 一定存在
img 图片信息 Object 一定存在
>>-id 突破唯一ID int/String
>>-name 图片名称 String
>>-url 图片相对路径，会拼接rootUrl展示 String
>>-high 图片相对高度 int
>>-width 图片相对宽度 int
文档更新时间: 2020-10-27 10:56   作者：admin