# ive-edit-modal
# 一、代码示例
# html
<template>
<div>
<ive-edit-modal
ref="modal"
:id="id"
:modal="modal"
:formConfig.sync="formConfigEdit"
:getDetailApi="getDetailApi()"
:editApi="editApi()"
@close="hideEditModal"
@success="editSuccess"
/>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# js
export default {
data() {
return {
id: 1,
modal: false,
formConfigEdit: [
{
prop: 'title',
label: '消息标题',
},
{
prop: 'jumpType',
label: '跳转类型',
itemConfig: {
tagName: 'ive-select',
props: {
options: [1, 2],
},
on: {
input: (e) => {
console.log(e);
}
}
},
},
],
}
},
methods: {
getDetailApi() {
return axios.get;
},
editApi() {
return axios.post;
},
hideEditModal() {
this.modal = false;
this.id = '';
},
editSuccess() {
console.log('编辑成功');
this.hideEditModal();
},
}
}
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
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
# 二、属性、事件及方法说明
# 属性（props）
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 编辑弹窗本身宽度 | Number | 570 |
| id | 被编辑对象的标识 | String | Number | '' |
| modal | 编辑弹窗是否展示 | Boolean | false |
| title | 编辑弹窗标题 | String | 编辑弹框 |
| formConfig | 同ive-edit-form | Array | [] |
| hideConfig | 同ive-edit-form | Array | [] |
| getDetailApi | 根据id获取编辑对象详情 | Function | null |
| editApi | 根据id编辑详情 | Function | null |
| labelWidth | 表单控件label宽度 | Number | 80 |
# 事件（events）
| 事件名 | 说明 | 返回值 |
|---|---|---|
| close | 用户关闭弹窗时触发 | 无 |
| update:formConfig | 同ive-edit-form | 无 |
| update:hideConfig | 同ive-edit-form | 无 |
| success | editApi已配置并且用户编辑成功时触发 | 表单数据集合 |
| submit | 用户点击弹窗确定按钮，并且editApi未配置时触发 | 无 |
# 方法（methods）
| 方法名 | 说明 |
|---|---|
| validateField | 同ive-edit-form |