支持 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: '[email protected]',
    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: '[email protected]',
    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: 'Qq',
      theme: 'danger' as const,
      handle: () => {
        console.log('退出');
      },
    },
  ];
</script>

BkLoginUserinfo 属性列表

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

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

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

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

actionList 类型

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