<template>
  <transition :name="transition">
    <div :class="classes" v-show="visible">
      <div v-if="hasArrow" data-popper-arrow></div>
      <slot name="content"></slot>
    </div>
  </transition>
</template>
<script>
import {prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-tip-paster',
  props: {
    // 动画
    transition: prop.string('n-opacity-s'),
    // 提示框class
    hasArrow: prop.boolean(true),
    // 提示框class
    classes: {
      default: 'n-paster-content'
    }
  },
  data () {
    return {
      visible: false
    }
  },
  onPasterShow () {
    this.setVisible(true)
  },
  onPasterHidden () {
    this.setVisible(false)
  },
  methods: {
    setVisible (value) {
      this.visible = value
    }
  }
}
</script>
