# material_center
素材中心弹框
# 安装
cnpm i @xiaoe/material_center_box -S
# 使用
# 引入
import MaterialBox from "@xiaoe/material_center_box";
import "@xiaoe/material_center_box/static/index.css";
// 可选
MaterialBox.setDefaults({
multiple: false, // 可选, 可在后面的参数中填写
zIndex: 7000 // 可选, 设置index, 避免被覆盖
});
Vue.use(MaterialBox); // 默认在vue原型上注册名为 $material
// Vue.use(MaterialBox, '$m') 第二个参数是注册名，选填
// Vue.prototype.$m 可以调用
// 组件内可以 this.$m 调用
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
# 调用
调用$material 方法即可打开素材弹框。窗口被关闭后，它默认会返回一个 Promise 对象便于进行后续操作的处理。若不确定浏览器是否支持 Promise，可自行引入第三方 polyfill。
<template>
<div class="container">
<!-- 默认打开为图片 -->
<div @click="open">默认打开</div>
<div @click="openPicture">打开图片</div>
<div @click="openAudio">打开音频</div>
<div @click="openVideo">打开视频</div>
<div @click="openEbook">打开电子书</div>
</div>
</template>
<script>
export default {
methods: {
open() {
let options = {
type: 'picture'
multiple: false,
showClose: false
//...
}
this.$material(options)
.then(res => {
console.log(res);
})
.catch(action => {
console.log(action);
});
},
openPicture() {
this.$material
.picture()
.then(console.log)
.catch(console.error);
},
openAudio() {
this.$material
.audio()
.then(console.log)
.catch(console.error);
},
openVideo() {
this.$material
.video()
.then(console.log)
.catch(console.error);
},
openEbook() {
this.$material
.ebook()
.then(console.log)
.catch(console.error);
}
}
};
</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
46
47
48
49
50
51
52
53
54
55
56
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
46
47
48
49
50
51
52
53
54
55
56
# 返回
默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮）时，Promise 的 reject 回调的参数分别为 'cancel' 和 'close'。
// Promise resolve 返回
res: {
// 具体返回字段可能会变，参数可参考接口文档http://doc.xiaoeknow.com/web/#/308?page_id=5254
data: [
// 视频
{
"id": 19,
"category_id": 4,
"material_id": "m_NiaU9BVt0pDoG_CS5BkkSG",
"title": "happy.mp4",
"url": "https://1500011955.vod2.myqcloud.com/6caa3c9dvodcq1500011955/3621ccf7387702299261545417/K2pAXK8RT2wA.mp4",
"type": 3,
"material_property": {
"length": 666,
"file_id": "yuki_example_file_id_x2"
},
"material_size": "23.83",
"refer_count": 0,
"view_count": 0,
"latest_view_at": null,
"created_at": "2020-01-08 13:01:23",
"state": 0,
"updated_at": "2020-01-08 13:01:23",
"sub_type": 0
},
// 图片
{
"id": 2,
"category_id": 1,
"material_id": "m_apTj3KJghlOk1_8SDI6P2k",
"title": "必看",
"url": "http://wechatapppro-1252524126.file.myqcloud.com/apppcHqlTPT3482/image/cmVzb3VyY2UtY291cnNlQXJ0aWNsZS02MTc2ODU2Nw.jpg",
"type": 1,
"material_property": {
"width": 400,
"height": 300
},
"material_size": "16.00",
"refer_count": 0,
"view_count": 0,
"latest_view_at": null,
"created_at": "2020-01-06 19:30:22",
"state": 0,
"updated_at": "2020-01-09 16:18:46",
"sub_type": 0
}
],
action: 'confirm'
}
// Promise reject 返回
res: "cancel"; // 'cancel' or 'close'
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
46
47
48
49
50
51
52
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
46
47
48
49
50
51
52
# 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 素材类型 | string | picture/audio/video/ebook | picture |
| showClose | 是否显示右上角关闭按钮 | boolean | — | true |
| multiple | 是否可以多选素材 | boolean | — | true |
| zIndex | css 层级 | number | — | 5000 |
| pageSize | 页容量 | number | — | 10 |
| onClose | 关闭时的回调（同步，无参数） | function | — | undefined |
| appId | 店铺 appid（正常情况下可不填，会获取默认 app_id） | string | — | window.__app_id |
| closeOnHashChange | 是否在 hashchange 时关闭 | boolean | — | true |
| checkRow | 是否点击行选取 | boolean | — | true |
# 方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| picture | 打开图片类型的弹框 | Options 参数 |
| audio | 打开音频类型的弹框 | Options 参数 |
| video | 打开视频类型的弹框 | Options 参数 |
| ebook | 打开电子书类型的弹框 | Options 参数 |
| close | 强制关闭弹框（无回调） | — |
| setDefaults | 修改默认参数，避免多个相同的参数重复调用 | Options 参数 |