@besovideo/webclient-avatar

简介 Introduction

bvwebclient 的头像和头像编辑组件 vue3 版

安装 Installation

use npm

npm i @besovideo/webclient-avatar

use yarn

yarn add @besovideo/webclient-avatar

使用 Usage

Vue3 Component Example

<template>
  <Avatar
    :type="type"
    :targetId="id"
    :token="'Y3UrQ1VfYWRtaW4rYWRtaW4rMTg3NSs3ODU3NDArMTYyNTczOTc2NSs5Yzk0ODIwNjJlOGNhZjJj'"
    :apiPrefix="'http://192.168.88.11:9780'"
    size="40px"
    editable
    @on-info="handleInfo"
    @on-error="handleError"
    :style="{ marginRight: '16px' }"
  />
</template>

<script>
import { defineComponent, reactive, toRefs } from "@vue/runtime-core";
import { Avatar, SetDefaultImage } from "@besovideo/webclient-avatar";
import "@besovideo/webclient-avatar/dist/style.css";

//设置全局默认头像，type支持'User'、‘PU’、'IMGroup'
//SetDefaultImage(type, url)

export default defineComponent({
  components: {
    Avatar,
  },
  setup() {
    const state = reactive({
      type: "User",
      id: "admin",
    });

    const handleError = (e) => {
      console.error("test AvatarEditor", e.message);
    };

    const handleInfo = (msg) => {
      console.log("test AvatarEditor info", msg);
    };

    return {
      ...toRefs(state),
      handleError,
      handleInfo,
    };
  },
});
</script>

Props

export default {
  // 事件 @on-error @on-info
  emits: ["on-error", "on-info"],
  props: {
    // type 类型 用户'User' 、 设备‘PU’ 、 群组'IMGroup'
    type: {
      type: String,
      required: true,
    },
    // targetId 用户或者设备Id 与type对应
    targetId: {
      type: String,
      required: true,
    },
    // editable 头像是否可被编辑 为true时 点击头像将弹出头像编辑
    editable: {
      type: Boolean,
      default: () => false,
    },
    // size 大小 对应css height width 可取像素或百分比等 -eg: 100px、 100%
    size: {
      type: String,
      default: "40px",
    },
    // circle 是否是圆形
    circle: {
      type: Boolean,
      default: false,
    },
    // token 用户授权令牌
    token: {
      type: String,
      default: "",
    },
    // apiPrefix 请求的url路径前缀 -eg: '/test_prefix' 、 'http://192.168.88.11:9780'
    apiPrefix: {
      type: String,
      default: "",
    },
    // defaultImage设置查询头像失败的默认显示图片
    defaultImage: {
      type: String || Boolean,
      default: false,
    },
  },
};

开发 Dev

# 开发运行
yarn
yarn dev

# 打包和发布
yarn build
yarn publish