@blueking/login-userinfo

支持 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
          theme="danger"
          @click="handleLogout"
        >
          <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: 'admin@gmail.com',
    organization: '蓝鲸智云',
    timezone: 'Asia/Shanghai (UTC+08:00)',
  });

  const handleLogout = () => {
    console.log('handleLogout');
  };
</script>

• vue2框架下使用

<template>
  <div class="app">
    <BkLoginUserinfo
      :userinfo="userinfo"
      :renderSlot="renderSlot"
      :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: 'admin@gmail.com',
    organization: '蓝鲸智云',
    timezone: 'Asia/Shanghai (UTC+08:00)',
  });

  // vue2 不支持 slot 方式，使用 renderSlot
  const renderSlot = h => {
    return h('bk-user-display-name', { userid: 'xxxx' });
  };

  const actionList = [
    {
      text: '个人设置',
      icon: 'Qq',
      href: '/user/center',
      target: '_blank',
      theme: 'primary' as const,
    },
    {
      text: '退出',
      // icon slot
      renderIcon: () => h(Qq),
      theme: 'danger' as const,
      handle: () => {
        console.log('退出');
      },
    },
  ];
</script>

BkLoginUserinfo 属性列表

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

| tenant | 租户信息 { id, name }，与 userinfo.organization 二选一展示，配置后优先级高于 userinfo.organization；hover 展示租户 ID，点击可复制 | object | -- |

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

| trigger | 详细信息面板的触发方式 | 'click' 'mouseenter' 'focus' | 'click' |

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

actionList 类型

const actionList = [
  {
    text: '个人设置',
    // icon 设置
    icon: 'Qq',
    renderIcon: (h) => h('Qq'),
    // 如果是 url 配置
    href: '/user/center',
    // 如果是 url 配置
    target: '_blank',
    // 如果是点击是件配置
    handle?: () => {},
    theme: 'primary' as const,
  },
]