'创建鸿蒙应用'

src/components/jx-price/jx-price.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="price-root">
+    <text v-if="isSymbol" class="money">{{ symbol }}</text>
+    <text class="number">{{ money }}</text>
+  </view>
+</template>
+
+<script lang="ts" setup>
+/**
+ * jx-price 组件
+ * @param (symbol)   ¥ 占位符
+ * @param (isSymbol) 是否显示 ¥ 符号 默认显示
+ * @emit (isMoney)   是否格式化
+ * @param (price)    金钱
+ * @param (color)    颜色
+ * @param (size)     大小
+ */
+import { computed } from 'vue'
+
+interface priceType {
+  symbol?: string
+  isSymbol?: boolean
+  isMoney?: boolean
+  price?: number | string
+  color?: string
+  size?: string
+  sizeM?: string
+  sizeN?: string
+}
+const props = withDefaults(defineProps<priceType>(), {
+  symbol: '¥',
+  isSymbol: true,
+  price: '0',
+  isMoney: true,
+  color: '#969696',
+  size: '32rpx',
+  sizeM: '32rpx',
+  sizeN: '32rpx',
+})
+
+const money = computed(() => {
+  if (props.isMoney) {
+    return (+props.price / 100).toFixed(2)
+  } else {
+    return props.price
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.price-root {
+  display: inline-block;
+  color: v-bind(color);
+  font-size: v-bind(size);
+}
+
+.money {
+  font-size: v-bind(sizeM);
+}
+
+.number {
+  font-size: v-bind(sizeN);
+}
+</style>