当前位置: 首页 > news >正文

[小尾巴 UI 组件库] 全屏响应式轮播背景图(基于 Vue 3 与 Element Plus)

文章归档于:https://www.yuque.com/u27599042/row3c6

组件库地址

  • npm:https://www.npmjs.com/package/xwb-ui?activeTab=readme
  • 小尾巴 UI 组件库源码 gitee:https://gitee.com/tongchaowei/xwb-ui
  • 小尾巴 UI 组件库测试代码 gitee:https://gitee.com/tongchaowei/xwb-ui-test

组件的下载与配置

  • [小尾巴 UI 组件库] 组件库配置与使用

组件说明

  • 该组件基于 Vue 3 与 Element Plus 实现
  • 该组件全屏显示背景图片,实现了响应式
  • 该组件使用了粘滞定位,其中 z-index 的值为 -100
  • 当需要显示的背景图片多于一张时,会开启背景图片的轮播,轮播图使用了 Element Plus 组件库中轮播图(走马灯)组件

组件属性说明

属性名属性说明类型默认值
images背景图片地址。注意:背景图片需要放置在 public 目录下,背景图片的路径需要以 / 开头,后面编写图片在 public 目录下的路径Array<string> 由图片地址字符串组成的数组[]
interval背景轮播切换背景图片的时间间隔,单位毫秒(ms)Number5000

组件测试

<script setup lang="ts"></script><template><div><GoodsCardRowSmallclass="goods"v-for="i in 20":imgSrc="'/img/book-1.png_580x580q90.jpg_.webp'"></GoodsCardRowSmall></div><!-- 使用全屏响应式轮播背景图组件 --><Background:images="['/img/background-1.jpg', '/img/background-1.jpg', '/img/background-1.jpg']":interval="5000"></Background>
</template><style scoped lang="scss">
div {.goods {margin-bottom: 1rem;}
}
</style>
  • image.png

组件源码

<script setup lang="ts">
/* 接收参数 */
const props = defineProps({// 背景需要展示的图片images: {type: Array<string>, default: []},// 背景图片有多张时,每个背景图片轮播的事件间隔,单位“毫秒”interval: {type: Number, default: 5000}
})/** 处理图片响应式问题* 使用 vueuse 监听容器大小修改图片宽高显示* 修改为使用背景图片实现背景响应式*/
// import { vElementSize } from '@vueuse/components' // 获取元素大小的指令
// // 指令绑定的元素宽度改变时调用函数
// function onResize({ width, height }: { width: number; height: number }) {
//   // 获取所有图片
//   let imgs = document.querySelectorAll('img')
//   let wh = width/height // 宽高比
//   if (
//       wh < 1960/1080 ||
//       wh < 1760/990 ||
//       wh < 1690/1050 ||
//       wh < 1600/900 ||
//       wh < 1366/768 ||
//       wh < 1280/1024 ||
//       wh < 1280/720 ||
//       wh < 1128/634 ||
//       wh < 1024/768 ||
//       wh < 800/600
//   ) {
//     imgs.forEach(img => {
//       img.style.height = '100%'
//       img.style.width = 'auto'
//     })
//   } else {
//     imgs.forEach(img => {
//       img.style.height = 'auto'
//       img.style.width = '100%'
//     })
//   }
// }
/* 动态添加背景 */
import {onMounted} from 'vue'
onMounted(() => {document.querySelectorAll('.img').forEach((img, idx) => {img.style.backgroundImage = `url(${props.images[idx]})`})
})
</script><template><div class="background-container"><!-- 单个背景图片 --><divclass="background-img"v-if="images.length == 1"><!--<img :src="images[0]" alt="背景图片" ref="img">--><div class="img"></div></div><!-- 轮播图组件,展示多个背景图 --><div class="carousel" v-else-if="images.length > 1"><el-carousel height="100vh" :interval="interval"><el-carousel-item v-for="idx in images.length" :key="idx"><div class="img"></div></el-carousel-item></el-carousel></div></div>
</template><style scoped lang="scss">
// 图片变化过度
img {transition: all 0.5s;
}
// 背景组件容器
.background-container {// 粘滞定位position: fixed;top: 0;left: 0;z-index: -100;width: 100%;height: 100vh;// 单个背景图片.background-img {width: 100%;height: 100%;}// 轮播图展示多个背景图片.carousel {height: 100%;width: 100%;}// 图片盒子样式.img {width: 100%;height: 100%;background-size: cover;background-position: center;background-attachment: fixed; // 背景图片粘滞}
}
</style>

相关文章:

[小尾巴 UI 组件库] 全屏响应式轮播背景图(基于 Vue 3 与 Element Plus)

文章归档于&#xff1a;https://www.yuque.com/u27599042/row3c6 组件库地址 npm&#xff1a;https://www.npmjs.com/package/xwb-ui?activeTabreadme小尾巴 UI 组件库源码 gitee&#xff1a;https://gitee.com/tongchaowei/xwb-ui小尾巴 UI 组件库测试代码 gitee&#xff1a…...

关于ESP32S3无法识别到端口问题

前言 &#xff08;1&#xff09;因为实习问题&#xff0c;需要使用ESP32BOX进行二次开发。一般来说&#xff0c;接触一款MCU&#xff0c;3天上手是基本操作。但是对于乐鑫的芯片&#xff0c;环境搭建是真的折磨人&#xff08;苦笑&#xff09;&#xff0c;而且官方文档几乎没有…...

如何判断bug是前端bug还是后端bug

1.前后端bug 特征&#xff1a; 前端主要负责显示数据&#xff0c;后端主要负责处理数据、存储数据&#xff0c;前后端主要通过接口进行数据交换。 前端bug的特征&#xff1a; 界面显示类问题&#xff1a;如文字大小不一&#xff0c;控件颜色不搭&#xff0c;控件不整齐&#x…...

EasyExcel填充数据EasyExcel填充数据流下载 easyexcel填充excel下载 easyexcel填充

EasyExcel填充数据EasyExcel填充数据流下载 easyexcel填充excel下载 easyexcel填充 1、填充数据然后将文件输出给浏览器 1、填充数据然后将文件输出给浏览器 官网地址 官网的demo填充生成的是file文件, 实际需求用的最多的是 填充完数据将Excel输出给浏览器 填充模版Excel文…...

精通数据集成:轻易云数据集成平台应用实战与技术内幕

企业系统中数据交互的重要性不言而喻。一个系统如果孤立运行&#xff0c;即使积累了海量数据&#xff0c;仍然是一座信息孤岛。另一方面&#xff0c;一个积极参与数据交互的系统&#xff0c;成为各系统之间的“交际花”&#xff0c;具备中台的性质。 然而&#xff0c;大多数情况…...

“2023中国数字化服务之选”榜单发布,谷器数据荣耀登榜!

9月7日&#xff0c;行业权威媒体Internet Deep联合eNET研究院、德本咨询重磅发布了“2023中国数字化服务之选”榜单&#xff0c;经专家评审认定&#xff0c;谷器数据凭借领先的综合技术实力与产品应用创新能力荣耀登榜&#xff01; 谷器数据生产制造数字化服务根据客户整体需求…...

iisfastchi漏洞复现

1.查看版本 2.在路径中写入 php脚本 发现使用不了 3.环境搭建 结局打开 把限制打开...

虚拟机Ubuntu操作系统常用终端命令(详细解释+详细演示)

虚拟机Ubuntu操作系统常用终端命令 本篇讲述了Ubuntu操作系统常用的三个功能&#xff0c;即归档&#xff0c;软链接和用户管理方面的相关知识。希望能够得到大家的支持。 文章目录 虚拟机Ubuntu操作系统常用终端命令二、使用步骤1.归档1.1创建档案包1.2还原档案包1.3归档并压缩…...

【力扣每日一题】2023.9.12 课程表Ⅳ

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 今天是课程表系列题目的最后一题&#xff0c;因为我在题库里找不到课程表5了&#xff0c;所以今天的每日一题就是最后一个课程表了。 题…...

CentOS 安装HTTP代理服务器 Tinyproxy

Tinyproxy是一个小型的基于GPL的HTTP/SSL代理程序&#xff0c;非常适合小型网络而且便于快速部署。这个代理程序最大的优点就是占用系统资源比较少。这里使用的系统为CentOS7.6&#xff0c;可以直接 yum 方式安装。 yum install tinyproxy -y 如果提示找不到安装包&#xff0…...

PHPWord 模板输出checkbox复选框和checked已勾选状态,以及 模板替换时数据如何分行

PHPWord 模板输出checkbox复选框和checked已勾选状态,以及 模板替换时数据如何分行 期望目标 和 模板配置复选框代码数据分行显示在使用PHPWORD模板替换时,经常会有 动态渲染选择项 和 选择项需要被勾选的要求,以及动态数据分行显示等要求。 本文根据 空复选框、勾选复选框…...

vue学习之 v-for key

v-for key Vue使用 v-for渲染的元素列表时&#xff0c;它默认使用“就地更新”的策略。如果数据项的顺序被改变&#xff0c;Vue 将不会移动 DOM元素来匹配数据项的顺序&#xff0c;而是就地更新每个元素。创建 demo9.html,内容如下 <!DOCTYPE html> <html lang"…...

ARM接口编程—IIC总线(exynos 4412平台)

IIC总线简介 IIC总线是Philips公司在八十年代初推出的一种串行、半双工总线 主要用于近距离、低速的芯片之间的通信&#xff1b;IIC总线有两根双向的信号线一根数据线SDA用于收发数据&#xff0c;一根时钟线SCL用于通信双方时钟的同步&#xff1b;IIC总线硬件结构简单&#xff…...

ReactNative进阶(二十一)开源插件 react-native-device-info 获取设备信息

文章目录 一、前言二、拓展阅读 一、前言 项目开发过程中&#xff0c;需要获取设备信息&#xff0c;例如获取设备名称。可通过使用开源的第三方组件react-native-device-info&#xff0c;该组件适用于iOS和Android双平台。 在ReactNative项目中可通过npm命令下载 react-nativ…...

MySql学习笔记05——DML

DML 插入数据insert insert into 表名(字段名1&#xff0c;字段名2&#xff0c;字段名3...)values(值1&#xff0c;值2&#xff0c;值3)&#xff1b;字段名和值要一一对应&#xff08;顺序对应&#xff0c;数据类型对应&#xff09; insert into t_student(no,name,sex,age,…...

halcon对图片进行处理基础

实例图片 C:\Users\Public\Documents\MVTec\HALCON-19.11-Progress\examples\images*读取图片 read_image (Image1, D:/c/image/1.png) *读取大小 get_image_size(Image1,Width, Height) *创建窗口 dev_close_window() dev_open_window(0, 0, Width, Height, black, WindowHan…...

element-ui在vue中如何实现校验两个复选框至少选择一个!

整体进行验证 想验证至少选择一个复选框&#xff0c;可以将这两个复选框视为一个整体进行验证。在 Element UI 中&#xff0c;可以使用自定义验证规则来实现这一点。 你可以在 rules 对象中定义一个自定义的验证规则来检查 isCheck1 和 isCheck2 至少有一个被选中。 以下是一…...

DeepinV20/Ubuntu安装postgresql方法

首先&#xff0c;建议看一下官方的安装文档PostgreSQL: Linux downloads (Ubuntu) PostgreSQL Apt Repository 简单的说&#xff0c;就是Ubuntu下的Apt仓库&#xff0c;可以用来安装任何支持版本的PgSQL。 If the version included in your version of Ubuntu is not the one…...

汽车ECU软件升级方案介绍

软件OTA的背景 随着汽车网联化的发展,现在的汽车电子架构都支持软件空中升级,即大家常说的OTA(Software Update and Upgrade Over the Air),传统的软件升级常常是离线升级,需要车主将车开到维修保养中心进行软件更新。不过OTA升级方式带来方便之处需要考虑的问题也随之增…...

首家!亚信科技AntDB数据库完成中国信通院数据库迁移工具专项测试

近日&#xff0c;在中国信通院“可信数据库”数据库迁移工具专项测试中&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧科技&#xff09;数据库数据同步平台V2.1产品依据《数据库迁移工具能力要求》、结合亚信科技AntDB分布式关系型数据库产品&…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

基于Uniapp的HarmonyOS 5.0体育应用开发攻略

一、技术架构设计 1.混合开发框架选型 &#xff08;1&#xff09;使用Uniapp 3.8版本支持ArkTS编译 &#xff08;2&#xff09;通过uni-harmony插件调用原生能力 &#xff08;3&#xff09;分层架构设计&#xff1a; graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...

[C++错误经验]case语句跳过变量初始化

标题&#xff1a;[C错误经验]case语句跳过变量初始化 水墨不写bug 文章目录 一、错误信息复现二、错误分析三、解决方法 一、错误信息复现 write.cc:80:14: error: jump to case label80 | case 2:| ^ write.cc:76:20: note: crosses initialization…...