chore(price): optimize (#2437)

* chore(price): optimize * test: update
jdf2e · Jul 18, 2023 · 349b108 · 349b108
1 parent a84f925
commit 349b108
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 111 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/price/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/price/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo" :class="{ web: env === 'WEB' }">
-    <Header v-if="env === 'WEB'" />
+    <DocHeader />
     <nut-cell-group title="支持三种尺寸：small、normal、large">
       <nut-cell>
         <nut-price :price="0" size="small" :need-symbol="false" />
@@ -18,7 +18,7 @@
     </nut-cell>
     <h2>划线价</h2>
     <nut-cell>
-      <nut-price :price="8888" decimal-digits="0" size="normal" need-symbol thousands strike-through />
+      <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
     </nut-cell>
     <h2>货币符号</h2>
     <nut-cell>
@@ -30,32 +30,18 @@
     </nut-cell>
     <h2>千位分隔</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+      <nut-price :price="15213.1221" :decimal-digits="3" thousands />
     </nut-cell>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
-import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const price = ref(0);
-    setInterval(() => {
-      price.value = Math.random() * 10000000;
-      // console.log('price.value1', price.value)
-    }, 1000);
-    return {
-      price,
-      env
-    };
-  }
-};
+import DocHeader from '../../../components/header.vue';
+const env = Taro.getEnv();
+const price = ref(0);
+setInterval(() => {
+  price.value = Math.random() * 10000000;
+}, 1000);
 </script>
-
-<style lang="scss"></style>
diff --git a/src/packages/__VUE/price/__tests__/price.spec.ts b/src/packages/__VUE/price/__tests__/price.spec.ts
@@ -1,11 +1,7 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Price from '../index.vue';
 
-afterAll(() => {
-  config.global.components = {};
-});
-
-test('base price', () => {
+test('Price: base price', () => {
   const wrapper = mount(Price, {
     props: {
       price: '199.99'
@@ -15,7 +11,7 @@ test('base price', () => {
   expect(price.text()).toBe('¥199.99');
 });
 
-test('decimalDigits price', () => {
+test('Price: decimalDigits price', () => {
   const wrapper = mount(Price, {
     props: {
       price: '299.95',
@@ -26,12 +22,12 @@ test('decimalDigits price', () => {
   expect(price.text()).toBe('¥299.9');
 });
 
-test('default needSymbol props', () => {
+test('Price: default needSymbol props', () => {
   const wrapper = mount(Price);
   const price: any = wrapper.find('.nut-price');
   expect(price.find('.nut-price--symbol').text()).toBe('¥');
 });
-test('needSymbol props', () => {
+test('Price: needSymbol props', () => {
   const wrapper = mount(Price, {
     props: {
       needSymbol: false
@@ -40,7 +36,7 @@ test('needSymbol props', () => {
   const price: any = wrapper.find('.nut-price');
   expect(price.find('.nut-price--symbol').exists()).toBe(false);
 });
-test('symbol props', () => {
+test('Price: symbol props', () => {
   const wrapper = mount(Price, {
     props: {
       symbol: '$'
@@ -50,7 +46,7 @@ test('symbol props', () => {
   expect(price.find('.nut-price--symbol').text()).toBe('$');
 });
 
-test('size props', () => {
+test('Price: size props', () => {
   const wrapper = mount(Price, {
     props: {
       size: 'small'

diff --git a/src/packages/__VUE/price/demo.vue b/src/packages/__VUE/price/demo.vue
@@ -17,7 +17,7 @@
     </nut-cell>
     <h2>{{ translate('titleStrike') }}</h2>
     <nut-cell>
-      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
+      <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
     </nut-cell>
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
@@ -29,13 +29,12 @@
     </nut-cell>
     <h2>{{ translate('title5') }}</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+      <nut-price :price="15213.1221" :decimal-digits="3" thousands />
     </nut-cell>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('price');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -60,14 +59,5 @@ const initTranslate = () =>
       symbol: 'RMB'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    return {
-      translate
-    };
-  }
-});
+initTranslate();
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/price/doc.en-US.md b/src/packages/__VUE/price/doc.en-US.md
@@ -6,7 +6,7 @@ It is used to apply different styles to the parts before and after the decimal p
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Price } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="0" size="small" :need-symbol="false" />
   <nut-price :price="0" size="normal" :need-symbol="false" />
@@ -36,7 +36,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" :decimal-digits="0" />
 </template>
@@ -48,7 +48,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
 </template>
@@ -62,7 +62,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="10010.01" symbol="¥" />
 </template>
@@ -76,7 +76,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888.01" position="after" symbol="RMB" />
 </template>
@@ -90,9 +90,9 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
 </template>
 ```
 

diff --git a/src/packages/__VUE/price/doc.md b/src/packages/__VUE/price/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Price } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="0" size="small" :need-symbol="false" />
   <nut-price :price="0" size="normal" :need-symbol="false" />
@@ -36,7 +36,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" :decimal-digits="0" />
 </template>
@@ -48,16 +48,9 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price
-    :price="8888"
-    decimal-digits="0"
-    size="normal"
-    :need-symbol="true"
-    :thousands="true"
-    :strike-through="true"
-  />
+  <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
 </template>
 ```
 
@@ -69,7 +62,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="10010.01" symbol="¥" />
 </template>
@@ -83,7 +76,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888.01" position="after" symbol="元" />
 </template>
@@ -97,16 +90,14 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
 </template>
 ```
 
 :::
 
-:::
-
 ## API
 
 ### Props

diff --git a/src/packages/__VUE/price/doc.taro.md b/src/packages/__VUE/price/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Price } from '@nutui/nutui-taro';
 
@@ -20,7 +20,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="0" size="small" :need-symbol="false" />
   <nut-price :price="0" size="normal" :need-symbol="false" />
@@ -36,7 +36,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" :decimal-digits="0" />
 </template>
@@ -48,9 +48,9 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="8888" decimal-digits="0" size="normal" need-symbol thousands strike-through />
+  <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
 </template>
 ```
 
@@ -62,7 +62,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="10010.01" symbol="¥" />
 </template>
@@ -76,7 +76,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888.01" position="after" symbol="元" />
 </template>
@@ -90,9 +90,9 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
 </template>
 ```
 
@@ -105,7 +105,7 @@ app.use(Price);
 | 参数                   | 说明                                      | 类型             | 默认值   |
 | ---------------------- | ----------------------------------------- | ---------------- | -------- |
 | price                  | 价格数量                                  | number \| string | `0`      |
-| need-symbol            | 是否需要加上 symbol 符号                  | boolean          | `true`   |
+| need-symbol            | 是否需要加上 `symbol` 符号                | boolean          | `true`   |
 | symbol                 | 符号类型                                  | string           | `&yen;`  |
 | decimal-digits         | 小数位位数                                | number           | `2`      |
 | thousands              | 是否按照千分号形式显示                    | boolean          | `false`  |