Vue3(TypeScript)-CSSProperties代码示例及用法详解

Vue3-CSSProperties代码示例及用法

在Vue3中封装一个可复用的公共CSSProperties

// 目录 /xxx/src/hooks/use-scroll-updown-bottom-content/index.ts 全局定义hooks
import { computed } from 'vue'
import type { CSSProperties } from 'vue'type UpDownOperationType = 'up' | 'down'export const useScrollUpdownBottomContent = (type: UpDownOperationType = 'up',extraHeight = 0
) => {const style = computed<CSSProperties>(() => {const style: CSSProperties = {}if (type === 'up') {style.transform = `translateY(calc(100% + ${extraHeight}px))`} else if (type === 'down') {style.transform = `translateY(calc(100% - ${extraHeight}px))`}style.transitionDuration = '0.25s'style.transitionTimingFunction = 'linear'style.transitionProperty = 'transform'return style})return {style}
}
// 目录 xxx/pages/pages/index.vue 业务组件中使用
import { useScrollUpdownBottomContent } from '@/hooks'
const { style: authInfoScrollStyle } =  useScrollUpdownBottomContent('up', 80)
console.log(authInfoScrollStyle)
// {
//   "transform": "translateY(calc(100% + 80px))",
//   "transitionDuration": "0.25s",
//   "transitionTimingFunction": "linear",
//   "transitionProperty": "transform"
// } 

简单例子,TypeScript中定义CSS Properties
在多个地方重复使用此样式信息,提高代码的可复用性。

interface CustomStyles {backgroundColor: string;color: string;fontSize: string;
}const customStyles: CustomStyles = {backgroundColor: 'blue',color: 'white',fontSize: '16px'
};

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

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

相关文章

一个基于预训练的DenseNet121模型的人脸年龄分类系统

这篇文章采用预训练的DenseNet121模型并使用自定义的数据集类和自定义的类似正态分布的标签平滑策略来训练了一个人脸年龄分类模型&#xff0c;最后基于这个模型用tk实现了一个娱乐向的小系统。 数据集展示&#xff1a; 两个文件夹&#xff0c;分别是训练集和测试集&#xff0…

Bootstrap 3.x 版本基础引入指南

Bootstrap 是一款广受欢迎的前端框架&#xff0c;它简化了网页设计与开发流程&#xff0c;帮助开发者快速创建响应式布局和美观的网页界面。本文将向您介绍如何在项目中引入 Bootstrap 3.x 版本的基本步骤&#xff0c;包括 CSS 和 JavaScript 文件的引用&#xff0c;以及必要的…

java根据不同类型跳转相应的实现类

1 不同实现类字典 AllArgsConstructor Getter public enum SendMessageEnum {HUAWEI("AndHWPush"),JIGUANG("AndJPush"),MEIZU("AndMZPush"),OPPO("AndOppoPush"),XIAOMI("AndXMPush"),XINGE("AndXinGePush"),;p…

Java跨Docker容器备份数据库数据

Java跨Docker容器备份数据库数据 前置背景思路整理编写备份脚本容器启动检验效果Java容器MySQL容器 Java代码执行备份 我的个人博客&#xff1a;Lichg&#xff0c;欢迎大家访问。 前置背景 在我们的开发部署场景中&#xff0c;通常多数使用Docker进行部署。当你的数据库和项目…

【吊打面试官系列】Java高并发篇 - 什么是乐观锁和悲观锁?

大家好&#xff0c;我是锋哥。今天分享关于 【什么是乐观锁和悲观锁?】面试题&#xff0c;希望对大家有帮助&#xff1b; 什么是乐观锁和悲观锁? 1、乐观锁&#xff1a; 就像它的名字一样&#xff0c;对于并发间操作产生的线程安全问题持乐观状态&#xff0c; 乐观锁认为竞争…

ICML 2024 多视角融合驱动的通用具身操作算法SAM-E,为机器人学习复杂操作给出了可行解决方案

当我们拿起一个机械手表时&#xff0c;从正面会看到表盘和指针&#xff0c;从侧面会看到表冠和表链&#xff0c;打开手表背面会看到复杂的齿轮和机芯。每个视角都提供了不同的信息&#xff0c;将这些信息综合起来才能理解操作对象的整体三维。 想让机器人在现实生活中学会执行…

【2024上半年软考】软件设计师答案

软件设计师 群策群力 仅供参考 ①数据库权限应该选revoke ②工作在数据链路层的设备是交换机 ③结构化思维&#xff1a;自上而下分解 ④链表需要遍历的是删除最后一个元素 ⑤磁盘是辅存 ⑥瀑布模型不够灵活 ⑦软件测试路径覆盖程度最高 ⑧29个数字最多查找5次的是有序数组进行二…

nuxt2移动端适配,处理移动端引入的组件库大小不正常显示

版本 "postcss-pxtorem": "^5.1.1" "nuxt": "^2.14.7"安装 npm i -D postcss-pxtorem5.1.1postcss.config.js 排除组件库适配&#xff0c;解决组件库大小在页面不正常显示 const pxToRem require(postcss-pxtorem) module.exports …

AI小天才:让你轻松掌握机器学习之K近邻

课程链接&#xff1a;AI小天才&#xff1a;让你轻松掌握机器学习 K近邻&#xff08;K-Nearest Neighbors&#xff0c;简称KNN&#xff09;算法是一种常用的监督学习算法&#xff0c;用于分类和回归任务。KNN算法的基本原理是通过找出与新样本最近的K个训练样本&#xff0c;并根…

【stm32】江科协听课笔记

[3-1] GPIO输出_哔哩哔哩_bilibili 5.GPIO输出 这里&#xff0c;寄存器就是一段特殊的存储器&#xff0c;内核可以通过APB2总线队寄存器进行读写&#xff0c;这样就可以完成输出/读取电平的功能。寄存器的每一位对应一个引脚&#xff0c;stm32是32位的&#xff0c;这里的寄存器…

【工具】珍藏免费宝藏工具,不好用你来捶我

前言 &#x1f34a;缘由 藏在我硬盘里的好东西&#xff0c;必须跟小伙伴们分享 东西很好&#xff0c;必须分享。良辰吉日&#xff0c;跟大家分享几款神仙级小工具&#xff0c;实际亲测&#xff0c;不好来锤。 正文 一.影刀 影刀可以使任何操作系统、桌面软件、Web程序的自动…

怎么搭建微信留言板功能

在信息爆炸的时代&#xff0c;微信已经成为了我们日常生活中不可或缺的一部分。它不仅仅是一个简单的聊天工具&#xff0c;更是一个充满无限可能的营销平台。今天&#xff0c;我要向大家介绍的是如何在你的微信平台上搭建一个独具特色的留言板功能&#xff0c;让用户能够自由发…

PyTorch的数据处理

&#x1f4a5;今天看一下 PyTorch数据通常的处理方法~ 一般我们会将dataset用来封装自己的数据集&#xff0c;dataloader用于读取数据 Dataset格式说明 &#x1f4ac;dataset定义了这个数据集的总长度&#xff0c;以及会返回哪些参数&#xff0c;模板&#xff1a; from tor…

ubuntu部署gitblit

在Ubuntu上部署Gitblit可以通过以下步骤进行&#xff1a; 安装Java环境&#xff1a; Gitblit需要Java运行环境&#xff0c;可以通过OpenJDK进行安装。 sudo apt update sudo apt install openjdk-11-jdk下载Gitblit&#xff1a; 从Gitblit官方网站下载最新的Gitblit WAR文件…

51-54 Sora能制作动作大片还需要一段时间 | DrivingGaussian:周围动态自动驾驶场景的复合高斯飞溅

24年3月&#xff0c;北大、谷歌和加州大学共同发布了DrivingGaussian: Composite Gaussian Splatting for Surrounding Dynamic Autonomous Driving Scenes。视图合成和可控模拟可以生成自动驾驶的极端场景Corner Case&#xff0c;这些安全关键情况有助于以更低成本验证和增强自…

《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer

宏哥微信粉丝群&#xff1a;https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 1.简介 在我们日常执行自动化测试工作的过程中&#xff0c;经常会遇到一些偶发性的bug&#xff0c;但是因为bug是偶发性的&#xff0c;我们不一定每次执行都能复现&#xff0c;所以我…

ComfyUI 高级实战:极速稳定视频风格转绘

大家好&#xff0c;我是每天分享AI应用的萤火君&#xff01; 重绘视频一直是短视频平台上的热点内容&#xff0c;流量不错。重绘视频一般是将真实视频重绘为动漫风格&#xff0c;或者是使用新的人物形象重放视频中的人物动作&#xff0c;再或者只是重绘视频中的部分内容&#…

什么样的展馆场馆才是科技满满?就差一张智慧场馆大屏

随着科技的飞速发展&#xff0c;传统的场馆展示方式已经无法满足现代人对信息获取和体验的需求。智慧场馆大屏作为一种新型的展示方式&#xff0c;应运而生。它将高清大屏显示技术、智能交互技术、数据分析技术等融为一体&#xff0c;为观众带来更加丰富、生动的展示体验。 一…

web前端绘制关系图:探索复杂数据可视化的艺术

web前端绘制关系图&#xff1a;探索复杂数据可视化的艺术 在数字时代的浪潮中&#xff0c;web前端绘制关系图已经成为数据处理与展示的重要工具。这种技术不仅能够帮助我们更好地理解和分析复杂数据&#xff0c;还能通过直观的可视化方式提升用户体验。本文将深入剖析web前端绘…

Hadoop3:HDFS中NameNode和SecondaryNameNode的工作机制(较复杂)

一、HDFS存储数据的机制简介 HDFS存储元数据(meta data)的时候 结果&#xff0c;记录在fsImage文件里 过程&#xff0c;记录在Edits文件里 同时fsImageEdits最终结果&#xff0c;这个最终结果&#xff08;fsImageEdits&#xff09;会保存一份在内存中&#xff0c;为了提升性能…