Vue3 中组件传递 + css 变量的组合
文章目录
- 需求
- 效果如下图所示
- 代码逻辑
- 代码
- 参考
需求
开发一个箭头组件,根据父组件传递的 props 来修改 css 的颜色
效果如下图所示

代码逻辑

代码
父组件:
<Arrow color="red" />
子组件:
<template><div class="arrow" :style="{ '--arrow-color': color, '--arrow-width': `${width}px`,'--arrow-rotation': `${rotation}deg`}"></div>
</template><script lang='ts' setup>
import { defineProps } from 'vue';const props = defineProps({color: {type: String,default: 'black'},width: {type: Number,default: 30},rotation: {type: Number,default: 0 // 旋转角度,默认不旋转}
});
</script><style scoped>
.arrow {display: inline-block;position: relative;margin: 10px;width: var(--arrow-width);transform: rotate(var(--arrow-rotation)); /* 添加旋转样式 */
}.arrow::before {content: '';position: absolute;top: 50%;left: 0;width: var(--arrow-width);border-top: 2px dotted var(--arrow-color);transform: translateY(-50%);
}.arrow::after {content: '';position: absolute;top: 50%;left: calc(var(--arrow-width) - 8px);width: 0;height: 0;border-left: 10px solid var(--arrow-color);border-top: 7px solid transparent;border-bottom: 7px solid transparent;transform: translateY(-50%);
}
</style>
参考
1. 使用 CSS 自定义属性(变量) https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
相关文章:
Vue3 中组件传递 + css 变量的组合
文章目录 需求效果如下图所示代码逻辑代码参考 需求 开发一个箭头组件,根据父组件传递的 props 来修改 css 的颜色 效果如下图所示 代码逻辑 代码 父组件: <Arrow color"red" />子组件: <template><div class&…...
秋分之际,又搭建了一款微信记账本小程序
在这个金色的季节里,每一粒粮食都蕴含着生命的奇迹,每一片叶子都在诉说着成长的故事。秋分之际,又搭建了一款微信记账本小程序。 产品概述 微信记账本小程序是一款便捷的个人财务管理工具,旨在帮助用户轻松记录、管理和分析日常…...
聚合函数count 和 group by
count函数: count(列名) SELECT COUNT(sid) FROM grade 统计列中所有的数值个数,会忽略null值。 count(*)和count(1) SELECT COUNT(*) FROM grade SELECT COUNT(1) FROM grade 统…...
Vue的工程化和element快速入门
vue项目的创建: vue项目的启动方式: vue项目开发流程: 代码示例: <!-- <script>//写数据export default{data(){return{msg: 上海}}} </script> --><script setup>import {ref} from vue;//调用ref函数&…...
【Kubernetes】常见面试题汇总(三十一)
目录 83.简述你知道的 K8s 中几种 Controller 控制器并详述其工作原理。简述 ingress-controller 的工作机制。 特别说明: 题目 1-68 属于【Kubernetes】的常规概念题,即 “ 汇总(一)~(二十二)” 。 …...
在 Windows 上安装和配置 NVIDIA 驱动程序、CUDA、cuDNN 和 TensorRT
在 Windows 上安装和配置 NVIDIA 驱动程序、CUDA、cuDNN 和 TensorRT 1. 安装 NVIDIA 图形驱动程序2. 安装 CUDA Toolkit3. 安装 cuDNN4.安装 TensorRT5. 常见问题1. 安装 NVIDIA 图形驱动程序 首先需要安装兼容 CUDA 的 NVIDIA 驱动程序。 下载最新驱动: 访问 NVIDIA 官网,…...
京准电钟:NTP网络校时服务器助力校园体育场馆
京准电钟:NTP网络校时服务器助力校园体育场馆 京准电钟:NTP网络校时服务器助力校园体育场馆 体育场馆数字时钟系统可为观众及工作人员提供标准时间信息,为计算机及其他系统提供标准时间源,为协调场馆各业务系统与各部门的工作提供…...
9.25度小满一面
1.map的底层 2.unorder_map哈希表有自己实现过吗?哈希冲突 3.poll和epoll和select的优缺点、 4.线程同步机制是用来做什么的? 5.五子棋项目问题-- 算法题: 6.LeetCode.重排链表 给定一个单链表 L 的头节点 head ,单链表 L 表示为: L0…...
mysql批量修改表前缀
现有表前缀xh,批量修改为fax_需要怎么做 SELECTCONCAT(ALTER TABLE ,table_name, RENAME TO fax_,substring(table_name, 3),;) FROMinformation_schema. TABLES WHEREtable_name LIKE xh_%; 运行之后可以但是生成了一批修改表明的命令 此时批量复制执行就可实现批量修改表前…...
算法复杂度
1. 数据结构前⾔ 1.1数据结构 数据结构是计算机存储数据,组织数据的方式,指相互之间存在⼀种或多种特定关系的数 据元素的集合。常见的数据结构有线性表,树,图,哈希等。 1.2 算法 算法是一种计算过程,输…...
vue到出excel
安装 npm install exceljs npm install file-saver<template><button click"dade66">导出 66</button> </template><script> import ExcelJS from exceljs; import { saveAs } from file-saver;export default {data() {return {data…...
【延时队列的实现方式】
文章目录 延时队列JDK自带的延时队列实现Redis实现延迟队列RabbitMQ 延时队列 延时队列 延时队列是一种特殊类型的队列,它允许元素在特定时间间隔后才能被处理。这种队列在处理具有延迟需求的任务时非常有用,例如定时任务、事件驱动系统等 延时队列在项…...
Fyne ( go跨平台GUI )中文文档- 扩展Fyne (七)
本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16 及更高版本, ide为goland2021.2 这是一个系列文章: Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne ( go跨平台GUI…...
Qt (19)【Qt 线程安全 | 互斥锁QMutex QMutexLocker | 条件变量 | 信号量】
阅读导航 引言一、互斥锁1. QMutex(1)基本概念(2)使用示例基本需求⭕thread.h⭕thread.cpp⭕widget.h⭕widget.cpp 2. QMutexLocker(1)基本概念(2)使用示例 3. QReadWriteLocker、QR…...
Java语法-类和对象(上)
1. 面向对象的初步认识 1.1 什么是面向对象 概念: Java是一门纯面向对象的语言(Object Oriented Program,简称OOP),在面向对象的世界里,一切皆为对象。 1.2 面向对象VS面向过程 如:洗衣服 面向过程: 注重的是洗衣服的过程,少了一个环节也不…...
Presto如何配置资源队列或资源组
Presto的任务队列配置主要涉及到查询队列和资源组的配置,这些配置通常用于管理Presto集群中的查询执行和资源分配。但是注意这两个东西是共存,互补的关系,并不需要纠结那种配置方式更加出色 一、查询队列配置 Presto的查询队列配置主要通过…...
828华为云征文|使用Flexus X实例集成ES搜索引擎
目录 一、应用场景 1.1 Flexus X实例概述 1.2 ES搜索引擎 二、安装相关服务 2.1 安装Elasticsearch7.17.0 2.2 安装kibana7.17.0 三、开通安全组规则 四、整体感受 4.1 Flexus X实例 4.2 使用感觉 一、应用场景 1.1 Flexus X实例概述 Flexus X实例是华为云推出的一款…...
【设计模式-访问者模式】
定义 访问者模式(Visitor Pattern)是一种行为型设计模式,允许你在不修改已有类的情况下向这些类添加新的功能或行为。它通过将操作的执行逻辑从对象的类中分离出来,使得你可以在保持类的封闭性(符合开闭原则ÿ…...
一元运算符(自增自减)
一、一元运算符 一元运算符,只需要一个操作数 1. 正号 正号不会对数字产生任何影响 2.-负号 负号可以对数字进行负号的取反 对于非Number的值,会将先转换为Number,在进行运算: 可以对一个其他的数据类型使用,来将其转换为n…...
gitlab/极狐-离线包下载地址
如果想要使用Gitlab/极狐进行数据的恢复,只能使用相同版本或者相近版本的安装包,因此有时候需要到它的官网上下载对应版本的安装包,以下是我收集到的对应地址的下载路径: Gitlab Gitlab离线库, https://packages.gitl…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...
数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?
系列回顾: 在上一篇《React核心概念:State是什么?》中,我们学习了如何使用useState让一个组件拥有自己的内部数据(State),并通过一个计数器案例,实现了组件的自我更新。这很棒&#…...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网(IIoT)场景中,结合 DDS(Data Distribution Service) 和 Rx(Reactive Extensions) 技术,实现 …...
