302 行
9.3 KiB
Plaintext
302 行
9.3 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.showActionSheet：通过单选切换列表项、开关控制 titleColor/itemColor、超长与空文本 item、cancelText/cancelColor/backgroundColor 等；点击按钮弹出 actionSheet，可查看回调结果。"></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">自定义 titleColor</view>
|
||
<switch :checked="data.titleColorCustom" @change="titleColorChange" />
|
||
</view>
|
||
<view class="uni-list-cell uni-list-cell-pd">
|
||
<view class="uni-list-cell-db">自定义 itemColor</view>
|
||
<switch :checked="data.itemColorCustom" @change="itemColorChange" />
|
||
</view>
|
||
<view class="uni-list-cell uni-list-cell-pd">
|
||
<view class="uni-list-cell-db">超长文本和空文本 item</view>
|
||
<switch :checked="data.itemContentLarge" @change="itemContentLargeChange" />
|
||
</view>
|
||
<!-- #ifndef MP -->
|
||
<view class="uni-list-cell uni-list-cell-pd">
|
||
<view class="uni-list-cell-db">超过6个 item</view>
|
||
<switch :checked="data.itemNumLargeSelect" @change="itemNumLargeChange" />
|
||
</view>
|
||
<view class="uni-list-cell uni-list-cell-pd">
|
||
<view class="uni-list-cell-db">自定义 cancelText</view>
|
||
<switch :checked="data.cancelTextCustom" @change="cancelTextChange" />
|
||
</view>
|
||
<view class="uni-list-cell uni-list-cell-pd">
|
||
<view class="uni-list-cell-db">自定义 cancelColor</view>
|
||
<switch :checked="data.cancelColorCustom" @change="cancelColorChange" />
|
||
</view>
|
||
<view class="uni-list-cell uni-list-cell-pd">
|
||
<view class="uni-list-cell-db">自定义 backgroundColor</view>
|
||
<switch :checked="data.backgroundColorCustom" @change="backgroundColorChange" />
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="uni-padding-wrap">
|
||
<view class="uni-btn-v">
|
||
<button class="uni-btn-v" type="default" @tap="showActionSheet" id="btn-action-sheet-show">弹出actionSheet</button>
|
||
<button class="uni-btn-v uni-btn" type="default" @tap="showActionSheetAndShowAgainInCallback" id="btn-action-sheet-show">showActionSheet 并在回调中再次 showActionSheet</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef APP && !VUE3-VAPOR -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
</template>
|
||
<script setup lang="uts">
|
||
import { state, setLifeCycleNum } from '@/store/index.uts'
|
||
|
||
type ItemType = {
|
||
value: string,
|
||
name: string,
|
||
}
|
||
|
||
type DataType = {
|
||
title: string;
|
||
titleColorCustom: boolean;
|
||
itemColorCustom: boolean;
|
||
itemContentLarge: boolean;
|
||
itemNumLargeSelect: boolean;
|
||
cancelTextCustom: boolean;
|
||
cancelColorCustom: boolean;
|
||
backgroundColorCustom: boolean;
|
||
showErrorToast: boolean;
|
||
items: ItemType[];
|
||
current: number;
|
||
originTheme: string | null;
|
||
}
|
||
// 使用reactive避免ref数据在自动化测试中无法访问
|
||
const data = reactive({
|
||
title: 'action-sheet',
|
||
titleColorCustom: false,
|
||
itemColorCustom: false,
|
||
itemContentLarge: false,
|
||
itemNumLargeSelect: false,
|
||
cancelTextCustom: false,
|
||
cancelColorCustom: false,
|
||
backgroundColorCustom: false,
|
||
showErrorToast: true,
|
||
items: [{
|
||
value: '标题',
|
||
name: '有标题'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '无标题'
|
||
},
|
||
{
|
||
value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
|
||
name: '超长标题'
|
||
}
|
||
],
|
||
current: 0,
|
||
// #ifdef APP
|
||
originTheme: null,
|
||
// #endif
|
||
} as DataType)
|
||
|
||
// #ifdef APP
|
||
const setThemeAuto = () => {
|
||
uni.setAppTheme({
|
||
theme: 'auto'
|
||
})
|
||
}
|
||
|
||
const resetTheme = () => {
|
||
const originTheme = data.originTheme
|
||
if(originTheme != null){
|
||
uni.setAppTheme({
|
||
theme: originTheme
|
||
})
|
||
}
|
||
}
|
||
// #endif
|
||
|
||
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 titleColorChange = (e: UniSwitchChangeEvent) => {
|
||
data.titleColorCustom = e.detail.value
|
||
}
|
||
|
||
const itemContentLargeChange = (e: UniSwitchChangeEvent) => {
|
||
data.itemContentLarge = e.detail.value
|
||
}
|
||
|
||
const itemColorChange = (e: UniSwitchChangeEvent) => {
|
||
data.itemColorCustom = e.detail.value
|
||
}
|
||
|
||
const itemNumLargeChange = (e: UniSwitchChangeEvent) => {
|
||
data.itemNumLargeSelect = e.detail.value
|
||
}
|
||
|
||
const cancelTextChange = (e: UniSwitchChangeEvent) => {
|
||
data.cancelTextCustom = e.detail.value
|
||
}
|
||
|
||
const cancelColorChange = (e: UniSwitchChangeEvent) => {
|
||
data.cancelColorCustom = e.detail.value
|
||
}
|
||
|
||
const backgroundColorChange = (e: UniSwitchChangeEvent) => {
|
||
data.backgroundColorCustom = e.detail.value
|
||
}
|
||
|
||
const showActionSheet = () => {
|
||
const options: ShowActionSheetOptions = {
|
||
title: data.items[data.current].value,
|
||
itemList: ['item1', 'item2', 'item3', 'item4'],
|
||
success: (res) => {
|
||
console.log(res.tapIndex);
|
||
uni.showToast({
|
||
title: "点击了第" + res.tapIndex + "个选项",
|
||
icon: "none"
|
||
})
|
||
},
|
||
fail: (error) => {
|
||
if (data.showErrorToast) {
|
||
uni.showToast({
|
||
title: error.errMsg,
|
||
icon: "none"
|
||
})
|
||
}
|
||
console.log(error);
|
||
}
|
||
}
|
||
if (data.itemContentLarge) {
|
||
options.itemList = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
|
||
}
|
||
if (data.itemNumLargeSelect) {
|
||
// 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
|
||
const arr: string[] = []
|
||
for(let i = 0; i < 10; i++){
|
||
arr.push(`两个黄鹂鸣翠柳，一行白鹭上青天 ${i+1}`)
|
||
}
|
||
options.itemList = arr
|
||
}
|
||
if(data.titleColorCustom){
|
||
options.titleColor = '#007AFF'
|
||
}
|
||
if(data.itemColorCustom){
|
||
options.itemColor = '#ff00ff'
|
||
}
|
||
if(data.cancelTextCustom){
|
||
options.cancelText = 'custom cancel'
|
||
}
|
||
if(data.cancelColorCustom){
|
||
options.cancelColor = '#007AFF'
|
||
}
|
||
if(data.backgroundColorCustom){
|
||
options.backgroundColor = '#ccc'
|
||
}
|
||
uni.showActionSheet(options)
|
||
}
|
||
|
||
const showActionSheetAndShowAgainInCallback = () => {
|
||
uni.showActionSheet({
|
||
title: '第一个',
|
||
itemList: ['1','2','3'],
|
||
complete(){
|
||
uni.showActionSheet({
|
||
title: '第二个',
|
||
itemList: ['a','b','c'],
|
||
complete: (res) => {
|
||
console.log('showActionSheetAndShowAgainInCallback complete', res)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const getLifeCycleNum = () => {
|
||
return state.lifeCycleNum
|
||
}
|
||
|
||
const setLifeCycleNumFunc = (num: number) => {
|
||
return setLifeCycleNum(num)
|
||
}
|
||
|
||
// #ifdef WEB
|
||
const closeWebActionSheet = () => {
|
||
document.querySelector('.uni-action-sheet_dialog__cell').click()
|
||
}
|
||
// #endif
|
||
|
||
const hideActionSheet = () => {
|
||
uni.hideActionSheet()
|
||
}
|
||
|
||
const showActionSheetAndNavigateBackInSuccessCallback = () => {
|
||
uni.showActionSheet({
|
||
title: 'showActionSheetAndNavigateBackInSuccessCallback',
|
||
itemList: ['1','2','3'],
|
||
success: (res) => {
|
||
console.log('showActionSheetAndNavigateBackInSuccessCallback success', res)
|
||
setLifeCycleNum(state.lifeCycleNum + 1)
|
||
uni.navigateBack()
|
||
},
|
||
fail: (error) => {
|
||
console.log('showActionSheetAndNavigateBackInSuccessCallback fail', error)
|
||
}
|
||
})
|
||
}
|
||
|
||
//TODO: 暂时使用onReady替换onLoad解决当前页面弹两次的问题， modal示例页面未替换，保留该复现问题
|
||
//ios需要排查解决： uni.openDialogPage方法在页面生命周期onLoad中弹出当前页面的问题，
|
||
onReady(() => {
|
||
uni.showActionSheet({
|
||
title: "onLoad 调用示例,请手动取消",
|
||
itemList: ['item1', 'item2'],
|
||
fail: (res) => {
|
||
// 自动化测试
|
||
setLifeCycleNum(state.lifeCycleNum + 1)
|
||
console.log('onLoad showActionSheet fail', res)
|
||
},
|
||
complete: (res) => {
|
||
// 自动化测试
|
||
setLifeCycleNum(state.lifeCycleNum + 1)
|
||
console.log('onLoad showActionSheet complete', res)
|
||
}
|
||
})
|
||
// #ifdef APP
|
||
data.originTheme = uni.getSystemInfoSync().appTheme
|
||
// #endif
|
||
})
|
||
|
||
defineExpose({
|
||
data,
|
||
// #ifdef APP
|
||
setThemeAuto,
|
||
resetTheme,
|
||
// #endif
|
||
getLifeCycleNum,
|
||
// #ifdef WEB
|
||
closeWebActionSheet,
|
||
// #endif
|
||
hideActionSheet,
|
||
setLifeCycleNumFunc,
|
||
showActionSheetAndNavigateBackInSuccessCallback,
|
||
showActionSheetAndShowAgainInCallback
|
||
})
|
||
</script>
|