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

news2024/10/16 15:36:37

组件代码如下:

<!--聊天页面-播放语言组件-->
<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, defineEmits, 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;

// 定义 emit 事件
const emit = defineEmits<{ (e: "update:playStatus", status: boolean): void }>();

// 计算动态样式
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 || "");
	}
	isPlaying.value = !isPlaying.value;
	emit("update:playStatus", isPlaying.value); // 触发事件,返回当前播放状态
};

// 播放音频的函数
const playVoice = (voiceSrc: string) => {
	if (!voiceSrc) {
		console.error("音频源不能为空");
		return;
	}

	// 如果音频上下文不存在,则创建新的 HTMLAudioElement
	if (!audio) {
		audio = new Audio(voiceSrc);
	} else {
		audio.src = voiceSrc;
	}

	// 播放音频
	audio.play().catch(error => console.error("音频播放失败", error));

	// 监听播放结束事件
	audio.onended = () => {
		isPlaying.value = false;
	};
};

// 暂停音频的函数
const pauseVoice = () => {
	if (audio) {
		audio.pause();
	}
};

// 组件卸载时销毁音频上下文
onBeforeUnmount(() => {
	if (audio) {
		audio.pause();
		audio = null;
	}
});
</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.coloradmin.cn/o/2106652.html

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

相关文章

解析查看elf文件的构成

x86下用clang编译一段c代码&#xff0c;编译成elf文件&#xff0c;读elf文件&#xff0c;dump出里面的所有段&#xff0c;并打印出段中的数据和含义以及汇编的内容 编写C代码 首先&#xff0c;编写一个简单的C程序&#xff0c;例如命名为example.c&#xff1a; 使用Clang编…

【YOLOv5模型部署】——TensorRT推理引擎安装与使用基于Flask的项目部署

声明&#xff1a;笔记是做项目时根据B站博主视频学习时自己编写&#xff0c;请勿随意转载&#xff01; 温馨提示&#xff1a;对于我的电脑没有Nvidia的独显&#xff0c;只有Intel的集显&#xff0c;最后导出时无法识别Nvidia显卡设备&#xff01;&#xff01;就没成功&#xf…

Java小白一文讲清Java中集合相关的知识点(四)

LinkedList底层结构 LinkedList底层实现了双向链表和双向队列特点可以添加任意元素&#xff0c;包括null,元素可以重复线程不安全&#xff0c;没有实现同步 LinkedList底层操作机制 LinkedList底层维护了一个双向链表LinkedList中维护了两个属性first和last分别指向首结点和…

如何启动vue ui,快速创建vue项目

1.查看自己是否已经安装了vue3.0脚手架版本&#xff0c;打开cmd命令框输入vue -V(大写为查看&#xff0c;此处查看的是脚手架的版本)。如果没有提示版本&#xff0c;而是命令不存在...则要进行下面的1.1操作 1.1安装Vue CIL&#xff0c;如果已安装&#xff0c;此步忽略。安装完…

计算机毕业设计选题推荐-中华诗词文化交流平台-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

快速搭建和运行Spring Boot项目的简易指南

对于非Java开发的后端开发人员而言&#xff0c;即便未曾接触过Java&#xff0c;也可能听说过Spring Boot这一框架。若想要快速搭建并运行一个Spring Boot项目&#xff0c;可以遵循以下步骤&#xff1a; 环境准备 **安装Java JDK&#xff1a;**确保您的开发环境中安装了Java J…

Android Studio编译时各类型网络超时优化方案

我们国家有很多长城&#xff0c;我觉得最重要的除了大家耳熟能详的西起嘉峪关&#xff0c;东至山海关的万里长城&#xff0c;还有一个叫GFW的国家长城防火墙&#xff0c;这个防火墙起初仅是为了禁止用户访问政治敏感信息&#xff0c;后来逐渐强大。。。目前最新进展是我们已和世…

142.环形链表二-力扣

142. 环形链表 II - 力扣&#xff08;LeetCode&#xff09; struct ListNode *detectCycle(struct ListNode *head) {struct ListNode *fasthead;struct ListNode *slowhead;while(fast && fast->next){fast fast->next->next;slow slow->next;if(fasts…

Python 使用中点查找矩形的角(Find Corners of Rectangle using mid points)

考虑一个矩形 ABCD&#xff0c;我们给出了边 AD 和 BC 中点&#xff08;分别为 p 和 q&#xff09;的坐标以及它们的长度 L&#xff08;AD BC L&#xff09;。现在给定参数&#xff0c;我们需要打印 4 个点 A、B、C 和 D 的坐标。 例子&#xff1a; 输入&#xff1a;p (1,…

人工智能在病理组学和精准医疗中的最新研究进展|顶刊速递·24-09-05

小罗碎碎念 本期推文主题&#xff1a;AI病理精准医疗 这段时间一直在尝试不同的学习道路&#xff0c;兜兜转转还是觉得&#xff0c;每天跟踪最新文献其实是很有必要的&#xff0c;并且这些最新的文献不一定非要与自己专业完全匹配&#xff0c;不然就会把自己困住。 这期推文和…

文章润色太费时?试试这5款ai写作工具

你是否曾梦想拥有一个私人编辑&#xff0c;随时随地帮你打磨文字&#xff0c;让写作变得既轻松又专业&#xff1f; 告诉你一个好消息&#xff0c;现在有5款AI写作工具&#xff0c;它们就拥有这样的能力&#xff01;这些AI助手擅长润色文章&#xff0c;优化语法&#xff0c;甚至…

微信小程序使用nfc读取

** 微信小程序开发nfc读取 ** &#xff08;注释微信官方api&#xff0c;仅支持安卓&#xff0c;不支持苹果ios&#xff09;官方文档 上代demo <template><div class"nfc"><u-navbar leftIcon"arrow-leftward" bgColor"#ffffff&qu…

网络安全服务基础Windows--第12节-域与活动目录

工作组 在Windows环境中配置⼯作组相对简单&#xff0c;适合⼩型⽹络环境&#xff0c;如家庭或⼩型办公室⽹络。⼯作组通过简单的⽹络共享和本地管理来实现资源共享&#xff0c;⽽不依赖于中央控制的服务器。 ● 定义&#xff1a;⼯作组是⼀种对等⽹络模型&#xff0c;在这种…

ASP源码 发布站改制最终版 原来3000ok网通大站的源程序

ASP源码 新服发布站改制最终版 原来3000ok网通大站的源程序 这个是非常完整 兼容性很强的。 后台地址&#xff1a;http://你的域名/admin 账号&#xff1a;admin 密码&#xff1a;admin 会员发布地址&#xff1a;http://你的域名/gamevip 源码下载&#xff1a;https://downlo…

【网络安全】IIS未授权访问敏感数据

未经许可,不得转载。 文章目录 正文攻击方法正文 IIS 是 Internet Information Services 的缩写,是微软开发的一个基于 Windows 的 Web 服务器。 HAProxy 是一个知名的高性能负载均衡器和代理服务器。它通常用于将流量分发到多个后端服务器,常与 Web 服务器(包括 IIS)一…

智匠MindCraft:一站式AI模型API调用平台

智匠MindCraft提供了一站式的AI模型解决方案&#xff0c;通过单一API接口&#xff0c;用户可以轻松调用多种主流AI模型&#xff0c;涵盖大语言模型、图片生成、视频生成、语音识别和语音合成等多个领域。以下是该平台的详细介绍&#xff1a; 1、平台概览 主页访问&#xff1a…

基于Qt设计的人脸课堂考勤机系统(219)

文章目录 一、前言1.1 项目介绍【1】开发背景【2】项目实现的功能1.2 设计思路【1】系统架构设计【2】流程设计【3】关键技术实现【2】整体构架1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】摘要【5】项目背景1.4 开发工具的选择1.5 系统框架图1.6 系统功…

How to apply streaming in azure openai dotnet web application?

题意&#xff1a;"如何在 Azure OpenAI 的 .NET Web 应用程序中应用流式处理&#xff1f;" 问题背景&#xff1a; I want to create a web api backend that stream openai completion responses. "我想创建一个 Web API 后端&#xff0c;用于流式传输 OpenAI…

计算机领域学术会议(ICCBD+AI 2024)

第五届计算机、大数据与人工智能国际会议&#xff08;ICCBDAI 2024&#xff09;将于2024年11月1日-3日在江西景德镇召开。 本届会议由景德镇陶瓷大学主办&#xff0c;西安交通大学、暨南大学、南京邮电大学、景德镇学院、ELSP&#xff08;爱迩思出版社&#xff09;、ESBK国际学…

《中国储运》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问&#xff1a;《中国储运》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《中国储运》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a; 中储发展股份有限公司 主办单位&…