Rainui

Appearance

r-popup ​

r-popup 是一个基于 animate.css 的一个uniapp vue3 的弹出层容器，用于展示弹窗、信息提示等内容。

示例 ​

vue
<template>
  <r-config-provider :themeName="themeName">
    <page-header title="弹出层"></page-header>
    <view style="padding: 20rpx">
      <r-divider content-position="left">弹出位置 </r-divider>
      <r-cell-group>
        <r-cell
          is-link
          title="顶部弹出"
          @click="
            open({
              position: 'top',
            })
          "
        />
        <r-cell
          is-link
          title="底部弹出"
          @click="
            open({
              position: 'bottom',
            })
          "
        />
        <r-cell
          is-link
          title="左侧弹出"
          @click="
            open({
              position: 'left',
            })
          "
        />
        <r-cell
          is-link
          title="右侧弹出"
          @click="
            open({
              position: 'right',
            })
          "
        />
        <r-cell
          is-link
          title="居中弹出"
          @click="
            open({
              position: 'center',
            })
          "
        />
      </r-cell-group>

      <r-divider content-position="left">关闭图标 </r-divider>

      <r-cell-group>
        <r-cell
          is-link
          title="关闭图标"
          @click="
            open({
              closeable: true,
            })
          "
        />
        <r-cell
          is-link
          title="自定义图标"
          @click="
            open({
              closeable: true,
              closeIcon: 'close',
            })
          "
        />
        <r-cell
          is-link
          title="图标位置"
          @click="
            open({
              closeable: true,
              closeIconPosition: 'top-left',
            })
          "
        />
      </r-cell-group>

      <r-divider content-position="left">圆角弹窗 </r-divider>
      <r-cell-group>
        <r-cell
          is-link
          title="圆角弹窗（居中）"
          @click="
            open({
              round: true,
              position: 'center',
            })
          "
        />
        <r-cell
          is-link
          title="圆角弹窗（底部）"
          @click="
            open({
              round: true,
              position: 'bottom',
            })
          "
        />
      </r-cell-group>
    </view>

    <r-popup
      v-model:show="show"
      :round="popupParams.round"
      :position="popupParams.position || 'bottom'"
      :closeable="popupParams.closeable"
      :close-icon="popupParams.closeIcon || 'cross'"
      :close-icon-position="popupParams.closeIconPosition || 'top-right'"
      @click-close-icon="show = false"
      safeAreaInsetTop
      safeAreaInsetBottom
      :customStyle="{
        marginTop: !['bottom', 'center'].includes(popupParams.position)
          ? '92rpx'
          : '0',
      }"
    >
      <view style="height: 100px; background-color: #fff">11111</view>
    </r-popup>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const show = ref(false);
const popupParams = ref({});
const open = (e) => {
  popupParams.value = e;
  show.value = true;
};
</script>

API ​

Props ​

参数说明类型默认值可选值
show是否显示弹出层Booleanfalsetrue
overlay是否显示遮罩层Booleantruefalse
position弹出位置Stringcentertop | bottom | right | left | center
overlayClass自定义遮罩层类名String""-
overlayStyle自定义遮罩层样式Object{}-
duration动画时长，单位毫秒，设置为 0 可以禁用动画Number300-
zIndex将弹窗的 z-index 层级设置为一个固定值Number2000-
round是否显示圆角Booleanfalsetrue
lockScroll是否锁定背景滚动Booleantruefalse
closeOnClickOverlay是否在点击遮罩层后关闭Booleantruefalse
themeName主题名称Stringdefault可自定义 r-theme 设置
closeable是否显示关闭图标Booleanfalsetrue
closeIcon闭图标名称或图片链接，等同于 r-icon 组件的 name 属性Stringcross-
closeIconPosition关闭图标位置Stringtop-righttop-left | bottom-left | bottom-right | top-right
iconPrefix图标类名前缀，等同于 r-icon 组件的 prefix 属性Stringvan-iconiconfont
safeAreaInsetTop是否开启顶部安全区适配Booleanfalsetrue
safeAreaInsetBottom是否开启底部安全区适配Booleanfalsetrue
customStyle自定义样式Object{}-
customClass自定义类String

Slots ​

名称说明
default组件内部，将需要添加内容放置于此

Events ​

事件名说明回调参数
click点击弹出层时触发e
click-overlay点击遮罩层时触发e
click-close-icon点击关闭图标时触发e
open打开弹出层时立即触发-
close关闭弹出层时立即触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
update:showvalue 值改变时触发value

更多组件，请前往rainui