vz-ui

主题

Popup 弹窗 ​

基础用法 ​

弹出位置通过 position 属性设置，可设置为 top bottom left right，默认 center

html
<vz-button block @click="handleShowPopup">弹出弹窗</vz-button>

<vz-popup v-model:show="isShowPopup" position="center" overlay-closeable>
  <view>内容</view>
</vz-popup>
typescript
import { ref } from "vue";

const isShowPopup = ref(false);
function handleShowPopup() {
  isShowPopup.value = true;
}

内容滚动 ​

html
<vz-button block @click="handleShowPopup">弹出弹窗</vz-button>

<vz-popup v-model:show="isShowPopup" position="center" overlay-closeable>
  <view class="popup">
    <scroll-view scroll-y class="popup_scroll">
      <view class="popup_content">
        <view v-for="item in 100" :key="item">{{ item }}</view>
      </view>
    </scroll-view>
  </view>
</vz-popup>
typescript
import { ref } from "vue";

const isShowPopup = ref(false);
function handleShowPopup() {
  isShowPopup.value = true;
}
scss
.popup {
  padding: 30rpx;
  width: 100%;
  height: 100%;

  &_scroll {
    width: 300rpx; // top 或 bottom 时 100%
    height: 300rpx; // left 或 right 时 100%
  }

  &_content {
    text-align: center;
  }
}

抽离组件 ​

MyPopup.vue

html
<vz-popup :show="show" position="center" @update:show="handleUpdateShow" @open="handleOpen" @close="handleClose">
  <view>内容</view>
</vz-popup>
typescript
interface Props {
  show: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
});

const emit = defineEmits(["update:show"]);

function handleUpdateShow() {
  emit("update:show", false);
}

function handleOpen() {
  // OPEN
}

function handleClose() {
  // CLOSE
}

MyPage.vue

html
<vz-button block @click="handleShowPopup">弹出弹窗</vz-button>

<MyPopup v-model:show="isShowPopup" :position="position" />
typescript
import MyPopup from "**/MyPopup";
import { ref } from "vue";

const isShowPopup = ref(false);
function handleShowPopup() {
  isShowPopup.value = true;
}

Props ​

属性名说明类型默认值样式变量
v-model:show是否显示弹窗booleanfalse-
position弹出位置center / top / bottom / left / rightcenter-
z-indexz-indexnumber / stringcalc(var(--vz-z-index) + 100)--vz-popup-z-index
background背景。透明 transparentstring--vz-bg-color--vz-popup-background
radius圆角string / number0rpx--vz-popup-radius
closeable是否显示关闭按钮booleantrue-
close-icon关闭按钮图标iconvz-icon-close-
close-size关闭按钮尺寸string / number--vz-font-size-large--vz-popup-close-size
close-color关闭按钮颜色string--vz-color-info--vz-popup-close-color
close-position关闭按钮位置top-right / top-left / bottom-left / bottom-righttop-right-
close-edge关闭按钮据边缘距离string / number20rpx--vz-popup-close-edge
overlay是否显示遮罩层booleantrue-
overlay-closeable点击遮罩层是否关闭弹窗booleanfalse-
overlay-background遮罩层背景overlay--
animation是否使用 animation 动画booleanfalse-
duration动画时长（设置为 0 可关闭动画）。单位 msnumber250-
safe-area-inset-bottom是否开启顶部安全区适配booleanfalse-
safe-area-inset-top是否开启底部安全区适配booleanfalse-
navbar-height自定义 navbar 高度。默认单位 pxstring / number / "auto"--window-top--vz-popup-navbar-height
tabbar-height自定义 tabbar 高度。默认单位 pxstring / number / "auto"--window-bottom--vz-popup-tabbar-height
i-class根节点样式类string--
i-style弹窗样式Vue.StyleValue--

相关说明 ​

  • 弹窗不覆盖 WEB 端默认的 navbar 及 tabbar。如需覆盖（仅 WEB 端），设置 z-index 层级高于 998 (uni 默认)，同时设置 navbarHeight: 0px 或 tabbarHeight: 0px

  • 弹窗覆盖自定义 navbar 及 tabbar。如需不覆盖，设置 z-index 层级低于自定义 navbar 及 tabbar (vz 默认 500)，同时设置 navbarHeight 或 tabbarHeight 为对应的自定义 navbar 或 tabbar 高度（不包含安全区域，需另外设置 safeAreaInsetTop: true 或 safeAreaInsetBottom: true）

  • 如使用本组件的 navbar 或 tabbar，设置 navbar-height: auto 或 tabbar-height: auto，会自动获取相应高度

Events ​

事件名说明参数
open打开时触发-
opened打开动画结束时触发-
close关闭时触发-
closed关闭动画结束时触发-

Slots ​

插槽名说明
default默认插槽

CSS ​

变量名默认值描述
--vz-popup-offset-y0px弹窗居中时垂直偏移量

SCSS ​

scss
$popup: (
  "z-index": calc(var(--vz-z-index) + 100)),
  "background": var(--vz-bg-color),
  "radius": 0rpx,
  "close-size": var(--vz-font-size-large),
  "close-color": var(--vz-color-info),
  "close-edge": 20rpx,
);