封装聊天组件（fang微信聊天）

news2024/9/24 21:15:24

用法 图 文 视频还没写好，后期补上，因为基于微博本身的ui框架，所以有的样式会有一些问题，可能跟普通写法有一点不同，但是修改一点就可以

//自己做的假数据
<template>
  <wbx-view style="" @click="losingFocus">
    <wbx-view
      :style="{
        transform: transformNum,
        transition: 'transform 0.3s',
      }"
    >
      <wbx-list
        class="scroller"
        style="
          width: 100vw;
          height: 90vh;
          box-sizing: border-box;
          box-sizing: border-box;
          background-color: #f6f6f8;
        "
      >
        <wbx-cell v-for="(item, index) in dataSource" :key="index">
          <!-- 文本消息类型 -->
          <text-message
            v-if="item.type == 'text'"
            :dataSource="item"
          ></text-message>
          <!-- 图片消息类型 -->
          <pic-message
            v-if="item.type == 'pic'"
            :dataSource="item"
          ></pic-message>
          <!-- <video-message
            v-if="item.type == 'video'"
            :dataSource="item"
          ></video-message> -->
        </wbx-cell>
      </wbx-list>
      <wbx-view
        style="
          height: 10vh;
          background-color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        "
        ><wbx-image
          style="width: 30px; height: 30px; margin-right: 20px"
          mode="aspectFit"
          src="res/login.png"
        />
        <wbx-textarea
          style="border: 1px solid #000; width: 200px; height: 40px"
          maxlength="100"
          placeholder="最多能输入100个字"
          returnkeytype="send"
          v-wbox-model:input.value.domProps="textareaValue"
          @keyboardheightchange="keyboardChangesTextarea"
          v-wbox-model:focus.focus="textareaFocused"
        ></wbx-textarea>
        <wbx-image
          style="width: 30px; height: 30px; margin-left: 20px"
          mode="aspectFit"
          src="res/login.png"
        />
        <wbx-image
          style="width: 30px; height: 30px; margin-left: 20px"
          mode="aspectFit"
          src="res/login.png"
        />
      </wbx-view>
    </wbx-view>
  </wbx-view>
</template>

<script>
import textMessage from "./messageType/text-message/index.vue";
import picMessage from "./messageType/pic-message/index.vue";
import videoMessage from "./messageType/video-message/index.vue";
/**
 * @type WBXAppOption
 */
const pageOptions = {
  components: {
    textMessage,
    picMessage,
    videoMessage,
  },
  data() {
    return {
      dataSource: [
        {
          id: 1,
          title: "我我我",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: true,
          type: "pic",
          coverPicUrl:
            "https://img0.baidu.com/it/u=3693498673,388481603&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082",
        },
        {
          id: 1,
          title: "你快瞅瞅好看不！",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: true,
          type: "text",
          coverPicUrl: "",
        },
        {
          id: 1,
          title: "我觉的不咋地！啥玩应儿啊，还没我的好看呢！",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: false,
          type: "text",
          coverPicUrl: "",
        },
        {
          id: 1,
          title: "我我我我嚄我我我我",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: false,
          type: "pic",
          coverPicUrl:
            "https://vimimg-int-alicdn.softsugar.com/VME/int/users/687254816/figure/USNWXGCH/tmp_0d67a505007700275e7860e69904cfb3.jpg?auth_key=1724601600-0-0-d091d25b4081283ccd771125050e362d",
        },
        {
          id: 1,
          title: "你快拉到吧你，老弟啊你不懂欣赏！",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: true,
          type: "text",
          coverPicUrl: "",
        },
        {
          id: 1,
          title: "我我我我我我我我",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: true,
          type: "pic",
          coverPicUrl:
            "https://vimimg-int-alicdn.softsugar.com/VME/int/users/687254816/figure/NUBOVIEU/tmp_f37d3589f0ae36025d0dc6bae84c34c4.jpg?auth_key=1724601600-0-0-94c9964f5c3c2a8773919a964d24284f",
        },
        {
          id: 1,
          title: "这也不好看啊，什么审美",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: false,
          type: "text",
          coverPicUrl: "",
        },
        {
          id: 1,
          title: "这也不好看啊，什么审美",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: false,
          type: "pic",
          coverPicUrl:
            "https://img2.baidu.com/it/u=1718761759,369021576&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083",
        },
        {
          id: 1,
          title: "这也不好看啊，什么审美",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: false,
          type: "video",
          coverVideoUrl: {
            oid: "3911557709",
            src: "res/2.mp4",
          },
          coverPicUrl:
            "https://img0.baidu.com/it/u=3693498673,388481603&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082",
        },
        {
          id: 1,
          title: "这也不好看啊，什么审美",
          time: "2023-04-03 10:39:00",
          pirce: 128,
          sendMessage: false,
          type: "video",
          coverVideoUrl: {
            oid: "3911557708",
            src: "res/video.mp4",
          },
          coverPicUrl:
            "https://img0.baidu.com/it/u=3693498673,388481603&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082",
        },
      ],
      transformNum: "translateY(0)",
      loadinging: false,
      showLoading: false,
      refreshing: false,
      showLoadMore: true,
      textareaValue: "",
      textareaFocused: false,
    };
  },
  methods: {
    losingFocus() {
      this.textareaFocused = false;
    },
    keyboardChangesTextarea(e) {
      const { height, isShow } = e.detail;
      this.transformNum = isShow
        ? `translateY(-${height - 40}px)`
        : "translateY(0)";
    },
  },
  wbox: {
    onLoad() {},
    onShow() {
      // 页面显示/切入前台时触发
    },
    onHide() {
      // 页面隐藏时触发
    },
    onUnload() {
      // 页面退出时触发
    },
  },
  mounted() {},
};
export default pageOptions;
</script>

<style>
.scroller {
}
</style>

文本类型的组件：

//文本的组件
<template>
  <wbx-view>
    <!-- 左边 -->
    <wbx-view
      v-if="dataSource.sendMessage == false"
      style="
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
      "
    >
      <wbx-image
        style="width: 40px; height: 40px;border-radius: 5px;"
        mode="aspectFit"
        src="res/login.png"
      />
      <wbx-view>
        <wbx-view
          style="
            margin-left: 10px;
            display: flex;
            flex-wrap: wrap;
            border-radius: 5px;
            background-color: pink;
          "
        >
          <wbx-text
            style="max-width: 55vw; margin: 10px 10px; display: inline-block"
            >{{ dataSource.title }}</wbx-text
          >
        </wbx-view>
      </wbx-view>
    </wbx-view>
    <!-- 右边 -->
    <wbx-view
      v-if="dataSource.sendMessage == true"
      style="
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 10px;
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
      "
    >
      <wbx-view style="position: relative">
        <wbx-view
          style="
            position: relative;
            margin-right: 10px;
            display: flex;
            flex-wrap: wrap;
            background-color: pink;
            border-radius: 5px;
          "
        >
          <wbx-text
            style="max-width: 55vw; margin: 10px 10px; display: inline-block"
            >{{ dataSource.title }}</wbx-text
          >
        </wbx-view>
        <!-- 箭头位置 -->
        <!-- <wbx-view
                style="
                  background-color: red;
                  position: absolute;
                  right: 0;
                  top: 10px;
                  width: 10px;
                  height: 10px;
                  border-top: 100px solid transparent;
                  border-right: 100px solid transparent;
                  border-left: 100px solid transparent;
                  border-bottom: 100px solid red;
                "
              >
              </wbx-view> -->
      </wbx-view>

      <wbx-image
        style="width: 40px; height: 40px;border-radius: 5px;"
        mode="aspectFit"
        src="res/login.png"
      />
    </wbx-view>
  </wbx-view>
</template>

<script>
/**
 * @type WBXAppOption
 */
const pageOptions = {
  props: {
    dataSource: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
  },
  wbox: {
    onLoad() {
    },
    onShow() {
      // 页面显示/切入前台时触发
    },
    onHide() {
      // 页面隐藏时触发
    },
    onUnload() {
      // 页面退出时触发
    },
  },
  mounted() {},
};
export default pageOptions;
</script>

<style></style>

图文类型的组件

<template>
  <wbx-view>
    <!-- 左边 -->
    <wbx-view
      v-if="dataSource.sendMessage == false"
      style="
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        align-items: flex-start;
      "
    >
      <wbx-image
        style="width: 40px; height: 40px; flex-shrink: 0; border-radius: 5px"
        mode="aspectFit"
        src="res/login.png"
      />
      <wbx-image
        @load="loadFn"
        @click="preview(dataSource.coverPicUrl)"
        style="margin-left: 10px; border-radius: 5px"
        :style="{ height: heightImg, width: widthImg }"
        mode="aspectFill"
        :src="dataSource.coverPicUrl"
      />
    </wbx-view>

    <!-- 右边 -->
    <wbx-view
      v-if="dataSource.sendMessage == true"
      style="
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 10px;
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
        align-items: flex-start;
      "
    >
      <wbx-view style="margin-right: 10px">
        <wbx-image
          @load="loadFn"
          @click="preview(dataSource.coverPicUrl)"
          style="margin-left: 10px; border-radius: 5px"
          :style="{ height: heightImg, width: widthImg }"
          mode="aspectFill"
          :src="dataSource.coverPicUrl"
        />
      </wbx-view>
      <wbx-image
        style="width: 40px; height: 40px; flex-shrink: 0; border-radius: 5px"
        mode="aspectFit"
        src="res/login.png"
      />
    </wbx-view>
  </wbx-view>
</template>

<script>
/**
 * @type WBXAppOption
 */
const pageOptions = {
  props: {
    dataSource: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      heightImg: "",
      widthImg: "",
      imgList: [],
    };
  },
  methods: {
    resizeImage(originalWidth, originalHeight, maxWidth, maxHeight) {
      let ratio = Math.min(
        maxWidth / originalWidth,
        maxHeight / originalHeight
      );
      return {
        width: originalWidth * ratio + "px",
        height: originalHeight * ratio + "px",
      };
    },
    loadFn(e) {
      const { height, width } = e.detail;
      const maxWidth = 200; // 设定图片容器的最大宽度
      const maxHeight = 200; // 设定图片容器的最大高度
      const { width: resizedWidth, height: resizedHeight } = this.resizeImage(
        width,
        height,
        maxWidth,
        maxHeight
      );
      this.widthImg = resizedWidth;
      this.heightImg = resizedHeight;
    },
    preview(coverPicUrl) {
      const coverPicUrls = this.$parent.dataSource.map(
        (item) => item.coverPicUrl
      );
      let coverPicUrlIndex = this.$parent.dataSource.findIndex(
        (item) => item.coverPicUrl === this.dataSource.coverPicUrl
      );
      let imglist = this.$parent.dataSource
        .filter((item) => item.coverPicUrl !== "" && item.type === "pic")
        .map((item) => item.coverPicUrl);
      let index = imglist.indexOf(coverPicUrls[coverPicUrlIndex]);
      wbx.previewImage({
        urls: imglist,
        index,
        success: function (res) {
          console.log("---- previewImage success: " + JSON.stringify(res));
        },
        failure: function (res) {
          console.log(
            "---- previewImage failure: " + JSON.stringify(res.errMsg)
          );
        },
        complete: function (res) {
          console.log("---- previewImage complete: " + JSON.stringify(res));
        },
      });
    },
  },
  wbox: {
    onLoad() {},
    onShow() {
      // 页面显示/切入前台时触发
    },
    onHide() {
      // 页面隐藏时触发
    },
    onUnload() {
      // 页面退出时触发
    },
  },
  mounted() {},
};
export default pageOptions;
</script>

<style></style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2161450.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python项目的质量保证

Python项目的质量保证

首先来打个不恰当比喻&#xff0c;你在市场上购买苹果时&#xff0c;挑选最好的苹果相当简单。你可以通过触摸它们来挑选&#xff0c;选择最好的颜色、成熟度和没有可见的伤疤。这个过程称为质量控制——你只选择满足你要求的优质产品。当分拣站里有大量苹果时&#xff0c;事情…
阅读更多...
利用F.interpolate()函数进行插值操作

利用F.interpolate()函数进行插值操作

函数简介 功能&#xff1a; 利用插值方法&#xff0c;对输入的张量数组进行上\下采样操作&#xff0c;换句话说就是科学合理地改变数组的尺寸大小&#xff0c;尽量保持数据完整。 torch.nn.functional.interpolate(input, sizeNone, scale_factorNone, modenearest, align_c…
阅读更多...
Node.JS有什么用?给谁用?怎么学?通俗易懂,超级详细!

Node.JS有什么用?给谁用?怎么学?通俗易懂,超级详细!

现在&#xff0c;nodejs主要是前端的小伙伴来用的。前端小伙伴也不用说去怎么学node&#xff0c;而是把node当做是一个环境。我们利用这个环境去搭建上层的一些应用&#xff0c;去使用一些工具。就像学习Windows一样&#xff0c;我们没有必要深入了解Windows的每一个细节&#…
阅读更多...
【解密!】终端安全管理软件究竟是什么？一文给您揭晓答案！

【解密!】终端安全管理软件究竟是什么？一文给您揭晓答案！

在数字化时代&#xff0c;随着企业信息化程度的不断提升&#xff0c;网络安全问题日益凸显。 终端作为网络连接的最后一环&#xff0c;其安全性直接关系到整个网络体系的安全与稳定。 那么&#xff0c;终端安全管理软件究竟是什么呢&#xff1f;本文将为您深入解析这一重要话…
阅读更多...
Image matting入门

Image matting入门

概念 matting就是扣图&#xff0c;本质是预测前景与背景&#xff0c;将前景扣出来。主要应用于影视行业&#xff0c;如拍电影绿幕扣图。和图像分割的区别在于多一个模糊地带&#xff0c;非01分类&#xff0c;变成了预测alpha通道。前景F&#xff0c;背景B&#xff0c;图像I可以…
阅读更多...
数据结构与算法——Java实现 11.习题——有序链表去重

数据结构与算法——Java实现 11.习题——有序链表去重

目录 82. 删除排序链表中的重复元素 II 方法1 方法2 要知道&#xff0c;每一颗钻石在被发现前&#xff0c;都要经受埋藏尘埃的寂寞时光 —— 24.9.23 82. 删除排序链表中的重复元素 II 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0…
阅读更多...
ActiveMQ 的传输协议机制

ActiveMQ 的传输协议机制

ActiveMQ 通过网络连接器这种连接机制来实现客户端与服务端之间的通信&#xff0c;ActiveMQ支持的传输协议在activeMQ 安装目录的 conf/activemq.xml中的<transportConnectors>标签之内。 ActiveMQ 支持的 client 端和 broker 端的通讯协议有&#xff1a;TCP、NIO、UDP、…
阅读更多...
SpringBoot框架下的客户管理策略

SpringBoot框架下的客户管理策略

1 绪论 1.1研究背景 随着网络不断的普及发展&#xff0c;企业客户管理系统依靠网络技术的支持得到了快速的发展&#xff0c;首先要从员工的实际需求出发&#xff0c;通过了解员工的需求开发出具有针对性的首页、个人中心、员工管理、客户信息管理、行业类型管理、项目信息管理、…
阅读更多...
Vue(16)——Vue3.3新特性

Vue(16)——Vue3.3新特性

defineOptions 在 Vue 3.3 之前&#xff0c;如果需要在 <script setup> 中设置组件名&#xff0c;通常需要在额外的 <script> 标签中使用 Options API 进行配置。defineOptions 是 Vue 3.3 版本中引入的一个宏&#xff08;macro&#xff09;&#xff0c;它主要用于…
阅读更多...
Oracle数据库中设置账户密码、创建新用户以及授权操作详解

Oracle数据库中设置账户密码、创建新用户以及授权操作详解

目录 背景: 1.使用命令行方式进入控制台&#xff1a; 2. 连接Oracle数据库 3.修改Oracle数据库管理员的密码 4. 测试密码修改是否成功 5.创建Oracle数据库中的新用户、设置密码并授权 背景: 最近我安装了Oracle数据库&#xff0c;记录一下使用SQL命令来完成迹象关键操作…
阅读更多...
Rust格式化输出宏

Rust格式化输出宏

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 我们编写程序的目的就是对输入进行处理&#xff0c;然后将处理结果反馈给用户&#…
阅读更多...
react组件入门

react组件入门

react应用程序就是由一个个组件搭建而成。组件有类组件和函数组件两种。 我们之前使用create-react-app创建了app&#xff0c;src下放的就是我们应用的源代码&#xff0c;我们基于这些已生成的文件&#xff0c;来学习和验证组件。 类组件 这里我们创建PostList.js更改这个ap…
阅读更多...
C++ bitset（位图）的介绍和使用

C++ bitset（位图）的介绍和使用

文章目录 一、bitset的介绍1. 位图的引入2. 位图的概念3. 位图的应用场景 二、bitset的使用1. 定义方式2. 成员函数3. 运算符重载 一、bitset的介绍 1. 位图的引入 面试题 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是…
阅读更多...
关于TrustedInstaller权限

关于TrustedInstaller权限

前言 我们在在删除某些文件时会发现权限不够的情况&#xff0c;那是因为自从 Windows Vista 以来&#xff0c;为了提升安全性&#xff0c;微软对于权限的把控越来越紧。为了对抗恶意软件随意修改系统文件&#xff0c;Trustedinstaller 应运而生。 各权限之间的关系 普通人:Us…
阅读更多...
鞋类分类系统源码分享

鞋类分类系统源码分享

鞋类分类检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …
阅读更多...
事件【JavaScript】

事件【JavaScript】

1. 事件 事件是用户或浏览器动作的表示&#xff0c;JavaScript 中的一切交互都是通过事件来处理的。 2. 事件冒泡&#xff08;Event Bubbling&#xff09; 事件冒泡是指事件从最具体的元素&#xff08;即触发事件的元素&#xff09;开始触发&#xff0c;然后逐级向上传播到较…
阅读更多...
LVGL 控件之消息框（lv_msgbox）

LVGL 控件之消息框（lv_msgbox）

目录 一、概述二、消息框1、创建消息框2、获取消息框的组成部分3、关闭消息框部件4、消息框部件事件5、API 函数 一、概述 消息框部件是由多个小部件构建而成的&#xff0c;包括&#xff1a;lv_obj、lv_btn、lv_label 和 lv_btnmatrix 部件&#xff0c;示意图如下所示&#xf…
阅读更多...
错误使用排序导致分页数据重复

错误使用排序导致分页数据重复

1. 现象 分页返回数据的时候&#xff0c;发现第一页和第二页的数据有重复的&#xff0c;如姓名中的“某颖文”在第一和和第二页都显示了。 第一页&#xff1a; 第二页&#xff1a; 2. 原因 因为排序的的字段为“departmentCode”&#xff0c;该字段是重复不唯一的&#xff0…
阅读更多...
GPIO之EMIO按键控制LED——ZYNQ学习笔记3

GPIO之EMIO按键控制LED——ZYNQ学习笔记3

一、EMIO简介 ZYNQ GPIO 接口信号被分成四组&#xff0c;分别是从 BANK0 到 BANK3。其中 BANK0 和 BANK1 中共计 54个信号通过 MIO 连接到 ZYNQ 器件的引脚上&#xff0c;这些引脚属于 PS 端&#xff1b; 而 BANK2 和 BANK3 中共计 64 个信号则通过 EMIO 连接到了 ZYNQ 器件的 …
阅读更多...
Spring Security学习

Spring Security学习

系列文章目录 第一章 基础知识、数据类型学习 第二章 万年历项目 第三章 代码逻辑训练习题 第四章 方法、数组学习 第五章 图书管理系统项目 第六章 面向对象编程&#xff1a;封装、继承、多态学习 第七章 封装继承多态习题 第八章 常用类、包装类、异常处理机制学习 第九章 集…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023