提交 abed621a 编写于 作者: inkwalk's avatar inkwalk

fix(App): showModal, showActionSheet

上级 9e9e128b
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
"node": ">=10.0.0" "node": ">=10.0.0"
}, },
"devDependencies": { "devDependencies": {
"@dcloudio/types": "^2.2.13", "@dcloudio/types": "^2.2.14",
"@microsoft/api-extractor": "^7.13.2", "@microsoft/api-extractor": "^7.13.2",
"@rollup/plugin-alias": "^3.1.1", "@rollup/plugin-alias": "^3.1.1",
"@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-commonjs": "^17.0.0",
......
...@@ -7,6 +7,7 @@ export const ShowActionSheetProtocol: ApiProtocol<API_TYPE_SHOW_ACTION_SHEET> = ...@@ -7,6 +7,7 @@ export const ShowActionSheetProtocol: ApiProtocol<API_TYPE_SHOW_ACTION_SHEET> =
required: true, required: true,
}, },
title: String, title: String,
alertText: String,
itemColor: String, itemColor: String,
popover: Object, popover: Object,
} }
......
...@@ -24,5 +24,5 @@ export * from './context/getBackgroundAudioManager' ...@@ -24,5 +24,5 @@ export * from './context/getBackgroundAudioManager'
export * from './location/getLocation' export * from './location/getLocation'
export * from './popup/showModal' export * from './ui/popup/showModal'
export * from './popup/showActionSheet' export * from './ui/popup/showActionSheet'
import { extend } from '@vue/shared'
import { nextTick, reactive } from 'vue'
import {
API_SHOW_MODAL,
API_TYPE_SHOW_MODAL,
defineAsyncApi,
ShowModalOptions,
ShowModalProtocol,
} from '@dcloudio/uni-api'
import { ModalProps } from '../../../../../uni-h5/src/service/api/ui/popup/modal'
let showModalState: ModalProps
let currentShowModalResolve: UniApp.ShowModalOptions['success']
export const showModal = defineAsyncApi<API_TYPE_SHOW_MODAL>(
API_SHOW_MODAL,
(
{
title = '',
content = '',
showCancel = true,
cancelText,
cancelColor,
confirmText,
confirmColor,
} = {},
{ resolve }
) => {
currentShowModalResolve = resolve
if (!showModalState) {
showModalState = reactive({
title,
content,
showCancel,
cancelText,
cancelColor,
confirmText,
confirmColor,
} as ModalProps)
content = content || ' '
plus.nativeUI.confirm(
content,
(e) => {
if (showCancel) {
resolve({
confirm: e.index === 1,
cancel: e.index === 0 || e.index === -1,
})
} else {
resolve({
confirm: e.index === 0,
cancel: false,
})
}
},
title as PlusNativeUIConfirmStyles,
showCancel ? [cancelText, confirmText] : [confirmText]
)
//下一帧执行,确保首次显示时有动画效果
nextTick(() => (showModalState.visible = true))
} else {
extend(showModalState, {
title,
content,
showCancel,
cancelText,
cancelColor,
confirmText,
confirmColor,
})
showModalState.visible = true
}
},
ShowModalProtocol,
ShowModalOptions
)
...@@ -6,61 +6,46 @@ import { ...@@ -6,61 +6,46 @@ import {
defineAsyncApi, defineAsyncApi,
} from '@dcloudio/uni-api' } from '@dcloudio/uni-api'
import { extend } from '@vue/shared' import { extend } from '@vue/shared'
import { nextTick, reactive } from 'vue'
import { Props } from '../../../../../uni-h5/src/service/api/ui/popup/actionSheet'
import { useI18n } from '@dcloudio/uni-core' import { useI18n } from '@dcloudio/uni-core'
let showActionSheetState: Props
export const showActionSheet = defineAsyncApi<API_TYPE_SHOW_ACTION_SHEET>( export const showActionSheet = defineAsyncApi<API_TYPE_SHOW_ACTION_SHEET>(
API_SHOW_ACTION_SHEET, API_SHOW_ACTION_SHEET,
( (
{ itemList = [], itemColor = '#000000', title = '', popover }, {
itemList = [],
itemColor = '#000000',
title = '',
alertText = '',
popover,
},
{ resolve, reject } { resolve, reject }
) => { ) => {
const { t } = useI18n() const { t } = useI18n()
if (!showActionSheetState) { const options = {
showActionSheetState = reactive({ title,
itemList, cancel: t('uni.showActionSheet.cancel'),
itemColor, buttons: itemList.map((item) => ({
title, title: item,
color: itemColor,
})),
}
if (title || alertText) {
options.title = alertText || title
}
plus.nativeUI.actionSheet(
extend(options, {
popover, popover,
} as Props) }),
const options = { (e) => {
title, if (e.index > 0) {
cancel: t('uni.showActionSheet.cancel'), resolve({
buttons: itemList.map((item) => ({ tapIndex: e.index - 1,
title: item, })
color: itemColor, } else {
})), reject('showActionSheet:fail cancel')
}
if (title) {
options.title = title
}
plus.nativeUI.actionSheet(
extend(options, {
popover,
}),
(e) => {
if (e.index > 0) {
resolve({
tapIndex: e.index - 1,
})
} else {
reject('showActionSheet:fail cancel')
}
} }
) }
nextTick(() => (showActionSheetState.visible = true)) )
} else {
extend(showActionSheetState, {
itemList,
itemColor,
title,
popover,
})
showActionSheetState.visible = true
}
}, },
ShowActionSheetProtocol, ShowActionSheetProtocol,
ShowActionSheetOptions ShowActionSheetOptions
......
import {
API_SHOW_MODAL,
API_TYPE_SHOW_MODAL,
defineAsyncApi,
ShowModalOptions,
ShowModalProtocol,
} from '@dcloudio/uni-api'
export const showModal = defineAsyncApi<API_TYPE_SHOW_MODAL>(
API_SHOW_MODAL,
(
{
title = '',
content = '',
showCancel = true,
cancelText,
cancelColor,
confirmText,
confirmColor,
} = {},
{ resolve }
) => {
content = content || ' '
plus.nativeUI.confirm(
content,
(e) => {
if (showCancel) {
resolve({
confirm: e.index === 1,
cancel: e.index === 0 || e.index === -1,
})
} else {
resolve({
confirm: e.index === 0,
cancel: false,
})
}
},
title as PlusNativeUIConfirmStyles,
showCancel ? [cancelText, confirmText] : [confirmText]
)
},
ShowModalProtocol,
ShowModalOptions
)
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
watchEffect, watchEffect,
nextTick, nextTick,
Transition, Transition,
computed,
} from 'vue' } from 'vue'
import { usePopupStyle } from '../../../../helpers/usePopupStyle' import { usePopupStyle } from '../../../../helpers/usePopupStyle'
import { useKeyboard } from '../../../../helpers/useKeyboard' import { useKeyboard } from '../../../../helpers/useKeyboard'
...@@ -29,6 +30,10 @@ const props = { ...@@ -29,6 +30,10 @@ const props = {
type: String, type: String,
default: '', default: '',
}, },
alertText: {
type: String,
default: '',
},
itemList: { itemList: {
type: Array, type: Array,
default() { default() {
...@@ -135,12 +140,14 @@ export default /*#__PURE__*/ defineComponent({ ...@@ -135,12 +140,14 @@ export default /*#__PURE__*/ defineComponent({
$event.preventDefault() $event.preventDefault()
} }
const fixTitle = computed(() => props.title || props.alertText)
watch( watch(
() => props.visible, () => props.visible,
() => { () => {
nextTick(() => { nextTick(() => {
// title 占位 // title 占位
if (props.title) { if (fixTitle.value) {
titleHeight.value = ( titleHeight.value = (
document.querySelector('.uni-actionsheet__title') as HTMLElement document.querySelector('.uni-actionsheet__title') as HTMLElement
).offsetHeight ).offsetHeight
...@@ -182,13 +189,13 @@ export default /*#__PURE__*/ defineComponent({ ...@@ -182,13 +189,13 @@ export default /*#__PURE__*/ defineComponent({
onWheel={_handleWheel} onWheel={_handleWheel}
> >
{/* title占位 */} {/* title占位 */}
{props.title ? ( {fixTitle.value ? (
<> <>
<div <div
class="uni-actionsheet__cell" class="uni-actionsheet__cell"
style={{ height: `${titleHeight.value}px` }} style={{ height: `${titleHeight.value}px` }}
/> />
<div class="uni-actionsheet__title">{props.title}</div> <div class="uni-actionsheet__title">{fixTitle.value}</div>
</> </>
) : ( ) : (
'' ''
......
...@@ -357,10 +357,10 @@ ...@@ -357,10 +357,10 @@
exec-sh "^0.3.2" exec-sh "^0.3.2"
minimist "^1.2.0" minimist "^1.2.0"
"@dcloudio/types@^2.2.13": "@dcloudio/types@^2.2.14":
version "2.2.13" version "2.2.14"
resolved "https://registry.yarnpkg.com/@dcloudio/types/-/types-2.2.13.tgz#eecbcde36baf12a869e4c93cc49cc1932734e93c" resolved "https://registry.yarnpkg.com/@dcloudio/types/-/types-2.2.14.tgz#551b3207d7531bc48b0cce9b237b2436fa11c384"
integrity sha512-rGalNMnv6XXy9/GDU/FjhkuVZBCYJd1or5j6iQ+Ub1Q+gEQG61MgJjIPFxFNiMxlbMMSq4X+AqqUEfwTuDrgeQ== integrity sha512-DondVwxDmO+lopqu8IlC5uAOw11d2+1dbby0oyMZrhAQzRFzBWT2OEGBw9/btK4G85h10hPTondbQa3yi218hA==
"@eslint/eslintrc@^0.4.2": "@eslint/eslintrc@^0.4.2":
version "0.4.2" version "0.4.2"
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册