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

Vue3-CSSProperties代码示例及用法

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

c 复制代码
// 目录 /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
  }
}
c 复制代码
// 目录 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

在多个地方重复使用此样式信息,提高代码的可复用性。

c 复制代码
interface CustomStyles {
  backgroundColor: string;
  color: string;
  fontSize: string;
}

const customStyles: CustomStyles = {
  backgroundColor: 'blue',
  color: 'white',
  fontSize: '16px'
};
相关推荐
Jonathan Star19 分钟前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
果粒chenl1 小时前
React学习(四) --- Redux
javascript·学习·react.js
arvin_xiaoting1 小时前
#zsh# #Ubuntu# 一键安装zsh、oh-my-zsh、常用插件
linux·ubuntu·elasticsearch
Never_Satisfied2 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
ZHOUYUANN3 小时前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发
Asort3 小时前
JavaScript设计模式(十三)——责任链模式:构建灵活高效的请求处理链
前端·javascript·设计模式
摸着石头过河的石头3 小时前
JavaScript继承与原型链:揭开对象传承的神秘面纱
前端·javascript
用户6387994773053 小时前
我把我的 monorepo 迁移到 Bun,这是我的真实反馈
javascript·架构
用户57973883973153 小时前
JavaScript(Node.JS) 使自定义类可以通过下标访问内部可迭代值
javascript
江公望3 小时前
Ubuntu /usr/include/x86_64-linux-gnu目录的作用浅谈
linux·ubuntu