§ Layer 弹出框
§ fox.layer
弹出框组件
§ alert
fox.layer.open('alert测试')
1
§ 信息框
fox.layer.open({
content: '我是简单的弹出框',
btn: '我知道了',
})
1
2
3
4
2
3
4
§ 提示
fox.layer.open({
content: 'hello layer',
skin: 'msg',
anim: 'up',
time: 2, // 2秒后自动关闭
})
1
2
3
4
5
6
2
3
4
5
6
§ 询问框
fox.layer.open({
content: '是否刷新页面吗？',
btn: ['刷新', '不要'],
yes: function (index) {
location.reload()
fox.layer.close(index)
},
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
§ 底部对话框
fox.layer.open({
content: '',
btn: ['选择照片', '删除', '取消'],
// ,btn: ['删除', '取消']
skin: 'footer',
anim: 'up',
action: [
function (index) {
fox.layer.open({ content: '执行选择操作' })
},
function (index) {
fox.layer.open({ content: '执行删除操作' })
},
function (index) {
fox.layer.open({ content: '执行取消操作' })
},
],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
§ 底部提示
fox.layer.open({
content: '一个没有任何按钮的底部提示',
anim: 'up',
skin: 'footer',
})
1
2
3
4
5
2
3
4
5
§ 自定义标题风格
fox.layer.open({
title: [
'我是标题',
'background-color: #FF4351; color:#fff;',
],
content: '标题风格任你定义。',
})
1
2
3
4
5
6
7
2
3
4
5
6
7
§ 页面层
fox.layer.open({
type: fox.layer.Custom,
content: '可传入任何内容，支持html。一般用于手机页面中',
style: 'position:fixed; bottom:0; left:0; max-width:100%; width: 100%; height: 200px; padding:10px 0; border:none; background-color:#fff',
})
1
2
3
4
5
2
3
4
5
§ loading层
fox.layer.open({ type: fox.layer.Cover })
1
§ loading带文字
fox.layer.open({
type: fox.layer.Cover,
content: '加载中',
shadeClose: false,
})
1
2
3
4
5
2
3
4
5
§ 自定义对话框
把知道id的div，嵌入到弹出对话框
js
this.index = fox.layer.open({
type: 1,
content: '#investigation',
success: function () {
},
})
1
2
3
4
5
6
7
2
3
4
5
6
7
html
<fox-dialog title="在库押品列表" id="investigation" :options="{width:'60rem',height:'35rem'}">
<fox-page>
<fox-footer>
<fox-button style="margin-right: 2rem">查询</fox-button>
<fox-button style="margin-right: 2rem">保存</fox-button>
<fox-button @tap="closeDg">取消</fox-button>
</fox-footer>
<fox-content-padded class="scrollBar">
<fox-group>
<fox-text>抵押人名称</fox-text>
<fox-text>抵押人名称</fox-text>
<fox-text>抵押人名称</fox-text>
</fox-group>
</fox-content-padded>
</fox-page>
</fox-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
§ API
§ 方法
通过 ref 可以获取到实例并调用实例方法
| 方法名 | 说明 |
|---|---|
| open | 显示对话框 |
| close | 关闭对话框 |