跳到主要内容

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}
showCloseIcon={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
custom是否仅保留遮罩,完全自定义弹窗内容,可选booleanfalse
showCloseIcon是否显示关闭icon,可选booleantrue
closeIconPosition关闭icon位置,可选top-left | top-right | bottom-left | bottom-right | top | bottomtop-right

方法

函数名说明参数
onClose弹窗关闭时的回调,可选-
onCancel点击取消按钮时的回调,可选-
onConfirm弹窗确认按钮时的回调,可选-