Price组件总结
NathanHan1 opened this issue · 2 comments
需求
对于公司产品的定位是国际化的，所以价格显示方面需要一个方法更改货币符号，除此之外，其他的特性也要做可配置化，因此有了Price组件需求。
实现细节
-
符号
符号的话在组件文件里写个保存货币符号的变量，之后给类提供一个静态方法设置货币符号。
这就可以做到初始化组件，符号不用一次次传属性更改了。 -
千分符
千分符之前打算是使用一个原生构造器intl.numberformat来做的，其实这个构造器可以做几乎关于”货币“的一切事情，开始我是直接封装了这个构造器，之后反馈说兼容性太差，的确，我们公司兼容性是以”flex“为基线，而这个构造器在ios只支持10以上。
之后使用正则做，就没这没毛病了。 -
符号缩放
通常符号要比价格要小一些，是为了突出价格，做这个的话，要在符号再包一层<:span>，通过设置font-size:em来缩放，但浏览器能显示的最小字体是12px，用这个font-size做就不好缩小了，后来我想到使用transform:scale，�但是这东西缩放是缩放了，但符号是居中，我们要的效果是贴底显示，最后还是采用font-size方案，至于小于12px,我认为是不存在的，因为浏览器规定最小到12px，肯定有其原因，应该就是小于12px，不利于观看浏览，那基于此，为何需考虑小于12px的呢？如果传入的是12px的价格，那就让符号与价格一样大小，我在饿了么上也是看到有这种情况的。
使用scale还有一些问题，transform是不改变DOM属性，不影响布局，所以占着同样的大小，缩小了会留下空白。 -
符号的类型
比如"￥"和"¥"是不同的，一个偏窄，一个偏宽，分析到窄的在样式上更灵活一些，就使用了窄的 -
是否保留小数点后面的无效的零
例如显示￥12，还可能显示￥12.00，因为项目现在这两钟情况都会用到，所以做了个配置化。
总结
通过做这个组件，让我了解到公司代码的发布测试，灰度，PR等流程，还有代码风格，项目结构，用到的技术栈等都有了一定的了解，也是渐渐融入团队。�当然不懂的地方还是很多，大佬们也会细心解答，受益匪浅。
使用transform:scale，�但是这东西缩放是缩放了，但符号是居中，我们要的效果是贴底显示
试试transform-origin: bottom
使用transform:scale， 但是这东西缩放是缩放了，但符号是居中，我们要的效果是贴底显示
试试
transform-origin: bottom
试了，感觉效果不太好，跟font-size有点出入，同等比例，scale会缩放更多