@besovideo/webclient-avatar
简介 Introduction
bvwebclient 的头像和头像编辑组件 vue3 版
安装 Installation
use npm
npm i @besovideo/webclient-avataruse 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