# Popup 组件

主要处理弹出逻辑的组件。

## 使用说明

Popup 组件会阻止组件内事件冒泡，并监听`document`的点击事件，在点击组件之外区域时，`emit`一个`close`事件，但组件本身不控制显示隐藏的逻辑

## API

| 参数   | 说明                  | 类型  | 默认值 |
| ------ | --------------------- | ----- | ------ |
| @close | 监听触发的 close 事件 | event | -      |

## 示例

::: demo

```html
<template>
  <div class="box-vue">
    <s-popup @close="close"
      ><div class="popup-float" :class="{show}">HI!!!!!</div></s-popup
    >
    <s-button type="primary" @click="toggle">{{show ? 'close': 'open'}}</s-button>
  </div>
</template>
<script>
  export default {
    data (){
      return {
        show: false,
      }
    },
    methods: {
      toggle() {
        if (this.show) {
          this.show = false
        } else {
          setTimeout(() => {
            this.show = true
          })
        }
      },
      close() {
        this.show = false
      }
    }
  };
</script>
<style>
  .popup-float {
    position: fixed;
    width: 300px;
    height: 100%;
    top: 0;
    right: -300px;
    background: red;
    z-index: 1000;
    color: #fff;
    text-align: center;
    transition: .3s right;
  }
  .popup-float.show {
    right: 0
  }
</style>
```

:::