UNI-UI

安装

``shell
npm install @utoolkits/im-sdk
npm install @utoolkits/ui
// 或
npm install @utoolkits/im-sdk
yarn add @utoolkits/ui
`

完整引入

`js
import UNUI from "@utoolkits/ui";
import "@utoolkits/ui/dist/style.css";
`

按需引入

`js
import { ChatList, MessageReviewList } from "@utoolkits/ui";
import "@utoolkits/ui/dist/style.css";
`

组件列表

$3

`js
import { ref } from "vue";
import { ChatList, MessageReviewList } from "@utoolkits/ui";
import "@utoolkits/ui/dist/style.css";
// 接收 im 实例
let env = "test";
let token =
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0aW1lIjoxNjgzNjc5MDkyMjA0LCJleHAiOjg2NDAxNjgzNTkyNjkyLCJ1c2VySWQiOjZ9.jcL-OX5M85m8gOCBDjQzz4UsIz5lHRGPSiRGr4YNAPE";
let liveRoomId = "1";
let imInstance = ref(null);
const onIMInstanceInitialized = (im) => {
imInstance.value = im;
};
const members = ref([]);
const onJoin = (res) => {
members.value.push(res);
};
const onExit = (res) => {
const index = members.value.findIndex((item) => item.userId === res.userId);
if (index > -1) {
members.value.splice(index, 1);
}
};
`

`html


`js
let messageReviewListRef = ref(null);
// 删除top10
const onDeleteTop = () => {
messageReviewListRef.value.deleteTopMessages(10);
};
`

`html
删除前10条
ref="messageReviewListRef"
:imInstance="imInstance"
:liveRoomId="liveRoomId"
>
`

#### 属性

| 属性 | 描述 | 默认值 |
| ---------- | ---------------- | ------ |
| imInstance | im 实例(必填) | - |
| liveRoomId | 房间 ID(必填) | - |
| isActivate | 当前展示审核列表 | false |

#### 方法

| 方法 | 描述 | 默认值 |
| ----------------------------- | ---------------- | ------ |
| deleteTopMessages(pos:number) | 删除前多少条消息 | - |

$3

`js
import { OnlineAudienceList } from "@utoolkits/ui";
`

`html
ref="onlineAudienceListRef"
:imInstance="imInstance"
:liveRoomId="liveRoomId"
show-detail-btn
>
`

#### 属性

| 属性 | 描述 | 默认值 |
| ------------- | ------------------------------------------------ | --------- |
| imInstance | im 实例(必填) | - |
| liveRoomId | 房间 ID(必填) | - |
| showDetailBtn | 展示详情按钮 | false |
| input | 搜索过滤条件 | "" |
| channleIds | 渠道数组 | [] |
| filterFn | 自定义过滤函数，当希望支持更细过滤时可以考虑使用 | ()=> true |
| theme | light、dark | light |
| size | small、medium | medium |

#### 方法

| 名称 | 描述 | 默认值 |
| ----- | ---- | ------ |
| query | 查询 | - |

#### 事件

| 名称 | 描述 | 默认值 |
| ------------- | ------ | ------ |
| total(number) | 在线数 | - |

$3

`js
import { OnlineAssistantList } from "@utoolkits/ui";
`

`html
ref="onlineAssistantListRef"
:env="env"
:token="token"
:imInstance="imInstance"
:liveRoomId="liveRoomId"
show-detail-btn
>
`

#### 属性

| 属性 | 描述 | 默认值 |
| ------------- | ------------------------------------------------ | --------- |
| env | 环境变量(必填) | - |
| token | 凭证(必填) | - |
| imInstance | im 实例(必填) | - |
| liveRoomId | 房间 ID(必填) | - |
| showDetailBtn | 展示详情按钮 | false |
| input | 搜索过滤条件 | "" |
| channleIds | 渠道数组过滤 | [] |
| filterFn | 自定义过滤函数，当希望支持更细过滤时可以考虑使用 | ()=> true |
| theme | light、dark | light |
| size | small、medium | medium |

#### 方法

| 名称 | 描述 | 默认值 |
| ----- | ---- | ------ |
| query | 查询 | - |

#### 事件

| 名称 | 描述 | 默认值 |
| ------------- | ------ | ------ |
| total(number) | 在线数 | - |

$3

#### 属性

| 属性 | 描述 | 默认值 |
| --------- | -------------- | --------------------- |
| loadData | 请求数据方法 | 需要传入 Promise 对象 |
| colums | 表格列 | - |
| selection | 显示多选框 | false |
| showIndex | 显示列表索引 | false |
| size | 每页展示多少条 | 10 |

#### 方法

| 方法 | 描述 | 默认值 |
| ---------------- | ---------------- | ------ |
| getSelectionRows | 返回当前选中的行 | - |
| clearSelection | 清空用户的选择 | - |

#### 事件

| 事件 | 描述 | 默认值 |
| ---------------- | ------------------------------ | ------ |
| selection-change | 当选择项发生变化时会触发该事件 | - |

#### 案例

`html


`js
import { computed } from "vue";
import { VTable } from "@utoolkits/ui";

const input = ref("");
function getData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
current: 1,
records: [
{
id: 1,
name: "抖音直播运营变现",
time: "2020-12-12 12:12:12",
status: false,
},
{
id: 2,
name: "3抖音直播运营变现",
time: "2020-12-12 12:12:12",
status: false,
},
{
id: 3,
name: "2抖音直播运营变现",
time: "2020-12-12 12:12:12",
status: true,
},
{
id: 4,
name: "1抖音直播运营变现",
time: "2020-12-12 12:12:12",
status: true,
},
{
id: 2,
name: "课程名称",
time: "2020-12-12 12:12:12",
status: false,
},
{
id: 3,
name: "课程名称",
time: "2020-12-12 12:12:12",
status: true,
},
{
id: 4,
name: "课程名称",
time: "2020-12-12 12:12:12",
status: false,
},
],
total: 100,
});
}, 3000);
});
}
const colums = [
{
label: "ID",
prop: "id",
},
{
label: "姓名",
prop: "name",
},
{
label: "时间",
prop: "time",
},
{
label: "状态",
prop: "status",
},
];
const loadData = async (parameter) => {
return getData({
...parameter,
name: input.value,
});
};
const tableRef = ref(null);
const isLoading = computed(() => tableRef.value?.isLoading);
const onSerach = () => {
tableRef.value.query();
};
const onSelectionRow = () => {
console.log(tableRef.value.getSelectionRows());
};
const onClean = () => {
tableRef.value.clearSelection();
};
const onSelectionChange = (selection) => {
console.log(selection);
};
``