background
Development programs need to use small nails modal box documentation also do not own a ...
This kind of effect is probably long
click on the indicated button to bring up the modal box, the contents of which can be customized, can be a simple text prompts, you can enter a complex layout boxes and so on. Done, click Cancel or OK to close.
Start package
Shown above items can be placed in the file contents (the path to their own pleasure)
modal.js
The contents are the essence of a small but
/**
* 自定义modal浮层
* 使用方法：
* <modal show="{{showModal}}" height='80%' onCancel="modalCancel" onSubmit='modalSubmit'>
<view>你自己需要展示的内容</view>
</modal>
属性说明：
show： 控制modal显示与隐藏
height：modal的高度
onCancel：点击取消按钮的回调函数
onSubmit：点击确定按钮的回调函数
*/
Component({
/**
* 组件的属性列表
*/
props: {
// modal的默认高度
height: '60%',
//是否显示modal
show: false,
// submit()
onSubmit:(data) => console.log(data),
// onCancel()
onCancel:(data) => console.log(data),
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
clickMask() {
// this.setData({show: false})
},
cancel(e) {
// this.setData({ show: false });
this.props.onCancel(e);
},
submit(e) {
// this.setData({ show: false });
this.props.onSubmit(e);
}
}
})
- 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
- 57
- 58
- 59
- 60
- 61
Use Code props Property is set to the default value property, call the specified value to pass the time
modal.json
This is what is not is a declared
{
"component": true,
"usingComponents": {}
}
- 1
- 2
- 3
- 4
Developers need to specify rely on custom components in .json file
modal.acss
I write this stuff back end of a tune for a long time barely see my hair go seek revision Gangster
.mask{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.4);
z-index: 9999;
}
.modal-content{
flex-direction: column;
width: 90%;
/* height: 80%; */
position: fixed;
top: 10%;
left: 5%;
background-color: #fff;
border-radius: 10rpx;
}
.modal-btn-wrapper{
display: flex;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
background-color: #fff;
border-radius: 10rpx;
border-top: 2rpx solid rgba(7,17,27,0.1);
}
.cancel-btn, .confirm-btn{
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.cancel-btn{
border-right: 2rpx solid rgba(7,17,27,0.1);
}
.main-content{
flex: 1;
height: 100%;
overflow-y: hidden;
}
- 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
modal.axml
Knock Key slot label
slot can be understood as slots, default slot is the default slot, if the caller does not pass axml between components label, the final slot will be rendered by default. If the caller has passed between components axml tag, which is used instead of the default slot, and thus the final assembly of axml for rendering.
In short, when you call the edited axml are stuffed inside a slot
<view class='mask' a:if='{{show}}' onTap='clickMask'>
<view class='modal-content' style='height:{{height}}'>
<scroll-view scroll-y class='main-content'>
<slot></slot>
</scroll-view>
<view class='modal-btn-wrapper'>
<view class='cancel-btn' style='color:rgba(7,17,27,0.6)' onTap='cancel'>取消</view>
<view class='confirm-btn' style='color:#13b5f5' onTap='submit'>确定</view>
</view>
</view>
</view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
use
This relatively simple birds
page/xx/page.json
State clearly that I want to call this component tag name I call myself no mistake like modal path
{
"usingComponents": {
"modal": "/page/components/modal/modal"
}
}
- 1
- 2
- 3
- 4
- 5
page/xx/page.axml
Is such meow ~
<modal show="{{showSearchModal}}" height='80%' onCancel="searchModalCancel" onSubmit='searchModalSubmit'>
<view>你自己的布局</view>
</modal>
- 1
- 2
- 3
page/xx/page.js
This you do write your own logic gone wrong with
let app = getApp();
Page({
data: {
showSearchModal: false,
},
onLoad() {
},
searchModalCancel(){
this.setData({
showSearchModal: false,
});
dd.alert({
title: '提示',
content: '用户点击了取消',
});
},
searchModalSubmit(){
this.setData({
showSearchModal: false,
});
dd.alert({
title: '提示',
content: '用户点击了提交',
buttonText: '我知道了',
});
},
});
- 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
summary
Excited heart, trembling hands. . .
In summary read the official document
nail open platform => front-end API => Applets => Frame => custom components
https://ding-doc.dingtalk.com/doc#/dev/develop-custom-component
This case is relatively simple, complex business needs to see the document basically able to achieve.
Welcome thumbs collection ...