跳到主要内容

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弹窗确认按钮时的回调，可选-