添加常用工具

添加在CodeSnipMini中常用的工具

tailwind-merge

1

Step 1: 安装插件

npm i clsx tailwind-merge
2

Step 2: 添加函数

/utils/index.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

react-spring

1

Step 1: 安装插件

npm i @react-spring/web
2

Step 2: 添加Animation组件

/components/animation.ts
import { animated } from '@react-spring/web';
import { Label, Text, View } from '@tarojs/components';

export const AnimationView = animated(View);
export const AnimationText = animated(Text);
export const AnimationLabel = animated(Label);

注意:

如果想直接使用形如<animated.div/>的元素，你必须安装 @tarojs/plugin-html Taro插件

查看官网

工具函数

/utils/index.ts
import { getWindowInfo } from '@tarojs/taro';

// 根据设计稿尺寸计算px
export const pt = (num: number) => {
  const { screenWidth } = getWindowInfo();
  return num * (screenWidth / 375);
};