Popup 弹出层

基础用法

代码演示

测试内容

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref<Boolean>(false);
</script>

<template>
  <s-button @click="visible = true">打开</s-button>
  <s-popup v-model="visible" show-close>
    <p>测试内容</p>
  </s-popup>
</template>

隐藏遮罩

将 overlay 设为 false

显示内容

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref<Boolean>(false);
</script>

<template>
  <s-button @click="visible = true">打开</s-button>
  <s-popup v-model="visible" :overlay="false" show-close>
    <p style="margin: 10px;">显示内容</p>
  </s-popup>
</template>

弹出方向

通过 direction 属性的 ttb rtl btt ltr 设定弹出方向，当值为 '' 空时默认居中

上

右

下

左

弹出层

<script setup lang="ts">
import { ref } from 'vue';

const direction = ref('');
const visible = ref<Boolean>(false);
</script>

<template>
  <s-radio v-model="direction" value="ttb">上</s-radio>
  <s-radio v-model="direction" value="rtl">右</s-radio>
  <s-radio v-model="direction" value="btt">下</s-radio>
  <s-radio v-model="direction" value="ltr">左</s-radio>
  <s-button @click="visible = true" style="margin-left: 15px;">打开</s-button>
  <s-popup v-model="visible" :direction="direction">
    <span>弹出层</span>
  </s-popup>
</template>

API

Popup Attributes

名称	说明	类型	默认值
overlay	是否显示遮罩层	boolean	true
destroy-on-close	关闭时销毁元素	boolean	false
show-close	是否显示关闭按钮	boolean	false
direction	弹出方向	enum	''
close-on-click-overlay	点击遮罩时关闭	boolean	true

Popup Events

名称	说明	类型
close	弹出层关闭回调	Function

Popup CSS

名称	说明	默认值
--s-popup-padding	内边距	20px
--s-popup-z-index	层级	1