<template>
  <div class="kole-popover kole-popover-popover-wrap"><button class="kole-popover-button kole-popover-primary" type="button" :aria-expanded="open" @click="open = !open">查看信息</button><div v-if="open" class="kole-popover-popover" role="dialog">{{ content }}</div></div>
</template>

<script>
export default {
  name: 'KolePopover',
  props: {
    content: { type: String, default: '这里可以放解释、统计或操作。' }, // 内容
    placement: { type: String, default: 'bottom' }, // 弹出位置
    trigger: { type: String, default: 'click' }, // 触发方式
    open: { type: Boolean, default: false }, // 是否展开
  },
  data: function () { return { open: false }; },
  // events: open, close
};
</script>

<style src="./Popover.css"></style>
