支持 Vue2/Vue3 版本 无差别使用

安装

npm i @blueking/login-userinfo

使用

• vue3框架下使用

<template>
  <div class="app">
    <BkLoginUserinfo :userinfo="userinfo">
      <template #action>
        <ActionItem @click="handleClick('个人中心')">
          <template #icon>
            <Qq />
          </template>
          个人中心
        </ActionItem>
        <ActionItem>
          <template #icon>
            <Qq />
          </template>
          权限中心
        </ActionItem>
        <ActionItem
          href="/logout"
          target="_blank"
          theme="danger"
        >
          <template #icon>
            <Qq />
          </template>
          退出登录
        </ActionItem>
      </template>
    </BkLoginUserinfo>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { Qq } from 'bkui-vue/lib/icon';

  import BkLoginUserinfo, { ActionItem } from '@blueking/login-userinfo';
  import('@blueking/login-userinfo/vue3/vue3.css');

  // vue3 支持 action slot 和 actionList 两种方式

  const userinfo = ref({
    name: 'admin',
    email: '[email protected]',
    organization: '蓝鲸智云',
    timezone: 'Asia/Shanghai (UTC+08:00)',
  });
</script>

• vue2框架下使用

<template>
  <div class="app">
    <BkLoginUserinfo :userinfo="userinfo" :actionList="actionList" />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

  import BkLoginUserinfo from '@blueking/login-userinfo/vue2';
  import('@blueking/login-userinfo/vue2/vue2.css');

  const userinfo = ref({
    name: 'admin',
    email: '[email protected]',
    organization: '蓝鲸智云',
    timezone: 'Asia/Shanghai (UTC+08:00)',
  });

  const actionList = [
    {
      text: '个人中心',
      icon: 'Qq',
      href: '/user/center',
      target: '_blank',
      theme: 'primary' as const,
    },
  ]
</script>

BkLoginUserinfo 属性列表

| 属性名 | 描述 | 属性类型 | 默认值 | | ------ | ---- | -------- | ------ |

| userinfo | 登录用户信息 | object | -- |

| offset | 详细信息面板位置偏移(x, y) | number [number, number] | 10 |

| actionList | 详细信息面板支持的操作（vue3 同时支持 action slot） | array | 10 |

actionList 类型

const actionList = [
  {
    text: '个人中心',
    icon: 'Qq',
    href: '/user/center',
    target: '_blank',
    theme: 'primary' as const,
  },
]