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

ops/2024/10/19 17:42:38/

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

//自己做的假数据
<template><wbx-view style="" @click="losingFocus"><wbx-view:style="{transform: transformNum,transition: 'transform 0.3s',}"><wbx-listclass="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-messagev-if="item.type == 'text'":dataSource="item"></text-message><!-- 图片消息类型 --><pic-messagev-if="item.type == 'pic'":dataSource="item"></pic-message><!-- <video-messagev-if="item.type == 'video'":dataSource="item"></video-message> --></wbx-cell></wbx-list><wbx-viewstyle="height: 10vh;background-color: #fff;display: flex;flex-direction: row;justify-content: center;align-items: center;"><wbx-imagestyle="width: 30px; height: 30px; margin-right: 20px"mode="aspectFit"src="res/login.png"/><wbx-textareastyle="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-imagestyle="width: 30px; height: 30px; margin-left: 20px"mode="aspectFit"src="res/login.png"/><wbx-imagestyle="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-viewv-if="dataSource.sendMessage == false"style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;display: flex;justify-content: flex-start;flex-direction: row;"><wbx-imagestyle="width: 40px; height: 40px;border-radius: 5px;"mode="aspectFit"src="res/login.png"/><wbx-view><wbx-viewstyle="margin-left: 10px;display: flex;flex-wrap: wrap;border-radius: 5px;background-color: pink;"><wbx-textstyle="max-width: 55vw; margin: 10px 10px; display: inline-block">{{ dataSource.title }}</wbx-text></wbx-view></wbx-view></wbx-view><!-- 右边 --><wbx-viewv-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-viewstyle="position: relative;margin-right: 10px;display: flex;flex-wrap: wrap;background-color: pink;border-radius: 5px;"><wbx-textstyle="max-width: 55vw; margin: 10px 10px; display: inline-block">{{ dataSource.title }}</wbx-text></wbx-view><!-- 箭头位置 --><!-- <wbx-viewstyle="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-imagestyle="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-viewv-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-imagestyle="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-viewv-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-imagestyle="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.ppmy.cn/ops/118113.html

相关文章

学习和备课数据结构要求----重点*******

学习和备课数据结构要求----重点*******

目录 要求3&#xff1a;如何学习殷人昆大师的书&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f; 要求1&#xff1a; 要求2&#xff1a; 要求3&#xff1a; 要求1&#xff1a; 1&#xff09;李冬梅&#xff0c;刘畅 2&#xff09;王红梅教师用书先看老版&a…
阅读更多...
uniapp url取消#

uniapp url取消#

hbuilder uniapp取消hash(#)模式 manifest.json "h5": { "template": "static/index.html", "devServer": { "port": 9290, "https": false }, "…
阅读更多...
【系统规划与管理师】【案例分析】【考点】【答案篇】第10章 团队建设与管理

【系统规划与管理师】【案例分析】【考点】【答案篇】第10章 团队建设与管理

【问题篇】☞【系统规划与管理师】【案例分析】【考点】【问题篇】第10章 团队建设与管理 【移动端浏览】☞【系统规划与管理师】【案例分析】【模拟考题】章节考题汇总&#xff08;第10章&#xff09;&#xff08;答案篇&#xff09;&#xff08;共15个知识点&#xff09; 第1…
阅读更多...
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计

基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计

基于JavaWeb开发的JavaSpringMvcvueelement实现驾校管理系统详细设计 &#x1f345; 作者主页 网顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承…
阅读更多...
SpringBoot3+Swagger3（最新版springdoc-openapi教程）

SpringBoot3+Swagger3（最新版springdoc-openapi教程）

第一步&#xff1a;引入springdoc-openapi依赖 <dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-starter-webmvc-ui</artifactId><version>2.6.0</version></dependency> 第二步&#xff1a; 配置…
阅读更多...
Docker的实践应用举例

Docker的实践应用举例

Docker作为一种流行的容器化技术&#xff0c;已经广泛应用于软件开发、部署、运维等多个领域。它通过将应用程序及其依赖项打包到可移植的容器中&#xff0c;极大地简化了应用的部署和管理过程。以下将详细探讨Docker的实践与应用&#xff0c;并通过多个具体例子来展示其强大的…
阅读更多...
二叉树的前序遍历，中序遍历，后序遍历（非递归方法+C语言代码）

二叉树的前序遍历，中序遍历，后序遍历（非递归方法+C语言代码）

#include<stdlib.h> #include<stdio.h> #include<assert.h> #include<stdbool.h> //定义一个二叉树结点结构体 typedef int ElemTpye; typedef struct TreeNode {ElemTpye data;struct TreeNode* left;struct TreeNode* right; }TreeNode; //创建结点 …
阅读更多...
redis 中IO多路复用与Epoll函数

redis 中IO多路复用与Epoll函数

一 IO多路复用 1.1 IO多路复用作用 1.2 同步异步阻塞非阻塞
阅读更多...
最新文章

Copyright @ 2022~2023