上图

支持版本
>=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",
"parame": {},
"headers": { "uniacid": "2" }
},
"getImage": {
"url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/getImagesByBoxidAndPage",
"parame": {},
"headers": { "uniacid": "2" }
},
"saveImageBox": {
"url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/saveBox",
"parame": {},
"headers": { "uniacid": "2" }
},
"delImageBox": {
"url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/delBox",
"parame": {},
"headers": { "uniacid": "2" }
},
"updateImage": {
"url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Memory/uploadfile",
"parame": {},
"headers": { "uniacid": "2" },
},
"delImage": {
"url": "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Images/delImagesByid",
"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(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