0.0.18 • Published 6 months ago
@besovideo/webclient-avatar v0.0.18
@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
0.0.16
6 months ago
0.0.17
6 months ago
0.0.18
6 months ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.11
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago