介绍

所有可弹出组件的底层组件，可自定义弹出方向和内容。后弹出的弹出层总是比之前的层级要大。

引入

import Popup from 'sard-uniapp/components/popup/popup.vue'

代码演示

基础使用

使用 visible 控制显隐。 使用 effect 控制显隐效果。

vue lang="ts"

<template>
  <sar-popup v-model:visible="visible" :effect="effect">
    <view :class="bem.e('content')">
      <sar-button @click="onClick">跳转</sar-button>
    </view>
  </sar-popup>

  <sar-list card>
    <sar-list-item hover arrow title="顶部划出" @click="show('slide-top')" />
    <sar-list-item hover arrow title="右边划出" @click="show('slide-right')" />
    <sar-list-item hover arrow title="底部划出" @click="show('slide-bottom')" />
    <sar-list-item hover arrow title="左边划出" @click="show('slide-left')" />
    <sar-list-item hover arrow title="缩放" @click="show('zoom')" />
    <sar-list-item hover arrow title="淡入淡出" @click="show('fade')" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { createBem } from '@/utils'
import { PopupProps } from 'sard-uniapp'

const bem = createBem('popup')

const visible = ref(false)
const effect = ref<PopupProps['effect']>('fade')

const show = (e: PopupProps['effect']) => {
  visible.value = true
  effect.value = e
}

const onClick = () => {
  uni.navigateTo({
    url: `/pages/components/form/index`,
  })
}
</script>

<style lang="scss">
@import '@/style/index.scss';

@include bem(popup) {
  @include e(content) {
    flex: 1;
    padding: 40rpx;
    background-color: var(--sar-emphasis-bg);
  }
}
</style>

vue lang="js"

<template>
  <sar-popup v-model:visible="visible" :effect="effect">
    <view :class="bem.e('content')">
      <sar-button @click="onClick">跳转</sar-button>
    </view>
  </sar-popup>

  <sar-list card>
    <sar-list-item hover arrow title="顶部划出" @click="show('slide-top')" />
    <sar-list-item hover arrow title="右边划出" @click="show('slide-right')" />
    <sar-list-item hover arrow title="底部划出" @click="show('slide-bottom')" />
    <sar-list-item hover arrow title="左边划出" @click="show('slide-left')" />
    <sar-list-item hover arrow title="缩放" @click="show('zoom')" />
    <sar-list-item hover arrow title="淡入淡出" @click="show('fade')" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
import { createBem } from "@/utils";
const bem = createBem("popup");
const visible = ref(false);
const effect = ref("fade");
const show = (e) => {
  visible.value = true;
  effect.value = e;
};
const onClick = () => {
  uni.navigateTo({
    url: `/pages/components/form/index`
  });
};
</script>

<style lang="scss">
@import '@/style/index.scss';

@include bem(popup) {
  @include e(content) {
    flex: 1;
    padding: 40rpx;
    background-color: var(--sar-emphasis-bg);
  }
}
</style>

API

PopupProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
visible (v-model)	是否可见	boolean	false
duration	显隐动画时长，单位 ms	number	300
effect	显隐效果	'slide-top' | 'slide-right' | 'slide-bottom' | 'slide-left' | 'zoom' | 'fade'	'fade'
overlay	是否显示遮罩	boolean	true
overlay-class	添加到遮罩的类名	string	-
overlay-style	添加到遮罩的样式	string	-
background	遮罩背景色	string	-
transparent	透明遮罩	boolean	false
overlay-closable 1.22+	是否在点击遮罩层后关闭	boolean	true
keep-render 1.24.3+	无论刚挂载还是隐藏，都始终不设置 display 为 none，一般用于内部包含计算尺寸的组件的情况	boolean	false
lock-scroll 1.25.5+	弹出框显示时，是否阻止页面滚动	boolean	true
back-press 1.25.7+	弹出框显示时，劫持用户的返回操作，close: 关闭弹出框、back: 返回上一页（仅小程序支持）	'close' | 'back'	'close'

PopupSlots

插槽	描述	属性
default	自定义默认内容	-

PopupEmits

事件	描述	类型
overlay-click	点击遮罩时触发	(event: any) => void
update:visible 1.22+	显隐时触发	(visible: boolean) => void
back-press 1.25.7+	用户进行返回操作时触发，仅限于 close（仅小程序支持）	() => void
visible-hook	入场/退场动画状态改变时触发	(name: TransitionHookName) => void
before-enter	入场动画开始前触发	() => void
enter	入场动画开始时触发	() => void
after-enter	入场动画结束时触发	() => void
enter-cancelled	入场动画取消时触发	() => void
before-leave	退场动画开始前触发	() => void
leave	退场动画开始时触发	() => void
after-leave	退场动画结束时触发	() => void
leave-cancelled	退场动画取消时触发	() => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-popup-z-index: 1000;
  --sar-popup-duration: var(--sar-duration);
}