<template>
  <div class="demo-dialog-target">
    <div class="demo-box">
      <ui-button @click="handleAlert">
        弹出提示
      </ui-button>
      &nbsp;
      <ui-checkbox v-model="body">
        挂载到Body
      </ui-checkbox>
    </div>
    <div
      ref="box"
      class="target-container"></div>
  </div>
</template>

<script>
import { Button, Checkbox } from "amumu-ui"
import { dialog } from "amumu-ui/src/factory"

export default {
  components: {
    "ui-button": Button,
    "ui-checkbox": Checkbox,
  },
  data() {
    return {
      body: false,
    }
  },
  methods: {
    handleAlert() {
      dialog.alert({
        target: this.body ? true : this.$refs.box,
        title: "提示",
        message: "提示内容。",
        type: "warning",
      })
    },
  },
}
</script>
<style lang="scss">
.demo-dialog-target {
  .target-container {
    height: 600px;
    position: relative;
    overflow: hidden;
  }
}
</style>
