Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 支持运行时转换 #17

Closed
bigmeow opened this issue Dec 14, 2023 · 3 comments
Closed

feat: 支持运行时转换 #17

bigmeow opened this issue Dec 14, 2023 · 3 comments

Comments

@bigmeow
Copy link

bigmeow commented Dec 14, 2023

暴露一个运行时函数,可以进行运行时的代码转换:

transform("750px") ==>  输出100vw

这样行内样式我们可以自己处理(一般行内样式都是用于动态的逻辑处理):

import { transform } from "xxxx";

function A () {
  //宽高比
  const rate = 2;
  return <img src="xxx" width={transform(750)}  height={transform(750/rate)} />
}
@bigmeow
Copy link
Author

bigmeow commented Dec 14, 2023

#5

@wswmsword
Copy link
Owner

wswmsword commented Dec 14, 2023

好的,谢谢建议,这个估计得新开个项目,这个项目里硬编码的一些用来判断属性符不符合转换条件的代码就可以去掉了

@wswmsword
Copy link
Owner

我刚刚发布了 scale-view,可以进行动态行内转换:

// home.js
import { init } from "scale-view";
init(750, 600); // 初始化,750 作为设计稿宽度,600 作为实际最大宽度
// ComponentA.js
import { clampVw } from "scale-view";
// 传入动态宽高比 rate
function A ({ rate }) {
  return <img src="xxx" width={clampVw(750)}  height={clampVw(750 / rate)} />
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants