<template>
  <hive-dropdown
    trigger-type="click"
    @item-click="onItemClick"
    :width="popupWidthHandler"
  >
    <span class="demo-dropdown-trigger">
      我的 <hive-icon icon="carret_down" />
    </span>

    <template v-slot:dropdown>
      <hive-dropdown-menu class="demo-item-click">
        <hive-dropdown-item index="1">
          个人设置
        </hive-dropdown-item>
        <hive-dropdown-item index="2">
          更多设置
        </hive-dropdown-item>
        <hive-dropdown-item
          index="3"
          disabled
        >
          反馈意见
        </hive-dropdown-item>
        <hive-dropdown-item
          index="4"
          divided
        >
          退出登录
        </hive-dropdown-item>
      </hive-dropdown-menu>
    </template>
  </hive-dropdown>
</template>

<script>
export default {
  methods: {
    onItemClick(index) {
      console.log(index);
    },
    popupWidthHandler() {
      return 100;
    }
  }
};
</script>
