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'
};