分享一个金额展示组件的升级版

• 抖音：https://v.douyin.com/kCh1QRW/

• B站：https://www.bilibili.com/video/BV1914y1T7iV/

demo预览：

https://sunzsh.github.io/vue-demos/#/xs-money

代码：

https://github.com/sunzsh/vue-el-demo/blob/master/src/views/xs-money.vue

https://github.com/sunzsh/vue-el-demo/blob/master/src/components/money.vue

之前这期视频给大家分享过

用这种方法去格式化金钱啊

但是呢

我发现他还是有一些不好用的地方

比如说：因为这是一个完整的自助串

所以如果我想让这个人民币的符号

比正常的

后边字体小一点的话

他就不太好处理

第二个就是我复制的时候

他总是带有逗号

还需要手动删掉

所以呢今天给大家推荐另一个方法哈

也是我封装的一个组件

就是这个

money然后写一个:value=price

我把这个注释掉

大家看他默认这个符号就会小一点

然后后边的数字呢

单击就可以全部选中了

这时候复制它是带有逗号的

但是我双击一下大家看逗号就没了

这时候再复制（粘贴）它就可以了

这个我们也可以通过属性来控制

这里边我封装了很多属性

比如说这个人民币符号

默认是不可以选中的

然后是否显示货币符号

然后货币符号可以指自己指定

包括小数点的精度

然后其他属性我就不挨个讲了

大家一看就明白

这个组件呢

我还是会放到这个vue-demo里

只是呢大家如果用的话

需要自己装一下这个currency的插件

这个插件呢上回我也提到过

就是这个特别轻量的1.14KB

然后它除了格式化的功能

它还提供了一些运算功能

可以避免这种小数点的精度问题