Popup 弹出层

使用指南

组件介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示

引入方式

import { Popup } from "feart";
components:{
  'fe-popup':Popup
}
data() {
  return {
    showdefault: false,
    showCenter: false,
    showTop: false,
    showBottom: false,
    showLeft: false,
    showRight: false,
    showContainer: false,
    showClose: false,
    showClose1: false,
    showClose2: false,
    showRound: false,
  };
}

代码演示

默认 Popup 从上下左右弹出

使用 :style设置样式

<fe-popup v-model="showTop" position="top" :style="{ height: '30%' }">
  <div class="popupTop">上上</div>
</fe-popup>

<fe-popup v-model="showBottom" position="bottom" :style="{ height: '30%' }">
  <div class="popupBottom">下下</div>
</fe-popup>

<fe-popup v-model="showLeft" position="left" :style="{ width: '30%', height: '100%' }">
  <div class="popupLeft">左左</div>
</fe-popup>

<fe-popup v-model="showRight" position="right" :style="{ width: '30%', height: '100%' }">
  <div class="popupRight">右右</div>
</fe-popup>

指定挂载节点

<fe-popup v-model="showContainer" get-container="body">
  <div class="popupRight">Container</div>
</fe-popup>

<!-- 挂载到 body 节点下 -->
<fe-popup v-model="showContainer" get-container="body" :style="{ padding: '30px 50px' }">
  <div class="popup">Container</div>
</fe-popup>

<!-- 挂载到 #root 节点下 -->
<fe-popup v-model="showContainer" get-container="#root" :style="{ padding: '30px 50px' }">
  <div class="popup">Container</div>
</fe-popup>

<!-- 通过函数指定挂载位置 -->
<fe-popup v-model="showContainer" :get-container="getContainer" :style="{ padding: '30px 50px' }">
  <div class="popup">Container</div>
</fe-popup>

export default {
  methods: {
    // 返回一个特定的 DOM 节点，作为挂载的父节点
    getContainer() {
      return document.querySelector('.my-node');
    },
  },
};

圆角 Popup

<fe-popup v-model="showRound" round position="bottom" :style="{ height: '30%' }">
  <div class="popup">圆角Popup</div>
</fe-popup>

关闭图标

关闭图标
<fe-popup v-model="showClose" closeable position="bottom" :style="{ height: '30%' }">
  <div class="popup"></div>
</fe-popup>

自定义关闭图标
<fe-popup
  v-model="showClose1"
  closeable
  close-icon="closed"
  position="bottom"
  :style="{ height: '30%' }"
>
  <div class="popup"></div>
</fe-popup>

自定义位置
<fe-popup
  v-model="showClose2"
  closeable
  position="bottom"
  close-icon-position="top-left"
  :style="{ height: '30%' }"
>
  <div class="popup"></div>
</fe-popup>

API

Slots

Events