upd: review price

src/packages/price/demo.vue

@@ -17,14 +17,32 @@
         :thousands="true"
       />
     </nut-cell>
+    <h2>异步随机变更</h2>
+    <nut-cell>
+      <nut-price
+        :price="price"
+        :decimal-digits="3"
+        :need-symbol="true"
+        :thousands="true"
+      />
+    </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
 import { createComponent } from '@/utils/create';
+import { ref } from 'vue';
 const { createDemo } = createComponent('price');
 export default createDemo({
-  props: {}
+  setup() {
+    const price = ref(0);
+    setInterval(() => {
+      price.value = Math.random() * 10000000;
+    }, 1000);
+    return {
+      price
+    };
+  }
 });
 </script>
 

src/packages/price/doc.md

@@ -20,40 +20,43 @@ app.use(Price);
 ### 基本用法
 
 ``` html
-<nut-price 
-    :price="1010" 
-    :need-symbol="false" 
-    :thousands="true"
-/>
+<nut-price :price="1010" :need-symbol="false" :thousands="true" />
 ```
 
 ### 有人民币符号，无千位分隔
 
 ``` html
-<nut-price  
-    :price="10010.01" 
-    :need-symbol="true" 
-    :thousands="false"
-/>
+<nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
 ```
 
 ### 带人民币符号，有千位分隔，保留小数点后三位
 
 ``` html
-<nut-price  
-    :price="15213.122" 
-    :decimal-digits="3" 
-    :need-symbol="true" 
-    :thousands="true"
-/>
+<nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+```
+### 异步随机变更
+
+``` html
+<nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+```
+``` javascript
+setup() {
+    const price = ref(0);
+    setInterval(() => {
+        price.value = Math.random()*10000000;
+    }, 1000);
+    return {
+        price
+    };
+}
 ```
 
 ### Prop
 
-|字段|说明|类型|默认值|
-|--|--|--|--|
-|price|价格数量|Number|0|
-|need-symbol|是否需要加上人民币符号|Boolean|true|
-|symbol|符号类型|String|"$"|
-|decimal-digits|小数位位数|Number|2|
-|thousands|是否按照千分号形式显示|Boolean|false|
+| 字段           | 说明                     | 类型    | 默认值 |
+|----------------|--------------------------|---------|--------|
+| price          | 价格数量                 | Number  | 0      |
+| need-symbol    | 是否需要加上 symbol 符号 | Boolean | true   |
+| symbol         | 符号类型                 | String  | &yen;  |
+| decimal-digits | 小数位位数               | Number  | 2      |
+| thousands      | 是否按照千分号形式显示   | Boolean | false  |

src/packages/price/index.scss

@@ -2,13 +2,17 @@
   font-size: $font-size-3;
   display: inline;
   color: $primary-color;
-  .price-symbol {
-    font-size: $font-size-4;
+  &--symbol {
+    font-size: $font-size-3;
+    margin-right: 4px;
+  }
+  &--big {
+    font-size: $price-big-size;
   }
-  .price-big {
+  &--point {
     font-size: $price-big-size;
   }
-  .price-small {
+  &--small {
     font-size: $font-size-4;
   }
 }

src/packages/price/index.vue

@@ -19,7 +19,7 @@ export default create({
     },
     symbol: {
       type: String,
-      default: '$'
+      default: '¥'
     },
     decimalDigits: {
       type: Number,
@@ -34,7 +34,7 @@ export default create({
   setup(props) {
     const priceShow = computed(() => {
       const symbol = props.needSymbol
-        ? `<view class="price-symbol">${props.symbol}</view>`
+        ? `<view class="${componentName}--symbol">${props.symbol}</view>`
         : '';
       return symbol + formatToHump(props.price);
     });
@@ -61,13 +61,11 @@ export default create({
     };
 
     const renderPrice = (price: string[] | string) => {
-      return `<view class="price-big">
-              ${formatThousands(typeof price === 'string' ? price : price[0])}
-            </view>
-            <view class="price-point">.</view>
-            <view class="price-small">
-              ${formatDecimal(typeof price === 'string' ? 0 : price[1])}
-            </view>`;
+      return `<view class="${componentName}--big">${formatThousands(
+        typeof price === 'string' ? price : price[0]
+      )}</view><view class="${componentName}--point">.</view><view class="${componentName}--small">${formatDecimal(
+        typeof price === 'string' ? 0 : price[1]
+      )}</view>`;
     };
 
     const formatToHump = (price: string | number) => {