<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">Popover</div>
    </div>
    <h3>基本示例</h3>
    <NavBar mode="dark">
      标题
      <span slot="right">
        <Popover mask :visible.sync="visible" @onVisibleChange="onVisibleChange">
          <template slot="content">
            <PopoverItem @onSelect="handleSelect">
              <template slot="icon"><Icon type="exclamation-circle"/></template>
              <span>文案</span>
            </PopoverItem>
            <PopoverItem @onSelect="handleSelect">
              <template slot="icon"><Icon type="voice"/></template>
              <span>文案</span>
            </PopoverItem>
            <PopoverItem @onSelect="handleSelect">
              <template slot="icon"><Icon type="info-circle"/></template>
              <span>文案</span>
            </PopoverItem>
          </template>
          <template slot="trigger">
            <Icon type="ellipsis"></Icon>
          </template>
        </Popover>
      </span>
    </NavBar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {
    handleSelect () {
      this.visible = false
    },
    onVisibleChange (visible) {
      console.log(visible)
    }
  }
}
</script>