chore(price): split demo (#2756)

packages/nutui-taro-demo/src/exhibition/pages/price/decimal.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="8888" :decimal-digits="0" />
+</template>

packages/nutui-taro-demo/src/exhibition/pages/price/index.vue

@@ -1,43 +1,50 @@
 <template>
   <Demo>
-    <nut-cell-group title="支持三种尺寸：small、normal、large">
-      <nut-cell>
-        <nut-price :price="0" size="small" :need-symbol="false" />
-      </nut-cell>
-      <nut-cell>
-        <nut-price :price="0" size="normal" :need-symbol="false" />
-      </nut-cell>
-      <nut-cell>
-        <nut-price :price="0" size="large" :need-symbol="false" />
-      </nut-cell>
-    </nut-cell-group>
-    <h2>不保留小数</h2>
-    <nut-cell>
-      <nut-price :price="8888" :decimal-digits="0" />
-    </nut-cell>
-    <h2>划线价</h2>
-    <nut-cell>
-      <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
-    </nut-cell>
-    <h2>货币符号</h2>
-    <nut-cell>
-      <nut-price :price="10010.01" symbol="¥" />
-    </nut-cell>
-    <h2>货币符号位置</h2>
-    <nut-cell>
-      <nut-price :price="8888.01" position="after" symbol="元" />
-    </nut-cell>
-    <h2>千位分隔</h2>
-    <nut-cell>
-      <nut-price :price="15213.1221" :decimal-digits="3" thousands />
-    </nut-cell>
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('decimal') }}</h2>
+    <Decimal />
+
+    <h2>{{ t('through') }}</h2>
+    <Through />
+
+    <h2>{{ t('symbol') }}</h2>
+    <Symbol />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('title5') }}</h2>
+    <Thousands />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const price = ref(0);
-setInterval(() => {
-  price.value = Math.random() * 10000000;
-}, 1000);
+import { useTranslate } from '../../../utils';
+import Size from './size.vue';
+import Decimal from './decimal.vue';
+import Through from './through.vue';
+import Symbol from './symbol.vue';
+import Position from './position.vue';
+import Thousands from './thousands.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    size: '尺寸',
+    decimal: '不保留小数',
+    through: '划线价',
+    symbol: '货币符号',
+    position: '货币符号位置',
+    title5: '千位分隔'
+  },
+  'en-US': {
+    size: 'Size',
+    decimal: 'No decimals',
+    through: 'Strike Through',
+    symbol: 'Currency symbol',
+    position: 'Currency symbol position',
+    title5: 'Separated by thousands'
+  }
+});
 </script>

packages/nutui-taro-demo/src/exhibition/pages/price/position.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="8888.01" position="after" symbol="RMB" />
+</template>

packages/nutui-taro-demo/src/exhibition/pages/price/size.vue

@@ -0,0 +1,5 @@
+<template>
+  <nut-price :price="0" size="large" />
+  <nut-price :price="0" size="normal" />
+  <nut-price :price="0" size="small" />
+</template>

packages/nutui-taro-demo/src/exhibition/pages/price/symbol.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="10010.01" symbol="$" />
+</template>

packages/nutui-taro-demo/src/exhibition/pages/price/thousands.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
+</template>

packages/nutui-taro-demo/src/exhibition/pages/price/through.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="8888" :decimal-digits="0" strike-through />
+</template>

src/packages/__VUE/price/demo/decimal.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="8888" :decimal-digits="0" />
+</template>

src/packages/__VUE/price/demo/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('decimal') }}</h2>
+    <Decimal />
+
+    <h2>{{ t('through') }}</h2>
+    <Through />
+
+    <h2>{{ t('symbol') }}</h2>
+    <Symbol />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('title5') }}</h2>
+    <Thousands />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Size from './size.vue';
+import Decimal from './decimal.vue';
+import Through from './through.vue';
+import Symbol from './symbol.vue';
+import Position from './position.vue';
+import Thousands from './thousands.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    size: '尺寸',
+    decimal: '不保留小数',
+    through: '划线价',
+    symbol: '货币符号',
+    position: '货币符号位置',
+    title5: '千位分隔'
+  },
+  'en-US': {
+    size: 'Size',
+    decimal: 'No decimals',
+    through: 'Strike Through',
+    symbol: 'Currency symbol',
+    position: 'Currency symbol position',
+    title5: 'Separated by thousands'
+  }
+});
+</script>

src/packages/__VUE/price/demo/position.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="8888.01" position="after" symbol="RMB" />
+</template>

src/packages/__VUE/price/demo/size.vue

@@ -0,0 +1,5 @@
+<template>
+  <nut-price :price="0" size="large" />
+  <nut-price :price="0" size="normal" />
+  <nut-price :price="0" size="small" />
+</template>

src/packages/__VUE/price/demo/symbol.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="10010.01" symbol="$" />
+</template>

src/packages/__VUE/price/demo/thousands.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
+</template>

src/packages/__VUE/price/demo/through.vue

@@ -0,0 +1,3 @@
+<template>
+  <nut-price :price="8888" :decimal-digits="0" strike-through />
+</template>

src/packages/__VUE/price/doc.en-US.md

@@ -14,89 +14,39 @@ const app = createApp();
 app.use(Price);
 ```
 
-### Price size
+### Size
 
-Three sizes are supported: small, normal, and large, and the default is normal.
+size: `small`, `normal`, `large`
 
-:::demo
-
-```vue
-<template>
-  <nut-price :price="0" size="small" :need-symbol="false" />
-  <nut-price :price="0" size="normal" :need-symbol="false" />
-  <nut-price :price="0" size="large" :need-symbol="false" />
-</template>
-```
-
-:::
+> demo: price size
 
 ### Decimals places
 
 `decimal-digits` can set the number of decimal places, and 2 decimal places are displayed by default.
 
-:::demo
-
-```vue
-<template>
-  <nut-price :price="8888" :decimal-digits="0" />
-</template>
-```
-
-:::
+> demo: price decimal
 
 ### Strike Through
 
-:::demo
-
-```vue
-<template>
-  <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
-</template>
-```
-
-:::
+> demo: price through
 
 ### Currency symbol
 
 `symbol` can set the currency symbol, the default is `¥`.
 
-:::demo
-
-```vue
-<template>
-  <nut-price :price="10010.01" symbol="¥" />
-</template>
-```
-
-:::
+> demo: price symbol
 
 ### Currency symbol position
 
 `position` can adjust the currency symbol position.
 
-:::demo
-
-```vue
-<template>
-  <nut-price :price="8888.01" position="after" symbol="RMB" />
-</template>
-```
-
-:::
+> demo: price position
 
 ### Thousands separator
 
 `thousands` can be displayed as thousands.
 
-:::demo
-
-```vue
-<template>
-  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
-</template>
-```
-
-:::
+> demo: price thousands
 
 ## API