Price组件总结

[NathanHan1]

需求

对于公司产品的定位是国际化的，所以价格显示方面需要一个方法更改货币符号，除此之外，其他的特性也要做可配置化，因此有了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等流程，还有代码风格，项目结构，用到的技术栈等都有了一定的了解，也是渐渐融入团队。�当然不懂的地方还是很多，大佬们也会细心解答，受益匪浅。

[rock-zhang]

使用transform:scale，�但是这东西缩放是缩放了，但符号是居中，我们要的效果是贴底显示

试试transform-origin: bottom

[NathanHan1]

使用transform:scale， 但是这东西缩放是缩放了，但符号是居中，我们要的效果是贴底显示

试试transform-origin: bottom

试了，感觉效果不太好，跟font-size有点出入，同等比例，scale会缩放更多