340 行
11 KiB
Plaintext
340 行
11 KiB
Plaintext
<template>
|
|
<!-- #ifdef APP && !VUE3-VAPOR -->
|
|
<scroll-view style="flex: 1">
|
|
<!-- #endif -->
|
|
<view>
|
|
<page-head :title="data.title"></page-head>
|
|
<page-intro content="uni.showModal 用于弹出模态对话框，可配置标题、内容、是否显示取消/确认按钮及文案、是否带输入框等。本页演示单次/多次弹出、延迟关闭、标题样式、长文案、非法颜色与超长按钮文案等能力，并展示 success/fail/complete 回调结果。"></page-intro>
|
|
<view class="uni-list">
|
|
<radio-group @change="radioChange">
|
|
<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in data.items" :key="item.value"
|
|
:class="index < data.items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
|
|
:checked="index === data.current">
|
|
{{ item.name }}
|
|
</radio>
|
|
</radio-group>
|
|
</view>
|
|
<view class="uni-list">
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">提示内容为空</view>
|
|
<switch :checked="data.emptyContent" @change="emptyContentChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">是否显示过长文字</view>
|
|
<switch :checked="data.showLongContent" @change="showLongContentChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">是否显示取消按钮</view>
|
|
<switch :checked="data.showCancelSelect" @change="showCancelChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">定制取消文案</view>
|
|
<switch :checked="data.cancelTextSelect" @change="cancelTextChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">定制确认文案</view>
|
|
<switch :checked="data.confirmTextSelect" @change="confirmTextChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">测试非法的颜色</view>
|
|
<switch :checked="data.illegalColorSelect" @change="illegalColorChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">测试超长的按钮文本</view>
|
|
<switch :checked="data.illegalButtonTextSelect" @change="illegalButtonTextChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">是否显示输入框</view>
|
|
<switch :checked="data.editableSelect" @change="editableChange" />
|
|
</view>
|
|
<view class="uni-list-cell uni-list-cell-pd">
|
|
<view class="uni-list-cell-db">是否定制输入提示词</view>
|
|
<switch :checked="data.placeholderTextSelect" @change="placeholderTextChange" />
|
|
</view>
|
|
</view>
|
|
<view class="uni-padding-wrap uni-common-mt">
|
|
<text>complete 执行结果：{{ data.timesShowRet }}</text>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @tap="modalTap" id="btn-modal-show">
|
|
modal单次弹出
|
|
</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="default" @tap="modalTapTimes" id="btn-modal-show-multitime">
|
|
modal多次弹出
|
|
</button>
|
|
</view>
|
|
<!-- #ifndef MP -->
|
|
<view class="uni-btn-v">
|
|
<button type="default" @tap="closeAllModal">
|
|
关闭全部弹窗
|
|
</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="default" @tap="setTimeoutCloseAllModal" id="btn-modal-hide-all">
|
|
延迟3s关闭全部弹窗
|
|
</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="default" @tap="setTimeoutCloseLastModal" id="btn-modal-hide-last">
|
|
延迟3s关闭最后一个弹窗
|
|
</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
<text>
|
|
success/fail 执行结果：{{ data.exeRet }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<bottom-safe-area />
|
|
<!-- #ifdef APP && !VUE3-VAPOR -->
|
|
</scroll-view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
type ItemType = {
|
|
value : string,
|
|
name : string,
|
|
}
|
|
|
|
type DataType = {
|
|
title : string;
|
|
showCancelSelect : boolean;
|
|
showLongContent : boolean;
|
|
emptyContent : boolean;
|
|
illegalColorSelect : boolean;
|
|
illegalButtonTextSelect : boolean;
|
|
cancelTextSelect : boolean;
|
|
confirmTextSelect : boolean;
|
|
editableSelect : boolean;
|
|
placeholderTextSelect : boolean;
|
|
exeRet : string;
|
|
lastModal : UniPage | null;
|
|
items : ItemType[];
|
|
current : number;
|
|
timesShowRet : Array<any>;
|
|
}
|
|
// 使用reactive避免ref数据在自动化测试中无法访问
|
|
const data = reactive({
|
|
title: 'modal',
|
|
showCancelSelect: false,
|
|
showLongContent: false,
|
|
emptyContent: false,
|
|
illegalColorSelect: false,
|
|
illegalButtonTextSelect: false,
|
|
cancelTextSelect: false,
|
|
confirmTextSelect: false,
|
|
editableSelect: false,
|
|
placeholderTextSelect: false,
|
|
exeRet: "",
|
|
lastModal: null as UniPage | null,
|
|
items: [{
|
|
value: '标题',
|
|
name: '有标题'
|
|
},
|
|
{
|
|
value: '',
|
|
name: '无标题'
|
|
},
|
|
{
|
|
value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
|
|
name: '超长标题'
|
|
}
|
|
] as ItemType[],
|
|
current: 0,
|
|
timesShowRet: [] as Array<any>,
|
|
} as DataType)
|
|
|
|
const showLongContentChange = (e : UniSwitchChangeEvent) => {
|
|
data.showLongContent = e.detail.value
|
|
}
|
|
|
|
const emptyContentChange = (e : UniSwitchChangeEvent) => {
|
|
data.emptyContent = e.detail.value
|
|
}
|
|
|
|
const illegalColorChange = (e : UniSwitchChangeEvent) => {
|
|
data.illegalColorSelect = e.detail.value
|
|
}
|
|
|
|
const illegalButtonTextChange = (e : UniSwitchChangeEvent) => {
|
|
data.illegalButtonTextSelect = e.detail.value
|
|
}
|
|
|
|
const showCancelChange = (e : UniSwitchChangeEvent) => {
|
|
data.showCancelSelect = e.detail.value
|
|
}
|
|
|
|
const cancelTextChange = (e : UniSwitchChangeEvent) => {
|
|
data.cancelTextSelect = e.detail.value
|
|
}
|
|
|
|
const confirmTextChange = (e : UniSwitchChangeEvent) => {
|
|
data.confirmTextSelect = e.detail.value
|
|
}
|
|
|
|
const editableChange = (e : UniSwitchChangeEvent) => {
|
|
data.editableSelect = e.detail.value
|
|
}
|
|
|
|
const placeholderTextChange = (e : UniSwitchChangeEvent) => {
|
|
data.editableSelect = e.detail.value
|
|
data.placeholderTextSelect = e.detail.value
|
|
}
|
|
|
|
const radioChange = (e : UniRadioGroupChangeEvent) => {
|
|
for (let i = 0; i < data.items.length; i++) {
|
|
if (data.items[i].value === e.detail.value) {
|
|
data.current = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
const closeAllModal = () => {
|
|
uni.hideModal({
|
|
modalPage: null,
|
|
success: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
fail: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
complete: (res) => {
|
|
data.timesShowRet.push(res)
|
|
}
|
|
})
|
|
}
|
|
|
|
const setTimeoutCloseLastModal = () => {
|
|
setTimeout(() => {
|
|
uni.hideModal({
|
|
modalPage: data.lastModal,
|
|
success: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
fail: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
complete: (res) => {
|
|
data.timesShowRet.push(res)
|
|
}
|
|
})
|
|
}, 3000)
|
|
}
|
|
|
|
const setTimeoutCloseAllModal = () => {
|
|
setTimeout(() => {
|
|
uni.hideModal({
|
|
modalPage: null,
|
|
success: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
fail: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
complete: (res) => {
|
|
data.timesShowRet.push(res)
|
|
}
|
|
})
|
|
}, 3000)
|
|
}
|
|
|
|
const modalTap = () => {
|
|
// 单次弹出前清空多次结果集合
|
|
data.timesShowRet = []
|
|
|
|
let cancelTextVal : string | null = null
|
|
let cancelColorVal = ''
|
|
if (data.cancelTextSelect) {
|
|
cancelTextVal = "修改后的取消文本"
|
|
cancelColorVal = "#ff00ff"
|
|
} else {
|
|
//#ifdef MP
|
|
cancelTextVal = "取消"
|
|
//#endif
|
|
}
|
|
|
|
let confirmTextVal : string | null = null
|
|
let confirmColorVal = ''
|
|
if (data.confirmTextSelect) {
|
|
confirmTextVal = "修改后的确定文本"
|
|
confirmColorVal = "#0ff"
|
|
} else {
|
|
//#ifdef MP
|
|
confirmTextVal = "确定"
|
|
//#endif
|
|
}
|
|
let placeholderTextVal = ''
|
|
let contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"
|
|
|
|
if (data.showLongContent) {
|
|
contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字原则上可以无限多！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！"
|
|
}
|
|
if(data.emptyContent) {
|
|
contentVal = ""
|
|
}
|
|
if (data.placeholderTextSelect) {
|
|
placeholderTextVal = "定制提示信息"
|
|
}
|
|
if (data.illegalColorSelect) {
|
|
cancelColorVal = "#WW00ff"
|
|
confirmColorVal = "#0ffff"
|
|
}
|
|
if (data.illegalButtonTextSelect) {
|
|
confirmTextVal = "超长版文字-修改后的确定文本-超长版本文字"
|
|
cancelTextVal = "超长版文字-修改后的取消文本-超长版本文字"
|
|
}
|
|
|
|
let op = {
|
|
title: data.items[data.current].value,
|
|
editable: data.editableSelect,
|
|
placeholderText: placeholderTextVal,
|
|
content: contentVal,
|
|
showCancel: data.showCancelSelect,
|
|
cancelText: cancelTextVal,
|
|
cancelColor: cancelColorVal,
|
|
confirmText: confirmTextVal,
|
|
confirmColor: confirmColorVal,
|
|
success: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
fail: (res) => {
|
|
data.exeRet = JSON.stringify(res)
|
|
},
|
|
complete: (res) => {
|
|
data.timesShowRet.push(res)
|
|
}
|
|
} as ShowModalOptions
|
|
// console.log(op)
|
|
data.lastModal = uni.showModal(op)
|
|
}
|
|
|
|
const modalTapTimes = () => {
|
|
// 多次弹出前清空结果集合
|
|
data.timesShowRet = []
|
|
modalTap()
|
|
modalTap()
|
|
setTimeout(() => {
|
|
modalTap()
|
|
}, 200)
|
|
}
|
|
|
|
onLoad((options : OnLoadOptions) => {
|
|
if (options['onLoadShowModal'] == 'false') {
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: "onLoad 调用示例,请手动取消"
|
|
})
|
|
})
|
|
|
|
defineExpose({
|
|
data,
|
|
modalTap,
|
|
closeAllModal
|
|
})
|
|
</script>
|