@utoolkits/ui v0.0.72

UNI-UI

安装

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

完整引入

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

按需引入

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

组件列表

IM 组件

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);
  }
};

<div class="container">
  <div class="item">
    <ChatList
      :token="token"
      :env="env"
      :liveRoomId="liveRoomId"
      @im-instance-initialized="onIMInstanceInitialized"
      @exit="onExit"
      @join="onJoin"
    ></ChatList>
  </div>
  <div class="item">
    <MessageReviewList
      :imInstance="imInstance"
      :liveRoomId="liveRoomId"
    ></MessageReviewList>
  </div>
</div>

属性

事件

审核列表组件

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

<el-button @click="onDeleteTop">删除前10条</el-button>
<MessageReviewList
  ref="messageReviewListRef"
  :imInstance="imInstance"
  :liveRoomId="liveRoomId"
></MessageReviewList>

属性

方法

在线用户列表

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

<OnlineAudienceList
  ref="onlineAudienceListRef"
  :imInstance="imInstance"
  :liveRoomId="liveRoomId"
  show-detail-btn
></OnlineAudienceList>

属性

方法

事件

在线助教列表

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

<OnlineAssistantList
  ref="onlineAssistantListRef"
  :env="env"
  :token="token"
  :imInstance="imInstance"
  :liveRoomId="liveRoomId"
  show-detail-btn
></OnlineAssistantList>

属性

方法

事件

表格组件

属性

方法

事件

案例

<div class="container">
  <el-form :inline="true">
    <el-form-item label="姓名">
      <el-input v-model="input"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="onSerach" :loading="isLoading">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="onSelectionRow">获取选中行</el-button>
      <el-button @click="onClean">清空选中行</el-button>
    </el-form-item>
  </el-form>
</div>
<table
  ref="tableRef"
  :loadData="loadData"
  :colums="colums"
  selection
  showIndex
  @selection-change="onSelectionChange"
></table>

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);
};