<script>
    export default {
        data(){
            return {
                isReverse:false,
                showFiltersPopup:false,
                defaultColor:'default',
            }
        },
        mounted(){
        },
        methods:{
            changePopupState(){
                this.showFiltersPopup = !this.showFiltersPopup
            }
        }
    }
</script>
# popup

:::demo
```html
<popup :reverse="isReverse" height="300" v-model="showFiltersPopup" id="filters-popup-1">
    <button @click.stop="changePopupState()">显示/隐藏</button>
</popup>
<button @click.stop="changePopupState()">显示/隐藏</button>
```
:::



### Popup Attributes
| 参数      | 说明          | 类型      | 可选值       | 默认值  |
|---------- |------------- |---------------|------------  |-------- |
| isReverse | popup弹出方向 | `Boolean` | — | false |
| height | popup弹出框高度 | `Number` | — | — |
| value | 表单值，使用 v-model 绑定。是否弹出popup | `Boolean` | — | — |
| mask | 是否显示背景浮层 | `Boolean` | — | true |

### Popup Event
| 名称      |  参数       | 描述 |
|---------- |------------- |---------------|
| on-first-show | (Params) | — |
| on-show | (Params) | — |
| on-hide | (Params) | — |
