<template>
  <div class="demo-drawer-target">
    <div class="demo-box">
      <ui-button @click="showDrawerHandler">
        Open
      </ui-button>
      &nbsp;
      <ui-checkbox v-model="body">
        挂载到Body
      </ui-checkbox>
    </div>
    <div
      ref="box"
      class="target-container"></div>
    <ui-drawer
      :target="target"
      :visible.sync="visible"
      :mask-closable="false"
      title="Basic Drawer">
      <div style="height: 2000px"></div>
      <div slot="footer">
        <ui-button>测试</ui-button>
      </div>
    </ui-drawer>
  </div>
</template>

<script>
import { Drawer, Button, Checkbox } from "amumu-ui"
export default {
  components: {
    "ui-drawer": Drawer,
    "ui-button": Button,
    "ui-checkbox": Checkbox,
  },
  data() {
    return {
      visible: false,
      target: null,
      body: false,
    }
  },
  methods: {
    showDrawerHandler() {
      this.target = this.body ? true : this.$refs.box
      this.visible = true
    },
  },
}
</script>

<style lang="scss">
.demo-drawer-target {
  .target-container {
    height: 600px;
    overflow: hidden;
    position: relative;
    border: 1px solid #d9d9d9;
  }
}
</style>
