<template>
  <div class="demo-notification-position">
    <ui-button @click="handleClick('top-right')">
      top-right
    </ui-button>
    <ui-button @click="handleClick('bottom-right')">
      bottom-right
    </ui-button>
    <ui-button @click="handleClick('bottom-left')">
      bottom-left
    </ui-button>
    <ui-button @click="handleClick('top-left')">
      top-left
    </ui-button>
  </div>
</template>

<script>
import { Button } from "amumu-ui"
import { notification } from "amumu-ui/src/factory"

export default {
  components: {
    "ui-button": Button,
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    handleClick(position) {
      notification.success({
        title: "通知",
        message: "通知内容。",
        position,
      })
    },
  },
}
</script>

<style lang="scss">
.demo-notification-position {
  .mm-button {
    margin-right: 1rem;
  }
}
</style>
