Appearance

iuiDesign
100%
02:32
本页目录

触发后，从屏幕一侧滑出的容器面板。

基本用法 ​

触发后 popup 从屏幕边缘滑入，点击遮罩区关闭。

html
<iui-popup ref="popup" title="Title">
  <view> Content area, click mask to close</view>
</iui-popup>

<script setup>
  import { ref } from "vue";

  const popup = ref(null);
  onMounted(() => {
    popup.value.open();
  });
</script>
<iui-popup ref="popup" title="Title">
  <view> Content area, click mask to close</view>
</iui-popup>

<script setup>
  import { ref } from "vue";

  const popup = ref(null);
  onMounted(() => {
    popup.value.open();
  });
</script>

手势关闭 ​

除了点击遮罩层关闭，popup 还可以通过 slide 属性控制手势关闭。

html
<iui-popup ref="popup" title="Title" slide>
  <view> Content area, click mask to close</view>
</iui-popup>
<iui-popup ref="popup" title="Title" slide>
  <view> Content area, click mask to close</view>
</iui-popup>

API ​

<Popup>props
参数描述类型默认值
modelValue (v-model)是否显示Booleanfalse
title标题String-
direction弹出方向top | bottom | left | rightbottom
mask是否显示遮罩层Booleantrue
maskClosable点击遮罩层是否关闭Booleantrue
slide是否开启手势关闭Booleanfalse
height弹出层高度（direction 为 top 或 bottom 时生效）Number330
width弹出层宽度（direction 为 left 或 right 时生效）Number290
containerStyle弹出层容器样式Object-
contentStyle弹出层内容样式Object-
<Popup>events
事件名描述参数
open打开弹出层事件-
close关闭弹出层事件-
<Popup>methods
方法名描述参数
open打开弹出层props: Object
close关闭弹出层-
<Popup>slots
插槽名描述参数
default自定义内容-
title自定义标题-
extra自定义右上角内容-