跳到主要内容

Modal 对话框

介绍

用于一些信息告知、操作确认的交互式弹窗。

用法

基础

const [showBase, setShowBase] = useState(false);
<OsButton 
onClick={() => {
setShowBase(true);
}}
>
基础
</OsButton>

<OsModal
title='基础弹窗'
cancelText='取消'
confirmText='确定啊'
content='这里是正文这里是正文这里是正文'
isShow={showBase}
onCancel={() => setShowBase(false)}
onClose={() => setShowBase(false)}
onConfirm={() => setShowBase(false)}
></OsModal>

单个按钮

const [showSingleBtn, setShowSingleBtn] = useState(false);
<OsButton
onClick={() => {
setShowSingleBtn(true);
}}
>
单个按钮
</OsButton>
<OsModal
title='单个按钮'
cancelText='取消'
content='这里是正文这里是正文这里是正文'
isShow={showSingleBtn}
closeable={false}
onCancel={() => setShowSingleBtn(false)}
onClose={() => setShowSingleBtn(false)}
onConfirm={() => setShowSingleBtn(false)}
></OsModal>

高级用法1

const [showSlot, setShowSlot] = useState(false);
<OsButton
onClick={() => {
setShowSlot(true);
}}
>
高级用法1
</OsButton>
<OsModal
cancelText='取消'
isShow={showSlot}
closeIconPosition='bottom'
onCancel={() => setShowSlot(false)}
onClose={() => setShowSlot(false)}
onConfirm={() => setShowSlot(false)}
>
<View className='custom-content'>
<View className='custom-content__title'>活动优惠</View>
<View className='custom-content__row'>
<Text>套装</Text>
<Text>-¥18.00</Text>
</View>
<View className='custom-content__row'>
<Text>满额减</Text>
<Text>-¥18.00</Text>
</View>
<View className='custom-content__row'>
<Text>全场满额减</Text>
<Text>-¥18.00</Text>
</View>
</View>
</OsModal>

高级用法2

const [showSlot1, setShowSlot1] = useState(false);
<OsButton
onClick={() => {
setShowSlot1(true);
}}
>
高级用法2
</OsButton>
<OsModal
cancelText='取消'
isShow={showSlot1}
onCancel={() => setShowSlot1(false)}
onClose={() => setShowSlot1(false)}
onConfirm={() => setShowSlot1(false)}
className='custom-demo'
>
<View className='custom-content-1'>
<Image
className='custom-content-1__img'
src='https://yanxuan.nosdn.127.net/15565188113590869.png?imageView&thumbnail=630x336&quality=95'
mode='aspectFill'
></Image>
</View>
</OsModal>

高级用法3

const [showDisabled, setShowDisabled] = useState(false);
<OsButton
onClick={() => {
setShowDisabled(true);
}}
>
高级用法3
</OsButton>
<OsModal
cancelText='取消'
confirmText='确定'
closeOnClickMask
isShow={showDisabled}
disableConfirmBtn
onCancel={() => setShowDisabled(false)}
onConfirm={() => setShowDisabled(false)}
onClose={() => setShowDisabled(false)}
>
<View className='custom-content-1'>
<Image
className='custom-content-1__img'
src='https://yanxuan.nosdn.127.net/15565188113590869.png?imageView&thumbnail=630x336&quality=95'
mode='aspectFill'
></Image>
</View>
</OsModal>

API

属性

参数说明类型默认值
isShow是否显示弹窗,必选booleanfalse
title弹窗标题,可选string-
content弹窗内容,可选string-
cancelText取消按钮文案,可选string-
confirmText确认按钮文案,可选string-
disableCancelBtn置灰取消按钮,可选booleanfalse
disableConfirmBtn置灰确认按钮,可选booleanfalse
closeOnClickMask点击遮罩是否隐藏弹窗,可选booleanfalse
closeOnConfirm执行onCofirm时,是否执行onClose,可选booleanfalse
confirmOpenType确认按钮的开放能力,具体参考小程序文档,可选ButtonProps.openType-
sessionFromcconfirmOpenTypeconfirmOpenType="contact"时有效,详见文档,可选booleanfalse
sendMessageTitleconfirmOpenTypeconfirmOpenType="contact"时有效,详见文档,可选booleanfalse
sendMessagePathconfirmOpenTypeconfirmOpenType="contact"时有效,详见文档,可选booleanfalse
sendMessageImgconfirmOpenTypeconfirmOpenType="contact"时有效,详见文档,可选booleanfalse
showMessageCardconfirmOpenTypeconfirmOpenType="contact"时有效,详见文档,可选booleanfalse
appParameterconfirmOpenTypeconfirmOpenType=launchApp时有效,详见文档,可选string-
scope仅支持支付宝小程序且confirmOpenType="getAuthorize"生效,详见文档,可选string-
custom是否仅保留遮罩,完全自定义弹窗内容,可选booleanfalse
showCloseIcon是否显示关闭按钮,可选,showCloseIcon属性在未来版本中将被删除,请使用closeable代替booleantrue
closeable是否显示关闭按钮,可选booleantrue
closeIconPosition关闭icon位置,可选top-left | top-right | bottom-left | bottom-right | top | bottomtop-right

方法

函数名说明参数
onClose弹窗关闭时的回调,可选-
onCancel点击取消按钮时的回调,可选-
onConfirm弹窗确认按钮时的回调,可选-
onGetAuthorize仅支持支付宝小程序,且confirmOpenType="getAuthorize"时生效,详见文档,可选-
onErrorconfirmOpenType="launchApp"时生效,详见文档,可选-
onLaunchAppconfirmOpenType="launchApp""时生效,详见文档,可选-
onChooseAvatarconfirmOpenType="chooseAvatar"时生效,详见文档,可选-
onContactconfirmOpenType="contact"时有效,详见文档,可选-
onGetUserInfoconfirmOpenType="getUserInfo"时有效,详见文档,可选-
onGetPhoneNumberconfirmOpenType="getphonenumber"时有效,详见文档,可选-
onOpenSettingconfirmOpenType="openSetting"时有效,详见文档,可选-