u--text-price.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <view class="u-text-price-wrap">
  3. <uvText
  4. class="u-text-price-item"
  5. v-for="(item,index) in textArray"
  6. :key="index"
  7. :text="item"
  8. :size="(index === 1 && integerSize) ? integerSize : size"
  9. :color="color"
  10. >
  11. </uvText>
  12. </view>
  13. </template>
  14. <script>
  15. /**
  16. * 此组件存在只为简单的显示特定样式的价格数字
  17. */
  18. import uvText from "../u-text/u-text.vue";
  19. import props from "../u-text/props.js";
  20. export default {
  21. name: "u--text-price",
  22. mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
  23. components: {
  24. uvText,
  25. },
  26. props: {
  27. //整形部分字体大小可单独定义
  28. integerSize: {
  29. type: [String, Number],
  30. default: uni.$u.props.text.size
  31. }
  32. },
  33. computed: {
  34. textArray() {
  35. let array = ['¥'];
  36. if (!/^\d+(\.\d+)?$/.test(this.text)) {
  37. uni.$u.error('组件<u--text-price :text="???" 此处参数应为金额数字');
  38. } else {
  39. let arr = parseFloat(this.text).toFixed(2).split('.');
  40. array.push(arr[0]);
  41. array.push('.' + arr[1]);
  42. }
  43. return array;
  44. }
  45. }
  46. };
  47. </script>
  48. <style>
  49. .u-text-price-wrap {
  50. display: flex;
  51. flex-direction: row;
  52. justify-content: left;
  53. }
  54. .u-text-price-item{
  55. flex: 0;
  56. }
  57. </style>