介绍

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

代码演示

基础使用

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

vue ts

<template>
  <s-popup v-model:visible="visible" :effect="effect">
    <div class="content">
      <s-button block @click="onClick">跳转</s-button>
    </div>
  </s-popup>

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

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { type PopupProps } from 'sard'

const router = useRouter()

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

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

const onClick = () => {
  router.push(`/components/form`)
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  padding: 60px;
  background-color: var(--s-bg-color-elevated);
}
</style>

vue js

<template>
  <s-popup v-model:visible="visible" :effect="effect">
    <div class="content">
      <s-button block @click="onClick">跳转</s-button>
    </div>
  </s-popup>

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

<script setup lang="js">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import 'sard'
const router = useRouter()
const visible = ref(false)
const effect = ref('fade')
const show = (e) => {
  visible.value = true
  effect.value = e
}
const onClick = () => {
  router.push(`/components/form`)
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  padding: 60px;
  background-color: var(--s-bg-color-elevated);
}
</style>

API

PopupProps

属性	描述	类型	默认值
visible	是否可见	boolean	false
effect	显隐效果	PopupEffect	'fade'
overlay	是否显示遮罩	boolean	true
overlay-class	添加到遮罩的类名	string	-
overlay-style	添加到遮罩的样式	string	-
background	遮罩背景色	string	-
transparent	透明遮罩	boolean	false
overlay-closable	是否在点击遮罩层后关闭	boolean	true
lock-scroll	弹出框显示时，是否阻止页面滚动	boolean	true
lazy	是否延迟渲染弹窗内容（在弹窗初次显示时才渲染）	boolean	true
destroy-on-close	在关闭弹窗时是否销毁内容	boolean	false

PopupEffect

type PopupEffect =
  | 'slide-top'
  | 'slide-right'
  | 'slide-bottom'
  | 'slide-left'
  | 'zoom'
  | 'fade'
  | 'full-fade'

PopupSlots

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

PopupEmits

继承 MotionEmits。

事件	描述	类型
overlay-click	点击遮罩时触发	(event: MouseEvent) => void
update:visible	显隐时触发	(visible: boolean) => void