# Zm-Affix

### Install

```javascript
import Vue from 'vue';
import { zmAffix } from 'ZM';

Vue.use(zmAffix);
```

## Usage

### Basic Usage

```html
<div class="container" ref="container">
  <div class="box">
    <magic-affix
      :offsetTop="this.top"
      :offsetBottom="this.bottom"
      :target="() => this.$refs.container"
    >
      <magic-button type="primary" text="Affix inner top"></magic-button>
    </magic-affix>
  </div>
</div>
```

```javascript
export default {
  data() {
    return {
      top: 10,
      bottom: 10,
    };
  },

  methods: {},
};
```

## API

### Props

| Attribute    | Description    | Type              | Default      | Version |
| ------------ | -------------- | ----------------- | ------------ | ------- |
| offsetTop    | 顶部偏移量     | number            | -            | -       |
| offsetBottom | 底部偏移量     | number            | -            | -       |
| target       | 固钉监听的容器 | () => HTMLElement | () => window | -       |

### Events

| Event  | Description                  | Arguments                 |
| ------ | ---------------------------- | ------------------------- |
| change | 固钉状态改变时触发的回调函数 | Function(affixed:boolean) |

### Slots

| Name    | Description |
| ------- | ----------- |
| default | 自定义内容  |