Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6067
Star 93
Fork 166
H
hello uni-app x
提交 75318592 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat(actionSheet): 补充自定义 titleColor cancelText cancelColor backgroundColor 示例及测试

上级 2191ecbf
隐藏空白更改
内联 并排
Showing with 150 addition and 530 deletion
pages/API/show-action-sheet/show-action-sheet.test.js
浏览文件 @ 75318592
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/ const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
const isAndroid = platformInfo.startsWith('android')
const isIos = platformInfo.startsWith('ios')
const isApp = isAndroid || isIos
const isWeb = platformInfo.startsWith('web')
describe('API-loading', () => {
describe('API-loading', () => {
let page; let page;
const isApp = process.env.UNI_OS_NAME === "android" || process.env.UNI_OS_NAME === "ios"; let screenShotOptions = {};
async function showActionSheet(page) {
const btn = await page.$('#btn-action-sheet-show')
await btn.tap()
await page.waitFor(1000);
}
async function screenshot() {
const image = await program.screenshot(screenShotOptions);
expect(image).toSaveImageSnapshot();
}
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch('/pages/API/show-action-sheet/show-action-sheet') page = await program.reLaunch('/pages/API/show-action-sheet/show-action-sheet')
await page.waitFor(500); await page.waitFor('view');
});
it("onload-action-sheet-test", async () => {
if (isApp) { if (isApp) {
await page.waitFor(500);
const res = await page.callMethod('jest_getWindowInfo') const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio; const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio; const windowWidth = res.windowWidth * res.pixelRatio;
const image = await program.screenshot({ screenShotOptions = {
deviceShot: true, deviceShot: true,
area: { area: {
x: 0, x: 0,
y: 200, y: 200,
height: windowHeight - 100, height: windowHeight + (isAndroid ? 30 : 70),
width:windowWidth width: windowWidth
}, },
}); }
} else if (isWeb){
expect(image).toSaveImageSnapshot(); screenShotOptions = {
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true fullPage: true
}); }
expect(image).toSaveImageSnapshot()
} }
}) });
it("action-sheet-test-current-0", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({
showErrorToast:false,
current: 0,
itemContentLarge:false,
itemNumLargeSelect:false,
itemColorCustom:false,
})
const btnToastDurationButton = await page.$('#btn-action-sheet-show')
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
it("onload showActionSheet", async () => {
await page.waitFor(isWeb ? 3000 : 1000);
await screenshot();
}) })
it("有标题", async () => {
it("action-sheet-test-current-0-largeContent", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({ await page.setData({
showErrorToast:false, showErrorToast:false,
current: 0, current: 0,
itemContentLarge:true,
itemNumLargeSelect:false,
itemColorCustom:false,
}) })
const btnToastDurationButton = await page.$('#btn-action-sheet-show') await showActionSheet(page);
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
await screenshot();
}) })
it("有标题 长内容", async () => {
it("action-sheet-test-current-0-largeContent-largeNum", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({ await page.setData({
showErrorToast:false,
current: 0,
itemContentLarge:true, itemContentLarge:true,
itemNumLargeSelect:true,
itemColorCustom:false,
}) })
const btnToastDurationButton = await page.$('#btn-action-sheet-show') await showActionSheet(page);
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
})
it("action-sheet-test-current-0-largeContent-largeNum-customColor", async () => { await screenshot();
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({
showErrorToast:false,
current: 0,
itemContentLarge:true,
itemNumLargeSelect:true,
itemColorCustom:true,
})
const btnToastDurationButton = await page.$('#btn-action-sheet-show')
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
// add since 2024-04-22 app 不再截图，避免跨平台对比失败
// const image = await program.screenshot({
// deviceShot: true,
// area: {
// x: 0,
// y: 200,
// height: windowHeight - 100,
// width:windowWidth
// },
// });
// expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
}) })
it("有标题 超过6个item", async () => {
it("action-sheet-test-current-1", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({ await page.setData({
current: 1,
itemContentLarge:false, itemContentLarge:false,
itemNumLargeSelect:false,
itemColorCustom:false,
})
const btnToastDurationButton = await page.$('#btn-action-sheet-show')
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
})
it("action-sheet-test-current-1-largeContent", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({
showErrorToast:false,
current: 1,
itemContentLarge:true,
itemNumLargeSelect:false,
itemColorCustom:false,
})
const btnToastDurationButton = await page.$('#btn-action-sheet-show')
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
})
it("action-sheet-test-current-1-largeContent-largeNum", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({
showErrorToast:false,
current: 1,
itemContentLarge:true,
itemNumLargeSelect:true, itemNumLargeSelect:true,
itemColorCustom:false,
}) })
const btnToastDurationButton = await page.$('#btn-action-sheet-show') await showActionSheet(page);
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) { await screenshot();
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
}) })
it("有标题 长内容 自定义 itemColor", async () => {
it("action-sheet-test-current-1-largeContent-largeNum-customColor", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({ await page.setData({
showErrorToast:false, itemContentLarge: true,
current: 1, itemNumLargeSelect: false,
itemContentLarge:true, itemColorCustom: true,
itemNumLargeSelect:true,
itemColorCustom:true,
}) })
const btnToastDurationButton = await page.$('#btn-action-sheet-show') await showActionSheet(page);
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
await screenshot();
}) })
it("无标题", async () => {
it("action-sheet-test-current-2", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({ await page.setData({
current: 2, current: 1,
itemContentLarge:false, itemContentLarge:false,
itemNumLargeSelect:false,
itemColorCustom:false, itemColorCustom:false,
}) })
const btnToastDurationButton = await page.$('#btn-action-sheet-show') await showActionSheet(page);
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
await screenshot();
}) })
it("长标题", async () => {
it("action-sheet-test-current-2-largeContent", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({ await page.setData({
showErrorToast:false,
current: 2, current: 2,
itemContentLarge:true,
itemNumLargeSelect:false,
itemColorCustom:false,
}) })
const btnToastDurationButton = await page.$('#btn-action-sheet-show') await showActionSheet(page);
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
await screenshot();
}) })
it("custom titleColor cancelText cancelColor backgroundColor", async () => {
it("action-sheet-test-current-2-largeContent-largeNum", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({ await page.setData({
showErrorToast:false, titleColorCustom: true,
current: 2, cancelTextCustom: true,
itemContentLarge:true, cancelColorCustom: true,
itemNumLargeSelect:true, backgroundColorCustom: true,
itemColorCustom:false,
}) })
await showActionSheet(page);
const btnToastDurationButton = await page.$('#btn-action-sheet-show') await screenshot();
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
}) })
it("hideActionSheet", async () => {
await page.callMethod('hideActionSheet')
await page.waitFor(1000);
await screenshot();
it("action-sheet-test-current-2-largeContent-largeNum-customColor", async () => {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
await page.setData({
showErrorToast:false,
current: 2,
itemContentLarge:true,
itemNumLargeSelect:true,
itemColorCustom:true,
})
const btnToastDurationButton = await page.$('#btn-action-sheet-show')
await btnToastDurationButton.tap()
await page.waitFor(500);
if (isApp) {
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 100,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
}) })
}); });
pages/API/show-action-sheet/show-action-sheet.uvue
浏览文件 @ 75318592
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1;"> <scroll-view style="flex: 1;">
<!-- #endif --> <!-- #endif -->
<view> <view>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
...@@ -14,27 +14,43 @@ ...@@ -14,27 +14,43 @@
</view> </view>
<view class="uni-list"> <view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义itemColor</view> <view class="uni-list-cell-db">自定义 titleColor</view>
<switch :checked="titleColorCustom" @change="titleColorChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 itemColor</view>
<switch :checked="itemColorCustom" @change="itemColorChange" /> <switch :checked="itemColorCustom" @change="itemColorChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">超长文本和空文本item</view> <view class="uni-list-cell-db">超长文本和空文本 item</view>
<switch :checked="itemContentLarge" @change="itemContentLargeChange" /> <switch :checked="itemContentLarge" @change="itemContentLargeChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">超过6个item</view> <view class="uni-list-cell-db">超过6个 item</view>
<switch :checked="itemNumLargeSelect" @change="itemNumLargeChange" /> <switch :checked="itemNumLargeSelect" @change="itemNumLargeChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 cancelText</view>
<switch :checked="cancelTextCustom" @change="cancelTextChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 cancelColor</view>
<switch :checked="cancelColorCustom" @change="cancelColorChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义 backgroundColor</view>
<switch :checked="backgroundColorCustom" @change="backgroundColorChange" />
</view>
</view> </view>
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<view class="uni-btn-v"> <view class="uni-btn-v">
<button class="uni-btn-v" type="default" @tap="actionSheetTap" id="btn-action-sheet-show">弹出action <button class="uni-btn-v" type="default" @tap="showActionSheet" id="btn-action-sheet-show">弹出action
sheet</button> sheet</button>
</view> </view>
</view> </view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
...@@ -46,9 +62,13 @@ ...@@ -46,9 +62,13 @@
data() { data() {
return { return {
title: 'action-sheet', title: 'action-sheet',
titleColorCustom: false,
itemColorCustom: false, itemColorCustom: false,
itemContentLarge: false, itemContentLarge: false,
itemNumLargeSelect: false, itemNumLargeSelect: false,
cancelTextCustom: false,
cancelColorCustom: false,
backgroundColorCustom: false,
showErrorToast: true, showErrorToast: true,
items: [{ items: [{
value: '标题', value: '标题',
...@@ -85,6 +105,9 @@ ...@@ -85,6 +105,9 @@
} }
} }
}, },
titleColorChange(e : UniSwitchChangeEvent) {
this.titleColorCustom = e.detail.value
},
itemContentLargeChange: function (e : UniSwitchChangeEvent) { itemContentLargeChange: function (e : UniSwitchChangeEvent) {
this.itemContentLarge = e.detail.value this.itemContentLarge = e.detail.value
}, },
...@@ -94,68 +117,68 @@ ...@@ -94,68 +117,68 @@
itemNumLargeChange: function (e : UniSwitchChangeEvent) { itemNumLargeChange: function (e : UniSwitchChangeEvent) {
this.itemNumLargeSelect = e.detail.value this.itemNumLargeSelect = e.detail.value
}, },
actionSheetTap() { cancelTextChange: function (e : UniSwitchChangeEvent) {
this.cancelTextCustom = e.detail.value
let itemInfo = ['item1', 'item2', 'item3', 'item4'] },
cancelColorChange: function (e : UniSwitchChangeEvent) {
this.cancelColorCustom = e.detail.value
},
backgroundColorChange: function (e : UniSwitchChangeEvent) {
this.backgroundColorCustom = e.detail.value
},
showActionSheet() {
const options: ShowActionSheetOptions = {
title: this.items[this.current].value,
itemList: ['item1', 'item2', 'item3', 'item4'],
success: (res) => {
console.log(res.tapIndex);
uni.showToast({
title: "点击了第" + res.tapIndex + "个选项",
icon: "none"
})
},
fail: (error) => {
if (this.showErrorToast) {
uni.showToast({
title: error.errMsg,
icon: "none"
})
}
console.log(error);
}
}
if (this.itemContentLarge) { if (this.itemContentLarge) {
itemInfo = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', ''] options.itemList = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
} }
if (this.itemNumLargeSelect) { if (this.itemNumLargeSelect) {
// 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet // 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
itemInfo = [] const arr: string[] = []
for (var i = 1; i <= 10; i++) { for(let i = 0; i < 10; i++){
itemInfo.push('两个黄鹂鸣翠柳，一行白鹭上青天'); arr.push(`两个黄鹂鸣翠柳，一行白鹭上青天 ${i+1}`)
} }
options.itemList = arr
} }
if(this.titleColorCustom){
const that = this options.titleColor = '#007AFF'
if (this.itemColorCustom) { }
uni.showActionSheet({ if(this.itemColorCustom){
title: this.items[this.current].value, options.itemColor = '#ff00ff'
itemList: itemInfo, }
itemColor: "#ff00ff", if(this.cancelTextCustom){
success: (e) => { options.cancelText = 'custom cancel'
console.log(e.tapIndex);
uni.showToast({
title: "点击了第" + e.tapIndex + "个选项",
icon: "none"
})
},
fail: (e) => {
if (this.showErrorToast) {
uni.showToast({
title: e.errMsg,
icon: "none"
})
}
console.log(e);
}
})
} else {
uni.showActionSheet({
title: this.items[this.current].value,
itemList: itemInfo,
success: (e) => {
console.log(e.tapIndex);
uni.showToast({
title: "点击了第" + e.tapIndex + "个选项",
icon: "none"
})
},
fail: (e) => {
console.log(e);
if (this.showErrorToast) {
uni.showToast({
title: e.errMsg,
icon: "none"
})
}
}
})
} }
if(this.cancelColorCustom){
options.cancelColor = '#007AFF'
}
if(this.backgroundColorCustom){
options.backgroundColor = '#ccc'
}
uni.showActionSheet(options)
}, },
// 自动化测试
hideActionSheet(){
uni.hideActionSheet()
}
} }
} }
</script> </script>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或