init
This commit is contained in:
30
xhs-mini-demos/api-case/modal/modal.css
Normal file
30
xhs-mini-demos/api-case/modal/modal.css
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
.btn-area > view {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.model-title {
|
||||
font-size: 12px;
|
||||
padding-bottom: 16px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.model-title text:first-child {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.model-title text:last-child {
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.setting-title {
|
||||
font-size: 12px;
|
||||
padding-bottom: 16px;
|
||||
color: #858585;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
132
xhs-mini-demos/api-case/modal/modal.js
Normal file
132
xhs-mini-demos/api-case/modal/modal.js
Normal file
@@ -0,0 +1,132 @@
|
||||
const __templateJs = require("./templates.js");
|
||||
const __mergePageOptions = require("../../util/mergePageOptions.js");
|
||||
Page(__mergePageOptions({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '模态弹窗',
|
||||
path: 'packageAPI/pages/modal/modal'
|
||||
};
|
||||
},
|
||||
data: {
|
||||
title: '弹窗标题',
|
||||
content: '弹框内容',
|
||||
cancelText: '取消文字',
|
||||
cancelTextColor: '#ff0000',
|
||||
apiData: {
|
||||
content: '',
|
||||
success: false,
|
||||
fail: false,
|
||||
complete: false
|
||||
}
|
||||
},
|
||||
handleTitleInput(e) {
|
||||
this.setData({
|
||||
title: e.detail.value
|
||||
});
|
||||
},
|
||||
handleContentInput(e) {
|
||||
this.setData({
|
||||
content: e.detail.value
|
||||
});
|
||||
},
|
||||
handleCancelTextInput(e) {
|
||||
this.setData({
|
||||
cancelText: e.detail.value
|
||||
});
|
||||
},
|
||||
handleCancelTextColorInput(e) {
|
||||
this.setData({
|
||||
cancelTextColor: e.detail.value
|
||||
});
|
||||
},
|
||||
resetApiData() {
|
||||
this.setData({
|
||||
apiData: {
|
||||
success: false,
|
||||
fail: false,
|
||||
complete: false,
|
||||
content: ''
|
||||
}
|
||||
});
|
||||
},
|
||||
updateApiData(type, content) {
|
||||
const apiData = {
|
||||
...this.data.apiData
|
||||
};
|
||||
apiData[type] = true;
|
||||
apiData.content = content;
|
||||
this.setData({
|
||||
apiData
|
||||
});
|
||||
},
|
||||
common(config) {
|
||||
this.resetApiData();
|
||||
xhs.showModal({
|
||||
...config,
|
||||
success: res => {
|
||||
this.updateApiData('success', res);
|
||||
},
|
||||
fail: res => {
|
||||
this.updateApiData('fail', res);
|
||||
},
|
||||
complete: res => {
|
||||
this.updateApiData('complete', res);
|
||||
}
|
||||
});
|
||||
},
|
||||
noTitlemodalTap() {
|
||||
this.common({
|
||||
content: this.data.content,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
modalTap() {
|
||||
this.common({
|
||||
title: this.data.title
|
||||
});
|
||||
},
|
||||
modalTap1() {
|
||||
this.common({
|
||||
title: this.data.title,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
modalTap2() {
|
||||
this.common({
|
||||
title: this.data.title,
|
||||
cancelText: this.data.cancelText
|
||||
});
|
||||
},
|
||||
modalTap3() {
|
||||
this.common({
|
||||
title: this.data.title,
|
||||
cancelColor: this.data.cancelTextColor
|
||||
});
|
||||
},
|
||||
modalTap4() {
|
||||
this.common({
|
||||
title: this.data.title,
|
||||
confirmText: '确认文字'
|
||||
});
|
||||
},
|
||||
modalTap5() {
|
||||
this.common({
|
||||
title: this.data.title,
|
||||
confirmColor: '#00ff00'
|
||||
});
|
||||
},
|
||||
modalTap6() {
|
||||
this.common({
|
||||
title: this.data.title,
|
||||
editable: true,
|
||||
placeholderText: 'placeholderText'
|
||||
});
|
||||
},
|
||||
modalTap7() {
|
||||
this.common({
|
||||
title: this.data.title,
|
||||
editable: true,
|
||||
placeholderText: 'this is default'
|
||||
});
|
||||
}
|
||||
}, __templateJs));
|
||||
8
xhs-mini-demos/api-case/modal/modal.json
Normal file
8
xhs-mini-demos/api-case/modal/modal.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "模态弹窗",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index",
|
||||
"api-status": "../../common/component/api-status/index"
|
||||
}
|
||||
}
|
||||
39
xhs-mini-demos/api-case/modal/modal.xhsml
Normal file
39
xhs-mini-demos/api-case/modal/modal.xhsml
Normal file
@@ -0,0 +1,39 @@
|
||||
<view class="container">
|
||||
<showbox title="基础使用">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
<view class="model-title">
|
||||
<text>带标题的双操作弹窗</text>
|
||||
<text>点击下方按钮触发</text>
|
||||
</view>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="modalTap">触发</button>
|
||||
</view>
|
||||
<view>
|
||||
<view class="model-title">
|
||||
<text>带标题的单操作弹窗</text>
|
||||
<text>点击下方按钮触发</text>
|
||||
</view>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="modalTap1">触发</button>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="model-title">
|
||||
<text>无标题的单操作弹窗</text>
|
||||
<text>点击下方按钮触发</text>
|
||||
</view>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="noTitlemodalTap">触发</button>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
<showbox title="输入型弹窗">
|
||||
<box>
|
||||
<view class="setting-title">
|
||||
点击下方按钮触发
|
||||
</view>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="modalTap6">触发</button>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
<include src="templates.xhsml" />
|
||||
107
xhs-mini-demos/api-case/modal/templates.js
Normal file
107
xhs-mini-demos/api-case/modal/templates.js
Normal file
@@ -0,0 +1,107 @@
|
||||
/** 以下内容为自动生成，请勿手动修改 */
|
||||
|
||||
module.exports = {
|
||||
data: {
|
||||
page_data_0: "",
|
||||
|
||||
page_data_1: "",
|
||||
|
||||
page_data_2: "",
|
||||
|
||||
page_data_3: "",
|
||||
|
||||
page_data_4: "",
|
||||
|
||||
page_data_5: "",
|
||||
|
||||
page_data_6: "",
|
||||
|
||||
page_data_7: "",
|
||||
|
||||
page_data_8: "",
|
||||
|
||||
page_data_9: false,
|
||||
|
||||
page_data_10: false,
|
||||
|
||||
page_data_11: false,
|
||||
|
||||
page_data_12: "",
|
||||
},
|
||||
|
||||
page_fun_1(e) {
|
||||
this.setData("page_data_0", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_2(e) {
|
||||
this.setData("page_data_1", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_3(e) {
|
||||
this.setData("page_data_2", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_4(e) {
|
||||
this.setData("page_data_3", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_5(e) {
|
||||
this.setData("page_data_4", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_6(e) {
|
||||
this.setData("page_data_5", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_7(e) {
|
||||
this.setData("page_data_6", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_8(e) {
|
||||
this.setData("page_data_7", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_9(e) {
|
||||
this.setData("page_data_8", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_0() {
|
||||
this.setData({
|
||||
page_data_9: false,
|
||||
page_data_10: false,
|
||||
page_data_11: false,
|
||||
});
|
||||
|
||||
xhs.showModal({
|
||||
success: (res) => {
|
||||
console.log("success", res);
|
||||
this.setData({
|
||||
page_data_9: true,
|
||||
page_data_12: JSON.stringify(res),
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log("fail", res);
|
||||
this.setData({
|
||||
page_data_10: true,
|
||||
page_data_12: JSON.stringify(res),
|
||||
});
|
||||
},
|
||||
complete: (res) => {
|
||||
console.log("complete", res);
|
||||
this.setData({
|
||||
page_data_11: true,
|
||||
});
|
||||
},
|
||||
title: this.data.page_data_0,
|
||||
content: this.data.page_data_1,
|
||||
showCancel: this.data.page_data_2,
|
||||
cancelText: this.data.page_data_3,
|
||||
cancelColor: this.data.page_data_4,
|
||||
confirmText: this.data.page_data_5,
|
||||
confirmColor: this.data.page_data_6,
|
||||
editable: this.data.page_data_7,
|
||||
placeholderText: this.data.page_data_8,
|
||||
});
|
||||
},
|
||||
};
|
||||
70
xhs-mini-demos/api-case/modal/templates.xhsml
Normal file
70
xhs-mini-demos/api-case/modal/templates.xhsml
Normal file
@@ -0,0 +1,70 @@
|
||||
<!-- 以下内容为自动生成，请勿手动修改 -->
|
||||
|
||||
<view class="container">
|
||||
<showbox title="showModal演示">
|
||||
<box>
|
||||
<api-status
|
||||
success="{{page_data_9}}"
|
||||
complete="{{page_data_11}}"
|
||||
fail="{{page_data_10}}"
|
||||
text="{{page_data_12}}"
|
||||
>
|
||||
</api-status>
|
||||
<view class="_ui-space _mt8">
|
||||
<view class="_ui-input">
|
||||
<input placeholder="title" type="text" bindinput="page_fun_1" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input placeholder="content" type="text" bindinput="page_fun_2" />
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<text class="_dflex _ai_center _px8">是否开启showCancel</text>
|
||||
<switch color="rgba(255, 36, 66, 1)" bindchange="page_fun_3" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input placeholder="cancelText" type="text" bindinput="page_fun_4" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input placeholder="cancelColor" type="text" bindinput="page_fun_5" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input placeholder="confirmText" type="text" bindinput="page_fun_6" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input
|
||||
placeholder="confirmColor"
|
||||
type="text"
|
||||
bindinput="page_fun_7"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<text class="_dflex _ai_center _px8">是否开启editable</text>
|
||||
<switch color="rgba(255, 36, 66, 1)" bindchange="page_fun_8" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input
|
||||
placeholder="placeholderText"
|
||||
type="text"
|
||||
bindinput="page_fun_9"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="_ui-button"
|
||||
hover-class="_ui-button-hover"
|
||||
bindtap="page_fun_0"
|
||||
>
|
||||
触发
|
||||
</button>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
Reference in New Issue
Block a user