vue3+ts封装类似于微信消息的组件

组件代码如下:

<template><div:class="['voice-message', { sent: isSent, received: !isSent }]":style="{ backgroundColor: backgroundColor }"@click="togglePlayback"><!-- isSent为false在左侧,为true在右侧--><!-- 语言条要按照语音时长显示不同的宽度,所以增加了一块宽度,发送者的时候,加在左侧,接收者的时候,加在右侧--><div v-if="isSent" :style="`width:${(duration / 10) * 30}px`"></div><span class="duration" v-if="isSent">{{ duration }}''&nbsp;</span><div :class="['voice-icon', { 'sent-icon': isSent }]"><div :class="['small']" :style="smallStyle"></div><div :class="['middle', { animate: isPlaying }]" :style="middleStyle"></div><div :class="['large', { animate: isPlaying }]" :style="largeStyle"></div></div><span class="duration" :style="{ color: iconColor }" v-if="!isSent">{{ duration }}&nbsp;''</span><div v-if="!isSent" :style="`width:${(duration / 10) * 30}px`"></div></div>
</template><script setup lang="ts">
import { ref, computed, withDefaults, onBeforeUnmount } from "vue";// 使用 withDefaults 提供默认值
const props = withDefaults(defineProps<{isSent?: boolean;iconColor?: string;backgroundColor?: string;smallSize?: number;middleSize?: number;largeSize?: number;duration?: number;audioSrc?: string;}>(),{isSent: false,iconColor: "#000000",backgroundColor: "",smallSize: 10,middleSize: 20,largeSize: 30,duration: 0,audioSrc: ""}
);const isPlaying = ref(false);
let audio: HTMLAudioElement | null = null;// 计算动态样式
const smallStyle = computed(() => ({color: props.iconColor,width: `${props.smallSize}px`,height: `${props.smallSize}px`,marginRight: -props.smallSize + "px"
}));const middleStyle = computed(() => ({color: props.iconColor,width: `${props.middleSize}px`,height: `${props.middleSize}px`,marginRight: -props.middleSize + "px"
}));const largeStyle = computed(() => ({color: props.iconColor,width: `${props.largeSize}px`,height: `${props.largeSize}px`,marginRight: "1px"
}));// 切换播放状态的函数
const togglePlayback = () => {if (isPlaying.value) {pauseVoice();} else {playVoice(props.audioSrc || "");}
};// 播放音频的函数
const playVoice = (voiceSrc: string) => {if (!voiceSrc) {console.error("音频源不能为空");return;}// 如果音频上下文不存在,则创建新的 HTMLAudioElementif (!audio) {audio = new Audio(voiceSrc);} else {audio.src = voiceSrc;}isPlaying.value = true;// 播放音频audio.play().catch(error => console.error("音频播放失败", error));// 监听播放结束事件audio.onended = () => {isPlaying.value = false;};
};// 暂停音频的函数
const pauseVoice = () => {isPlaying.value = false;if (audio) {audio.pause();}
};// 组件卸载时销毁音频上下文
onBeforeUnmount(() => {if (audio) {audio.pause();audio = null;}
});defineExpose({pauseVoice
});
</script><style scoped>
.voice-message {display: inline-flex;align-items: center;cursor: pointer;border-radius: 10px;padding: 4px 12px;
}.voice-message.sent {justify-content: flex-end;
}.voice-message.received {justify-content: flex-start;
}.voice-icon {display: flex;align-items: center;
}.voice-icon.sent-icon {transform: rotate(180deg);
}.small,
.middle,
.large {border-style: solid;border-top-color: transparent;border-left-color: transparent;border-bottom-color: transparent;border-radius: 50%;box-sizing: border-box;vertical-align: middle;display: inline-block;background-color: transparent; /* 默认背景颜色为透明 */
}.middle.animate {animation: show2 3s ease-in-out infinite;
}.large.animate {animation: show3 3s ease-in-out infinite;
}@keyframes show2 {0% {opacity: 0;}30% {opacity: 1;}100% {opacity: 0;}
}@keyframes show3 {0% {opacity: 0;}60% {opacity: 1;}100% {opacity: 0;}
}.duration {margin-left: 8px;font-size: 20px;color: #ffffff;font-weight: 400;
}
</style>

使用时:

<VoicePlayback:isSent="false"iconColor="#ffffff"backgroundColor="rgba(255 255 255 / 20%)":smallSize="5":middleSize="16":largeSize="28":duration="30"audioSrc="http://music.163.com/song/media/outer/url?id=447925558.mp3"
/>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

传输层协议UDP

本篇将主要介绍 UDP 协议&#xff0c;介绍了有关 UDP 协议的报头、协议特点、UDP 协议在操作系统中的缓冲区、UDP 协议使用的注意事项&#xff0c;以及有关 UDP 的 Socket 编程程序&#xff0c;同时重点介绍了操作系统对于 UDP 协议报文的管理。 接着介绍了有关端口号的映射。 …

网络编程学习:TCP/IP协议

TCP/IP协议简介 TCP/IP协议包含了一系列的协议&#xff0c;也叫TCP/IP协议族&#xff08;TCP/IP Protocol Suite&#xff0c;或TCP/IP Protocols&#xff09;&#xff0c;简称TCP/IP。 分层结构 为了能够实现不同类型的计算机和不同类型的操作系统之间进行通信&#xff0c;引…

【数据结构-二维前缀和】力扣1504. 统计全 1 子矩形

给你一个 m x n 的二进制矩阵 mat &#xff0c;请你返回有多少个 子矩形 的元素全部都是 1 。 示例 1&#xff1a; 输入&#xff1a;mat [[1,0,1],[1,1,0],[1,1,0]] 输出&#xff1a;13 解释&#xff1a; 有 6 个 1x1 的矩形。 有 2 个 1x2 的矩形。 有 3 个 2x1 的矩形。 有…

Python爬虫所需的技术及其原理(简单易懂)

导言 随着互联网的发展&#xff0c;大量的数据被存储在网络上&#xff0c;而我们需要从中获取有用的信息。Python作为一种功能强大且易于学习的编程语言&#xff0c;被广泛用于网络爬虫的开发。本文将详细介绍Python爬虫所需的技术及其原理&#xff0c;并提供相关的代码案例。…

Spark数据介绍

从趋势上看&#xff0c;DataFrame 和 Dataset 更加流行。 示例场景 数据仓库和 BI 工具集成&#xff1a; 如果你需要处理存储在数据仓库中的结构化数据&#xff0c;并且希望与 BI 工具集成&#xff0c;那么 DataFrame 和 Dataset 是首选。 机器学习流水线&#xff1a; 在构建机…

ICLR2024: 大视觉语言模型中对象幻觉的分析和缓解

https://arxiv.org/pdf/2310.00754 https://github.com/YiyangZhou/LURE 背景 对象幻觉&#xff1a;生成包含图像中实际不存在的对象的描述 早期的工作试图通过跨不同模式执行细粒度对齐&#xff08;Biten et al.&#xff0c;2022&#xff09;或通过数据增强减少对象共现模…

xxl-job升级到springboot3.0 导致页面打不开报错)问题

原因&#xff1a;springboot3.0 因为移除了jsp 导致xxl-job不能访问&#xff0c;解决方法如下 1、修改PermissionInterceptor拦截器 package com.xxl.job.admin.controller.interceptor;import com.xxl.job.admin.controller.annotation.PermissionLimit; import com.xxl.job.…

2024 天池云原生编程挑战赛决赛名单公布,9 月 20 日开启终极答辩

历时 4 个月&#xff0c;2024 天池云原生编程挑战赛决赛名单公布&#xff01; 本届大赛规模创新高&#xff0c;参赛战队达 20000 支&#xff0c; 广覆盖国内外优秀高校和杰出企业&#xff01;吸引了来自北京大学、清华大学等 176 所国内外优秀高校&#xff0c;以及美团、米哈游…

2025年25届必看:如何用Java SpringBoot+Vue搭建大学生成绩量化管理系统?

✍✍计算机毕业编程指导师** ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java…

青岛实训 8月21号 day33

1.设置主从从mysql57服务器 1&#xff09;配置主数据库 [rootmsater_5 ~]# systemctl stop filewalld [rootmsater_5 ~]# setenforce 0 [rootmsater_5 ~]# systemctl disable filewalld [rootmsater_5 ~]# ls anaconda-ks.cfg mysql-5.7.44-linux-glibc2.12-x86_64.tar.g…

怎么摆脱非自然链接?

什么是非自然链接&#xff1f; 非自然链接是人为创建的链接&#xff0c;用于操纵网站在搜索引擎中的排名。非自然链接违反了Google 的准则&#xff0c;网站可能会因此受到惩罚。 它们不是由网站所有者编辑放置或担保的。示例包括带有过度优化锚文本的链接、通过 PR 的广告、嵌…

rancher搭建k8s及jenkins自动化部署

1、准备环境 角色IP用途k8s-rancher-master192.168.3.63master节点k8s-rancher-node01192.168.3.64node节点k8s-rancher-node02192.168.3.66node节点k8s-rancher-server192.168.2.33rancher-server节点注: 服务器名需要配置不同,相同服务器名不能加入node节点 在所有节点进行…

jQuery入门(七)jQuery实现按钮分页

一、分页案例分析 功能分析&#xff1a;使用分页插件&#xff0c;实现分页&#xff0c;效果如下图&#xff1a; 二、实现思路和代码 2.1&#xff09;页面实现分析 1.引入分页插件的样式文件和 js 文件。 2. 定义当前页码和每页显示的条数。(分页必备信息) 3. 调用查询数据…

Express与SQLite集成教程:轻松实现数据库操作

Express使用SQLite的教程可以大致分为以下几个步骤。以下是一个详细的指南&#xff0c;帮助你在Express项目中集成SQLite数据库。 1. 安装必要的库 首先&#xff0c;你需要在你的Express项目中安装sqlite3库。打开终端或命令提示符&#xff0c;切换到你的项目目录&#xff0c…

挂轨巡检机器人在发电厂与煤矿皮带机场景的应用

一、引言 在发电厂和煤矿等重工业领域&#xff0c;皮带机作为关键设备&#xff0c;其运行状态直接关系到生产效率和安全。然而&#xff0c;传统的人工巡检方式不仅效率低下&#xff0c;还存在安全隐患。随着智能巡检技术的不断发展&#xff0c;杭州旗晟智能科技有限公司推出的…

使用mobaxterm连接linux出现连接中断问题

1.问题描述 使用mobaxterm在连接到远程服务器时&#xff0c;如果隔一段时间不进行操作的话&#xff0c;会出现中断连接的现象。 2.解决 为了增强Linux系统的安全性&#xff0c;我们需要在用户输入空闲一段时间后自动断开&#xff0c;这个操作可以由设置TMOUT值来实现。将以下…

HTB-Pennyworth(cve查询 和 exp使用)

前言 各位师傅大家好&#xff0c;我是qmx_07,今天给大家讲解Pennyworth靶场 渗透过程 信息搜集 服务器端口开放了8080http端口 访问网站 服务器使用jenkins cms系统&#xff0c;版本是2.289.1 通过弱口令爆破&#xff0c;账户是root,密码是password 通过命令执行nday 连…

【WPS Excel】复制表格时,提示“图片太大,超过部份将被截去“ 问题

WPS表格 2019版本 升级到 WPS最新版 WPS-支持多人在线协作编辑Word、Excel和PPT文档_WPS官方网站 使用最新版就能够解决这个问题&#xff0c;如果仍旧无法解决可以勾选如下配置 重启Excel解决。 请勾选&#xff1a;文件 - 选项 - 编辑 - 不提示且不压缩文件中的图像

vue 踩坑记录

本地开发没有cookie 解决方案 设置代理&#xff0c;并把changeOrigin设为true proxy的changeOrigin如果设置为false&#xff1a;请求头中host仍然是浏览器发送过来的host&#xff1b; 如果设置成true&#xff1a;发送请求头中host会设置成target。 允许axios请求携带cookie等凭…

celery_control.inspect() 简单使用

celery_control.inspect() 是一个用于检查和管理Celery集群的方法,它属于Celery的 control 模块。inspect() 方法允许你收集有关Celery集群中活动worker的信息,以及执行各种管理任务。通过 inspect() 方法,你可以执行诸如检查活动任务、取消任务、检查心跳等操作。 使用 ce…