Qt/C++音视频开发46-音视频同步保存到MP4

一、前言

用ffmpeg单独做视频保存不难，单独做音频保存也不难，难的是音视频同步保存到MP4中，重点是音视频要同步，其实这也不难，只要播放那边音视频同步后的数据，写入到文件即可。最难的是在播放过程中不断随机的切换播放进度，而且还会暂停播放、暂停录制的情况出现，这些个复杂情况的出现，可以说，测试了所有网络上可能找到的相关代码，没有一个是行得通的，基本上都是停留在最简单的处理。那怎么办呢？近期花了半个月的时间，闭门把这个硬骨头啃下来，专门处理这个问题，毕竟暂停播放、暂停录制、切换进度这些个情况都是极大概率发生的，这一关过不了，就无法号称最全播放组件了。总之核心的解决办法就是，除了要重新调整时间基准以外，还需要在前面重新按照帧数量和音频的时长来设置pts/dts，网上能找到的代码，几乎都没看到这个计算，几乎都是调整时间基准的。大致整理了下能够做到下面几点的才能基本合格。

  1. 网上的保存计算都是在理想状态下进行的(打开后从第一帧开始保存直到结束)
  2. 中间如果切换了播放进度(不是连续的帧)
  3. 中间暂停了流采集或者暂停了录制(不是连续的时间)
  4. 同时支持录制到文件和推流到服务器
  5. 音视频同步输出(任意切换进度自动同步)
  6. 指定只存储视频或者音频
  7. 音视频流索引顺序是0/1和1/0
  8. 不编码存储和重新编码存储

为何要区分不编码存储和重新编码存储？因为编码要占用cpu，对于源头就是H264/265/AAC这种，完全可以不用编码直接存储到MP4文件中，可以大大节约CPU资源，所以保存类的设计中，就应该有这个判断。

二、效果图

在这里插入图片描述

三、体验地址

  1. 国内站点：https://gitee.com/feiyangqingyun
  2. 国际站点：https://github.com/feiyangqingyun
  3. 个人作品：https://blog.csdn.net/feiyangqingyun/article/details/97565652
  4. 体验地址：https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取码：01jf 文件名：bin_video_demo。

四、功能特点

4.1 基础功能

  1. 支持各种音频视频文件格式，比如mp3、wav、mp4、asf、rm、rmvb、mkv等。
  2. 支持本地摄像头设备，可指定分辨率、帧率。
  3. 支持各种视频流格式，比如rtp、rtsp、rtmp、http等。
  4. 本地音视频文件和网络音视频文件，自动识别文件长度、播放进度、音量大小、静音状态等。
  5. 文件可以指定播放位置、调节音量大小、设置静音状态等。
  6. 支持倍速播放文件，可选0.5倍、1.0倍、2.5倍、5.0倍等速度，相当于慢放和快放。
  7. 支持开始播放、停止播放、暂停播放、继续播放。
  8. 支持抓拍截图，可指定文件路径，可选抓拍完成是否自动显示预览。
  9. 支持录像存储，手动开始录像、停止录像，部分内核支持暂停录像后继续录像，跳过不需要录像的部分。
  10. 支持无感知切换循环播放、自动重连等机制。
  11. 提供播放成功、播放完成、收到解码图片、收到抓拍图片、视频尺寸变化、录像状态变化等信号。
  12. 多线程处理，一个解码一个线程，不卡主界面。

4.2 特色功能

  1. 同时支持多种解码内核，包括qmedia内核（Qt4/Qt5/Qt6）、ffmpeg内核（ffmpeg2/ffmpeg3/ffmpeg4/ffmpeg5）、vlc内核（vlc2/vlc3）、mpv内核（mpv1/mp2）、监控厂家sdk内核等。
  2. 非常完善的多重基类设计，新增一种解码内核只需要实现极少的代码量，就可以应用整套机制。
  3. 同时支持多种画面显示策略，自动调整（原始分辨率小于显示控件尺寸则按照原始分辨率大小显示，否则等比例缩放）、等比例缩放（永远等比例缩放）、拉伸填充（永远拉伸填充）。所有内核和所有视频显示模式下都支持三种画面显示策略。
  4. 同时支持多种视频显示模式，句柄模式（传入控件句柄交给对方绘制控制）、绘制模式（回调拿到数据后转成QImage用QPainter绘制）、GPU模式（回调拿到数据后转成yuv用QOpenglWidget绘制）。
  5. 支持多种硬件加速类型，ffmpeg可选dxva2、d3d11va等，mpv可选auto、dxva2、d3d11va，vlc可选any、dxva2、d3d11va。不同的系统环境有不同的类型选择，比如linux系统有vaapi、vdpau，macos系统有videotoolbox。
  6. 解码线程和显示窗体分离，可指定任意解码内核挂载到任意显示窗体，动态切换。
  7. 支持共享解码线程，默认开启并且自动处理，当识别到相同的视频地址，共享一个解码线程，在网络视频环境中可以大大节约网络流量以及对方设备的推流压力。国内顶尖视频厂商均采用此策略。这样只要拉一路视频流就可以共享到几十个几百个通道展示。
  8. 自动识别视频旋转角度并绘制，比如手机上拍摄的视频一般是旋转了90度的，播放的时候要自动旋转处理，不然默认是倒着的。
  9. 自动识别视频流播放过程中分辨率的变化，在视频控件上自动调整尺寸。比如摄像机可以在使用过程中动态配置分辨率，当分辨率改动后对应视频控件也要做出同步反应。
  10. 音视频文件无感知自动切换循环播放，不会出现切换期间黑屏等肉眼可见的切换痕迹。
  11. 视频控件同时支持任意解码内核、任意画面显示策略、任意视频显示模式。
  12. 视频控件悬浮条同时支持句柄、绘制、GPU三种模式，非绝对坐标移来移去。
  13. 本地摄像头设备支持指定设备名称、分辨率、帧率进行播放。
  14. 录像文件同时支持打开的视频文件、本地摄像头、网络视频流等。
  15. 瞬间响应打开和关闭，无论是打开不存在的视频或者网络流，探测设备是否存在，读取中的超时等待，收到关闭指令立即中断之前的操作并响应。
  16. 支持打开各种图片文件，支持本地音视频文件拖曳播放。
  17. 视频控件悬浮条自带开始和停止录像切换、声音静音切换、抓拍截图、关闭视频等功能。
  18. 音频组件支持声音波形值数据解析，可以根据该值绘制波形曲线和柱状声音条，默认提供了声音振幅信号。
  19. 代码框架和结构优化到极致，性能彪悍，持续迭代更新升级。
  20. 源码支持Qt4、Qt5、Qt6，兼容所有版本。

4.3 视频控件

  1. 可动态添加任意多个osd标签信息，标签信息包括名字、是否可见、字号大小、文本文字、文本颜色、标签图片、标签坐标、标签格式（文本、日期、时间、日期时间、图片）、标签位置（左上角、左下角、右上角、右下角、居中、自定义坐标）。
  2. 可动态添加任意多个图形信息，这个非常有用，比如人工智能算法解析后的图形区域信息直接发给视频控件即可。图形信息支持任意形状，直接绘制在原始图片上，采用绝对坐标。
  3. 图形信息包括名字、边框大小、边框颜色、背景颜色、矩形区域、路径集合、点坐标集合等。
  4. 每个图形信息都可指定三种区域中的一种或者多种，指定了的都会绘制。
  5. 内置悬浮条控件，悬浮条位置支持顶部、底部、左侧、右侧。
  6. 悬浮条控件参数包括边距、间距、背景透明度、背景颜色、文本颜色、按下颜色、位置、按钮图标代码集合、按钮名称标识集合、按钮提示信息集合。
  7. 悬浮条控件一排工具按钮可自定义，通过结构体参数设置，图标可选图形字体还是自定义图片。
  8. 悬浮条按钮内部实现了录像切换、抓拍截图、静音切换、关闭视频等功能，也可以自行在源码中增加自己对应的功能。
  9. 悬浮条按钮对应实现了功能的按钮，有对应图标切换处理，比如录像按钮按下后会切换到正在录像中的图标，声音按钮切换后变成静音图标，再次切换还原。
  10. 悬浮条按钮单击后都用名称唯一标识作为信号发出，可以自行关联响应处理。
  11. 悬浮条空白区域可以显示提示信息，默认显示当前视频分辨率大小，可以增加帧率、码流大小等信息。
  12. 视频控件参数包括边框大小、边框颜色、焦点颜色、背景颜色（默认透明）、文字颜色（默认全局文字颜色）、填充颜色（视频外的空白处填充黑色）、背景文字、背景图片（如果设置了图片优先取图片）、是否拷贝图片、缩放显示模式（自动调整、等比例缩放、拉伸填充）、视频显示模式（句柄、绘制、GPU）、启用悬浮条、悬浮条尺寸（横向为高度、纵向为宽度）、悬浮条位置（顶部、底部、左侧、右侧）。

4.4 内核ffmpeg

  1. 支持各种音视频文件、本地摄像头设备，各种视频流网络流。
  2. 支持开始播放、暂停播放、继续播放、停止播放、设置播放进度、倍速播放。
  3. 可设置音量、静音切换、抓拍图片、录像存储。
  4. 自动提取专辑信息比如标题、艺术家、专辑、专辑封面，自动显示专辑封面。
  5. 完美支持音视频同步和倍速播放。
  6. 解码策略支持速度优先、质量优先、均衡处理、最快速度。
  7. 支持手机视频旋转角度显示，比如一般手机拍摄的视频是旋转了90度的，解码显示的时候需要重新旋转90度才是正的。
  8. 自动转换yuv420格式，比如本地摄像头是yuyv422格式，有些视频文件是xx格式，统一将非yuv420格式转换，然后再进行处理。
  9. 支持硬解码dxva2、d3d11va等，性能极高尤其是大分辨率比如4K视频。
  10. 视频响应极低延迟0.2s左右，极速响应打开视频流0.5s左右，专门做了优化处理。
  11. 硬解码和GPU绘制组合，极低CPU占用，比海康大华等客户端更优。
  12. 支持视频流中的各种音频格式，AAC、PCM、G.726、G.711A、G.711Mu、G.711ulaw、G.711alaw、MP2L2等都支持，推荐选择AAC兼容性跨平台性最好。
  13. 视频存储支持yuv、h264、mp4多种格式，音频存储支持pcm、wav、aac多种格式。默认视频mp4格式、音频aac格式。
  14. 支持分开存储音频视频文件，也支持合并到一个mp4文件，默认策略是无论何种音视频文件格式存储，最终都转成mp4及aac格式，然后合并成音视频一起的mp4文件。
  15. 支持本地摄像头实时视频显示带音频输入输出，音视频录制合并到一个mp4文件。
  16. 支持H265编码（现在越来越多的监控摄像头是H265视频流格式）生成视频文件，内部自动识别切换编码格式。
  17. 自动识别视频流动态分辨率改动，重新打开视频流。
  18. 纯qt+ffmpeg解码，非sdl等第三方绘制播放依赖，gpu绘制采用qopenglwidget，音频播放采用qaudiooutput。
  19. 同时支持ffmpeg2、ffmpeg3、ffmpeg4、ffmpeg5版本，全部做了兼容处理。如果需要支持xp需要选用ffmpeg3及以下。

五、相关代码

void FFmpegSaveSimple::run()
{
    if (!this->open()) {
        this->close();
        return;
    }

    int ret;
    AVPacket packet;
    qint64 videoCount = 0;
    qint64 startTime = av_gettime();

    while (!stopped) {
        //读取一帧
        ret = av_read_frame(formatCtxIn, &packet);
        int index = packet.stream_index;
        if (ret < 0) {
            if (ret == AVERROR_EOF || ret == AVERROR_EXIT) {
                debug(ret, "文件结束");
                break;
            } else {
                debug(ret, "读取出错");
                continue;
            }
        }

        //取出输入输出流的时间基
        AVStream *streamIn = formatCtxIn->streams[index];
        AVStream *streamOut = formatCtxOut->streams[index];
        AVRational timeBaseIn = streamIn->time_base;
        AVRational timeBaseOut = streamOut->time_base;

        if (index == videoIndex) {
            videoCount++;
        }

        //纠正有些文件比如h264格式的没有pts
        if (packet.pts == AV_NOPTS_VALUE) {
            qreal fps = av_q2d(formatCtxIn->streams[videoIndex]->r_frame_rate);
            FFmpegHelper::rescalePacket(&packet, timeBaseIn, videoCount, fps);
        }

        //延时(防止数据太快给缓存造成太大压力)
        if (index == videoIndex) {
            AVRational timeBase = {1, AV_TIME_BASE};
            int64_t ptsTime = av_rescale_q(packet.dts, timeBaseIn, timeBase);
            int64_t nowTime = av_gettime() - startTime;
            if (ptsTime > nowTime) {
                av_usleep(ptsTime - nowTime);
            }
        }

        //重新调整时间基准
        FFmpegHelper::rescalePacket(&packet, timeBaseIn, timeBaseOut);

        qDebug() << TIMEMS << "发送一帧" << videoCount << packet.flags << packet.pts << packet.dts;
        //ret = av_write_frame(formatCtxOut, &packet);
        ret = av_interleaved_write_frame(formatCtxOut, &packet);
        if (ret < 0) {
            debug(ret, "写数据包");
            break;
        }

        av_packet_unref(&packet);
    }

    //写文件尾
    av_write_trailer(formatCtxOut);
    this->close();
}

void FFmpegHelper::rescalePacket(AVPacket *packet, AVRational timeBaseIn, qint64 &count, qreal fps)
{
    count++;
    qreal duration = AV_TIME_BASE / fps;
    packet->pts = (count * duration) / (av_q2d(timeBaseIn) * AV_TIME_BASE);
    packet->dts = packet->pts;
    packet->duration = duration / (av_q2d(timeBaseIn) * AV_TIME_BASE);
}

void FFmpegHelper::rescalePacket(AVPacket *packet, AVRational timeBaseIn, AVRational timeBaseOut)
{
    //1. av_rescale_q里面调用的av_rescale_q_rnd
    //2. av_rescale_q_rnd里面调用的av_rescale_rnd
    //3. av_packet_rescale_ts对pts/dts/duration三者调用av_rescale_q
#if 1
    packet->pts = av_rescale_q_rnd(packet->pts, timeBaseIn, timeBaseOut, AVRounding(AV_ROUND_NEAR_INF | AV_ROUND_PASS_MINMAX));
    packet->dts = av_rescale_q_rnd(packet->dts, timeBaseIn, timeBaseOut, AVRounding(AV_ROUND_NEAR_INF | AV_ROUND_PASS_MINMAX));
    packet->duration = av_rescale_q(packet->duration, timeBaseIn, timeBaseOut);
#else
    av_packet_rescale_ts(packet, timeBaseIn, timeBaseOut);
#endif
    packet->pos = -1;
}

void FFmpegHelper::rescalePacket(AVPacket *packet, AVRational timeBaseIn, AVRational timeBaseOut, qint64 &duration)
{
    //qDebug() << TIMEMS << duration << packet->duration << timeBaseIn.den << timeBaseIn.num << timeBaseOut.den << timeBaseOut.num;
    packet->pts = av_rescale_q_rnd(duration, timeBaseIn, timeBaseOut, AV_ROUND_UP);
    packet->dts = packet->pts;//av_rescale_q_rnd(duration, timeBaseIn, timeBaseOut, AV_ROUND_UP);
    //packet->duration = av_rescale_q_rnd(packet->duration, timeBaseIn, timeBaseOut,AV_ROUND_UP);
    packet->pos = -1;
    duration += packet->duration;
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python实现PSO粒子群优化算法优化BP神经网络回归模型(BP神经网络回归算法)项目实战

Python实现PSO粒子群优化算法优化BP神经网络回归模型(BP神经网络回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 PSO是粒子群优化算法&#xff08;Particle Swarm Optimization&#xff09;的英文缩写&#xff0c;是一…
阅读更多...
经典指针笔试题你会了嘛

经典指针笔试题你会了嘛

作者简介&#xff1a;დ旧言~&#xff0c;目前大一&#xff0c;现在学习Java&#xff0c;c&#xff0c;Python等 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 望小伙伴们点赞&#x1f44d;收藏✨加关注哟&#x1f495;&#x1f495; 指针和数组笔试题 &…
阅读更多...
华为数通智选交换机S5735S-L24T4S-QA2无法SSH远程访问

华为数通智选交换机S5735S-L24T4S-QA2无法SSH远程访问

以前都是按照华为S5700交换机开启SSH远程访问方法配置不同网段通过静态路由实现互通，华为S5700交换机开启ssh远程登陆，现在新买的华为数通智选交换机S5735S-L24T4S-QA2，也是按照这步骤配置,令人不解的是，竟然无法ssh访问，仔细看了配置也没有发现问题，在华为eNSP模拟器上验…
阅读更多...
【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入

文章目录 顶部导航栏和底部导航栏设置创建几个需要底部导航栏切换的页面使用阿里巴巴矢量图标库完成底部导航栏tabBar设置页面顶部导航栏标题 样式优化 顶部导航栏和底部导航栏设置 在正式开发小程序的功能之前&#xff0c;首先需要确定小程序的主要框架。 创建几个需要底部导…
阅读更多...
通讯录（纯C语言实现）

通讯录（纯C语言实现）

相信大家都有过通讯录&#xff0c;今天我来带大家实现以下最简单的通讯录&#xff0c;通过本篇文章&#xff0c;相信可以让大家对C语言有进一步的认识。 话不多说&#xff0c;我们先放函数的实现 #define _CRT_SECURE_NO_WARNINGS 1 #include "Contact.h"int Chea…
阅读更多...
Nautilus Chain 更换全新测试网，主网即将在不久上线

Nautilus Chain 更换全新测试网，主网即将在不久上线

目前&#xff0c;Nautilus Chain 正在为主网上线前的最后阶段做准备&#xff0c;据悉该链更新了全新的测试网&#xff0c;在此前版本的测试网的基础上进行了全新的技术升级&#xff0c;最新测试网版本与生态发展的技术规划更为贴近。本次测试网升级将会是最后一次测试网版本的迭…
阅读更多...
基于深度学习的高精度80类动物目标检测系统（PyTorch+Pyside6+YOLOv5模型）

基于深度学习的高精度80类动物目标检测系统（PyTorch+Pyside6+YOLOv5模型）

摘要&#xff1a;基于深度学习的高精度80类动物目标检测识别系统可用于日常生活中或野外来检测与定位80类动物目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的80类动物目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YO…
阅读更多...
Ubuntu下配置Redis哨兵集群

Ubuntu下配置Redis哨兵集群

目录 准备实例和配置 启动哨兵集群 测试配置 搭建一个三节点形成的Sentinel集群&#xff0c;来监管Redis主从集群。 三个sentinel哨兵实例信息如下&#xff1a; 节点IPPORTs1192.168.22.13527001s2192.168.22.13527002s3192.168.22.13527003 准备实例和配置 要在同一台虚…
阅读更多...
week2

week2

第2周 目录 第2周 四、多变量线性回归(Linear Regression with Multiple Variables) 4.1 多维特征4.2 多变量梯度下降4.3 梯度下降法实践1-特征缩放4.4 梯度下降法实践2-学习率4.5 特征和多项式回归4.6 正规方程4.7 正规方程及不可逆性(可选) 四、多变量线性回归(Linear Regres…
阅读更多...
opencv 基础图像操作-彩色图像

opencv 基础图像操作-彩色图像

opencv 基础图像操作-彩色图像 彩色图像 相比二值图像和灰度图像&#xff0c;彩色图像是更常见的一类图像&#xff0c;它能表现更丰富的细节信息。 神经生理学实验发现&#xff0c;在视网膜上存在三种不同的颜色感受器&#xff0c;能够感受三种不同的颜色&#xff1a;红色、绿色…
阅读更多...
SpringBoot【原理分析、YAML文件、SpringBoot注册web组件】(二)-全面详解（学习总结---从入门到深化）

SpringBoot【原理分析、YAML文件、SpringBoot注册web组件】(二)-全面详解（学习总结---从入门到深化）

目录 SpringBoot原理分析_核心注解 YAML文件_配置文件介绍 YAML文件_自定义配置简单数据 YAML文件_自定义配置对象数据 YAML文件_自定义配置集合数据 YAML文件_读取配置文件的数据 使用ConfigurationProperties读取 YAML文件_占位符的使用 YAML文件_配置文件存放位置及优…
阅读更多...
python调用钉钉发送告警消息

python调用钉钉发送告警消息

zabbix和prometheus都能做监控告警调用企业微信和钉钉。那么问题来了做为一名合格的运维和开发人员&#xff0c;脚本发现故障告警&#xff0c;自动调用发送详细告警内容&#xff0c;这点儿东西得会。 效果图如下&#xff1a; 普通发送方式 import requestsdef dingding_info(…
阅读更多...
学习系统编程No.30【多线程控制实战】

学习系统编程No.30【多线程控制实战】

引言&#xff1a; 北京时间&#xff1a;2023/7/7/9:58&#xff0c;耳机正在充电中&#xff0c;所以刚好让我们先把引言写一写&#xff0c;昨天睡觉前听了一会小说&#xff0c;听小说的好处就在于&#xff0c;它可以让你放下手机&#xff0c;快速睡觉&#xff0c;并且还有一定的…
阅读更多...
【DBA课程-笔记】第2章：MongoDB数据数据查询与分析

【DBA课程-笔记】第2章：MongoDB数据数据查询与分析

目录 一、课程大纲 二、MongoDB 条件查询 1. 制造 MongoDB 测试数据 2. MongoDB 数据查询 与 SQL对应关系 3. MongoDB 查询运算符 4. MongoDB 数据查询、条件查询、过滤 5. MongoDB 条件查询命令 6. MongoDB 数据查询数组条件 A. 精确匹配数组元素&#xff1a; B. 无…
阅读更多...
检测到错误页面web应用服务器版本信息泄露

检测到错误页面web应用服务器版本信息泄露

详细描述 Web服务器未能正确处理异常请求导致Web服务器版本信息泄露&#xff0c;攻击者收集到服务器信息后可进行进一步针对性攻击。 解决办法 临时修复建议如下&#xff1a; 1、关闭web服务器错误提示。 2、关闭运行平台的错误提示。 3、建立错误机制&#xff0c;不要把真实…
阅读更多...
校园课表微信小程序全栈项目

校园课表微信小程序全栈项目

遇到的第一个问题关于npm start 首先找到对应的后端项目 crtl shift (esc键下的波浪号) 召唤终端 Error:Cannot find module dotenv 解决问题: npm install dotenv 简写 npm i dotenv 然后遇到第二个问题 Port 3000 is already in use 我的3000接口被占用 那就要去检…
阅读更多...
leetcode 74. 搜索二维矩阵(java)

leetcode 74. 搜索二维矩阵(java)

搜索二维矩阵 leetcode 74. 搜索二维矩阵题目描述抽象BST代码演示 抽象BST leetcode 74. 搜索二维矩阵 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/search-a-2d-matrix 题目描述 给你一个满足下述两条属性的 m x n 整…
阅读更多...
uniapp和uview组件实现下拉触底刷新列表

uniapp和uview组件实现下拉触底刷新列表

下面是一个在UniApp中使用uView组件实现下拉触底刷新列表的示例&#xff0c;并使用Axios来请求分页数据列表&#xff1a; 首先&#xff0c;确保你已经在UniApp项目中添加了uView组件库。你可以在项目根目录执行以下命令安装它们&#xff1a; npm install uview-ui或者使用 Hb…
阅读更多...
【Vue3】setup参数细讲！computed计算属性和watch监听属性

【Vue3】setup参数细讲！computed计算属性和watch监听属性

setup参数细讲&#xff01;computed计算属性和watch监听属性 setup细讲!setup参数&#xff0c;steup&#xff08;props&#xff0c;context&#xff09;参数1.props&#xff0c;负责接收父组件传过来的值参数2.contextcontext.attrscontext.emitcontext.slots&#xff0c; 插槽…
阅读更多...
CSS 伪元素： ::marker 自定义列表序号

CSS 伪元素： ::marker 自定义列表序号

::marker 伪元素 ::marker&#xff0c;可作用在任何设置了 display: list-item 的元素或伪元素上&#xff0c;例如<li>和<summary>。 /** <ul><li>Peaches</li><li>Apples</li><li>Plums</li> </ul> */ ul li::…
阅读更多...
最新文章

Copyright @ 2022~2023