# 弹出窗口

`Vue3` 引入方式

```html
<script>
  import pop from "@soei/pop/dist/Pop.js";
</script>
<!-- 非 <style scoped>  scoped-->
<style>
  @import "@soei/pop/dist/style.css";
</style>
```

`或`

```javascript
// main.js
import "@soei/pop/dist/style.css";
import pop from "@soei/pop/dist/Pop.js";
Vue.use(pop);
// use.vue
<s-pop ...></s-pop>
```

## `安装`

```
npm i @soei/pop

```

## `引用`

```javascript
// 引入方式 vue
import Pop from "@soei/pop";
```

## `使用`

```html
<Pop
  :visible="visible"
  dark
  [tr|rt|rb|br|lt|tl|lb|bl]
  center
  duration="0.5s"
  width="100% / 3"
  height="100% - 220px"
>
  ...
</Pop>
```

```html
<Pop [attrs]></Pop>
```

### _`dark`_ 黑色

```javascript
// 格式
Number;
dark;
```

### _`visible`_ `显示` | `隐藏`

```javascript
// 格式
Boolean;
:visible="true";
```

### _`center`_ 居中

参照 `tr` | `rt`

```javascript
// 格式
center;
```

### _`inset`_ 偏移量

```javascript
:inset="[0,10]"
```

### _`tr` | `rt` | `rb` | `br` | `lt` | `tl` | `lb` | `bl`_ 黑色

`:inset`内的索引和 tr 的顺序优化 inset=[`top`, `right`] 的取值 取值参照 `tr`| 'rt'顺序

```javascript
位置
tr
...
```

### _`duration`_ 动画执行时间

```javascript
duration = "0.5s";
```

### _`width`_ 显示宽

```javascript
width = "100% / 3";
```

### _`height`_ 显示高度

```javascript
height = "100% - 220px";
```