---
title: 弹窗组件
date: 2023-07-17
---
[[toc]]

## 1. jt-popup 简介
- 通用弹窗组件

## 2.Warning 

::: warning 注意
- 所有px像素单位需要改为rem使用！
:::


## 3. jt-popup API
| 属性名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| height |  高度  | String |   否 |
| title |  标题  | String |   否 |
| right |  距离右侧距离  | String |   否 |
| top |  距离顶部距离  | String |   否 |
| width |  宽度  | String |   否 |
| isEmit |  是否触发回调函数  | Boolean |   否 |
| animationClass |  组件弹出方向/slide-right右，slide-left左，slide-bottom下  | String |   否 |
| showfooter |  是否显示底部图片  | Boolean |   否 |
| minWidth |  最小宽度  | String |   否 |
| longheader |  是否显示底部图片  | Boolean |   否 |



## 4. 代码示例
```
<jt-popup title="地图打印" showfooter="false" isEmit="true" longheader="1" right="calc(50% - 480rem)" width="960rem" top="calc(50% - 270rem)" height="600rem">
	
</jt-popup>

```

<style>
    blockquote {
  line-height: 22px;
  border-radius: 5px;
  display: block;
  margin-bottom: 0.8em;
  font-family: "黑体";
  background: rgba(230,162,60,.1) !important;
  border-color: #f56c6c;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
  padding-left: 1em;
}


blockquote p {
  padding-left: 3px; 
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
}

blockquote code {
  background: rgba(230,162,60,.1) !important;
  font-weight: bold;
}
</style>