Browse Source

fix: price、input、addresslist问题 (#2063)

* feat: addresslist 合并代码

* feat: 优化addresslist代码

* feat: price文档demo/input taro问题
ailululu 2 years ago
parent
commit
fdeb12209e

+ 73 - 27
src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -1,14 +1,6 @@
 <template>
-  <div class="nut-addresslist-general">
-    <item-contents
-      :item="item"
-      @delIcon="delShellClick"
-      @editIcon="editShellClick"
-      @itemClick="itemShellClick"
-      @touchstart="holddownstart"
-      @touchend="holddownend"
-      @touchmove="holddownmove"
-    >
+  <div class="nut-addresslist-general" v-if="!swipeEdition">
+    <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template v-slot:contentTop>
         <slot name="contentInfo"></slot>
       </template>
@@ -18,7 +10,7 @@
       <template v-slot:contentAddr>
         <slot name="contentAddrs"></slot>
       </template>
-    </item-contents>
+    </component>
     <div class="nut-addresslist-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
       <slot name="longpressAll">
         <div class="nut-addresslist-general__mask-copy" @click="copyCLick">
@@ -27,16 +19,36 @@
         <div class="nut-addresslist-general__mask-set" @click="setDefault">
           <div class="nut-addresslist-mask-contain"> 设置<br />默认 </div>
         </div>
-        <div class="nut-addresslist-general__mask-del" @click="delClick">
+        <div class="nut-addresslist-general__mask-del" @click="delLongClick">
           <div class="nut-addresslist-mask-contain"> 删除<br />地址 </div>
         </div>
       </slot>
     </div>
     <div class="nut-addresslist__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
   </div>
+  <nut-swipe v-else>
+    <div class="nut-addresslist-swipe">
+      <component :is="renderCompontent()" @touchmove="swipemove" @touchstart="swipestart">
+        <template v-slot:contentTop>
+          <slot name="contentInfo"></slot>
+        </template>
+        <template v-slot:contentIcon>
+          <slot name="contentIcons"></slot>
+        </template>
+        <template v-slot:contentAddr>
+          <slot name="contentAddrs"></slot>
+        </template>
+      </component>
+    </div>
+    <template #right>
+      <slot name="swiperightbtn">
+        <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
+      </slot>
+    </template>
+  </nut-swipe>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
+import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('addresslist-general');
 import ItemContents from './ItemContents.vue';
@@ -50,29 +62,53 @@ export default create({
     longPress: {
       type: Boolean,
       default: false
+    },
+    swipeEdition: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel'],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
   components: {
     ItemContents
   },
 
   setup(props, { emit }) {
+    const renderCompontent = () => {
+      return h(ItemContents, {
+        item: props.item,
+        onDelIcon(event: Event) {
+          delClick(event);
+        },
+        onEditIcon(event: Event) {
+          editClick(event);
+        },
+        onItemClick(event: Event) {
+          itemClick(event);
+        }
+      });
+    };
     let loop: any = null;
+    const moveRef = ref(false);
     const showMaskRef = ref(false);
 
-    const delShellClick = (event: Event) => {
+    const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();
     };
-    const editShellClick = (event: Event) => {
+    const editClick = (event: Event) => {
       emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const itemShellClick = (event: Event) => {
+    const itemClick = (event: Event) => {
+      if (moveRef.value) return;
       emit('itemClick', event, props.item);
       event.stopPropagation();
     };
+    const delLongClick = (event: Event) => {
+      emit('longDel', event, props.item);
+      event.stopPropagation();
+    };
     const holdingFunc = (event: Event) => {
       loop = 0;
       showMaskRef.value = true;
@@ -103,10 +139,6 @@ export default create({
       emit('longSet', event, props.item);
       event.stopPropagation();
     };
-    const delClick = (event: Event) => {
-      emit('longDel', event, props.item);
-      event.stopPropagation();
-    };
     const maskClick = (event: Event) => {
       if (loop != 0) {
         // 排除长按时触发点击的情况
@@ -115,20 +147,34 @@ export default create({
       event.stopPropagation();
       event.preventDefault();
     };
+    const swipeDelClick = (event: Event) => {
+      emit('swipeDel', event, props.item);
+      event.stopPropagation();
+    };
+    const swipestart = () => {
+      moveRef.value = false;
+    };
+    const swipemove = () => {
+      moveRef.value = true;
+    };
 
     return {
-      delShellClick,
-      editShellClick,
-      itemShellClick,
+      renderCompontent,
+      showMaskRef,
+      itemClick,
+      editClick,
+      delClick,
+      delLongClick,
       holddownstart,
       holddownmove,
       holddownend,
-      showMaskRef,
-      delClick,
       copyCLick,
       hideMaskClick,
       setDefault,
-      maskClick
+      maskClick,
+      swipeDelClick,
+      swipestart,
+      swipemove
     };
   }
 });

+ 0 - 85
src/packages/__VUE/addresslist/components/SwipeShell.vue

@@ -1,85 +0,0 @@
-<template>
-  <nut-swipe>
-    <div class="nut-addresslist-swipe">
-      <item-contents
-        :item="item"
-        @delIcon="delClick"
-        @editIcon="editClick"
-        @itemClick="itemClick"
-        @touchmove="swipemove"
-        @touchstart="swipestart"
-      >
-        <template v-slot:contentTop>
-          <slot name="contentInfo"></slot>
-        </template>
-        <template v-slot:contentIcon>
-          <slot name="contentIcons"></slot>
-        </template>
-        <template v-slot:contentAddr>
-          <slot name="contentAddrs"></slot>
-        </template>
-      </item-contents>
-    </div>
-    <template #right>
-      <slot name="swiperightbtn">
-        <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
-      </slot>
-    </template>
-  </nut-swipe>
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('addresslist-swipe');
-import ItemContents from './ItemContents.vue';
-
-export default create({
-  props: {
-    item: {
-      type: Object,
-      default: {}
-    }
-  },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'swipeDel'],
-  components: {
-    ItemContents
-  },
-
-  setup(props, { emit }) {
-    const moveRef = ref(false);
-    const delClick = (event: Event) => {
-      emit('delIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const editClick = (event: Event) => {
-      emit('editIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const itemClick = (event: Event) => {
-      if (moveRef.value) return;
-      emit('itemClick', event, props.item);
-      event.stopPropagation();
-    };
-    const swipeDelClick = (event: Event) => {
-      emit('swipeDel', event, props.item);
-      event.stopPropagation();
-    };
-
-    const swipestart = () => {
-      moveRef.value = false;
-    };
-    const swipemove = () => {
-      moveRef.value = true;
-    };
-
-    return {
-      delClick,
-      editClick,
-      itemClick,
-      swipeDelClick,
-      swipestart,
-      swipemove
-    };
-  }
-});
-</script>

+ 1 - 1
src/packages/__VUE/addresslist/demo.vue

@@ -24,7 +24,7 @@
       :dataMapOptions="dataMapOptions"
     >
     </nut-addresslist>
-    <h2>{{ translate('title1') }}</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-addresslist
       :data="data"
       swipeEdition

+ 30 - 54
src/packages/__VUE/addresslist/index.taro.vue

@@ -1,57 +1,35 @@
 <template>
   <div :class="classes">
-    <template v-if="!swipeEdition">
-      <general-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        :longPress="longPress"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-        @longCopy="clickLongCopy"
-        @longSet="clickLongSet"
-        @longDel="clickLongDel"
-      >
-        <template v-slot:contentInfo v-if="longPress">
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons v-if="longPress">
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs v-if="longPress">
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:longpressAll v-if="longPress">
-          <slot name="longpressbtns"></slot>
-        </template>
-      </general-shell>
-    </template>
-    <template v-if="swipeEdition">
-      <swipe-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-      >
-        <template v-slot:contentInfo>
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons>
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs>
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:swiperightbtn>
-          <slot name="swiperight"></slot>
-        </template>
-      </swipe-shell>
-    </template>
+    <general-shell
+      v-for="(item, index) of dataArray"
+      :key="index"
+      :item="item"
+      :longPress="longPress"
+      :swipeEdition="swipeEdition"
+      @delIcon="clickDelIcon"
+      @editIcon="clickEditIcon"
+      @itemClick="clickContentItem"
+      @swipeDel="clickSwipeDel"
+      @longCopy="clickLongCopy"
+      @longSet="clickLongSet"
+      @longDel="clickLongDel"
+    >
+      <template v-slot:contentInfo>
+        <slot name="iteminfos"></slot>
+      </template>
+      <template v-slot:contentIcons>
+        <slot name="itemicon"></slot>
+      </template>
+      <template v-slot:contentAddrs>
+        <slot name="itemaddr"></slot>
+      </template>
+      <template v-slot:longpressAll v-if="longPress">
+        <slot name="longpressbtns"></slot>
+      </template>
+      <template v-slot:swiperightbtn v-if="swipeEdition">
+        <slot name="swiperight"></slot>
+      </template>
+    </general-shell>
     <div class="nut-addresslist__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
@@ -61,7 +39,6 @@
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('addresslist');
-import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 export default create({
@@ -88,7 +65,6 @@ export default create({
     }
   },
   components: {
-    SwipeShell,
     GeneralShell
   },
   emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],

+ 30 - 54
src/packages/__VUE/addresslist/index.vue

@@ -1,57 +1,35 @@
 <template>
   <div :class="classes">
-    <template v-if="!swipeEdition">
-      <general-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        :longPress="longPress"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-        @longCopy="clickLongCopy"
-        @longSet="clickLongSet"
-        @longDel="clickLongDel"
-      >
-        <template v-slot:contentInfo v-if="longPress">
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons v-if="longPress">
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs v-if="longPress">
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:longpressAll v-if="longPress">
-          <slot name="longpressbtns"></slot>
-        </template>
-      </general-shell>
-    </template>
-    <template v-if="swipeEdition">
-      <swipe-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-      >
-        <template v-slot:contentInfo>
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons>
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs>
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:swiperightbtn>
-          <slot name="swiperight"></slot>
-        </template>
-      </swipe-shell>
-    </template>
+    <general-shell
+      v-for="(item, index) of dataArray"
+      :key="index"
+      :item="item"
+      :longPress="longPress"
+      :swipeEdition="swipeEdition"
+      @delIcon="clickDelIcon"
+      @editIcon="clickEditIcon"
+      @itemClick="clickContentItem"
+      @swipeDel="clickSwipeDel"
+      @longCopy="clickLongCopy"
+      @longSet="clickLongSet"
+      @longDel="clickLongDel"
+    >
+      <template v-slot:contentInfo>
+        <slot name="iteminfos"></slot>
+      </template>
+      <template v-slot:contentIcons>
+        <slot name="itemicon"></slot>
+      </template>
+      <template v-slot:contentAddrs>
+        <slot name="itemaddr"></slot>
+      </template>
+      <template v-slot:longpressAll v-if="longPress">
+        <slot name="longpressbtns"></slot>
+      </template>
+      <template v-slot:swiperightbtn v-if="swipeEdition">
+        <slot name="swiperight"></slot>
+      </template>
+    </general-shell>
     <div class="nut-addresslist__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
@@ -61,7 +39,6 @@
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('addresslist');
-import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 export default create({
@@ -88,7 +65,6 @@ export default create({
     }
   },
   components: {
-    SwipeShell,
     GeneralShell
   },
   emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],

+ 28 - 12
src/packages/__VUE/input/index.taro.vue

@@ -28,24 +28,48 @@
       <view class="nut-input-value">
         <view class="nut-input-inner">
           <view class="nut-input-box">
-            <component
-              :is="renderInput(type)"
+            <textarea
+              v-if="type == 'textarea'"
+              class="input-text"
+              ref="inputRef"
+              :style="stylesTextarea"
+              :maxlength="maxLength"
+              :placeholder="placeholder"
+              placeholder-class="nut-placeholder"
+              :disabled="disabled"
+              :readonly="readonly"
+              :value="modelValue"
+              :formatTrigger="formatTrigger"
+              :adjust-position="adjustPosition"
+              :always-system="alwaysSystem"
+              @input="onInput"
+              @focus="onFocus"
+              @blur="onBlur"
+              @click="onClickInput"
+            />
+            <input
+              v-else
               class="input-text"
               ref="inputRef"
               :style="styles"
+              :type="inputType(type)"
               :maxlength="maxLength"
               :placeholder="placeholder"
+              placeholder-class="nut-placeholder"
               :disabled="disabled"
               :readonly="readonly"
               :value="modelValue"
               :formatTrigger="formatTrigger"
+              :confirm-type="confirmType"
+              :adjust-position="adjustPosition"
+              :always-system="alwaysSystem"
               :autofocus="autofocus"
               :enterkeyhint="confirmType"
               @input="onInput"
               @focus="onFocus"
               @blur="onBlur"
               @click="onClickInput"
-            ></component>
+            />
             <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
           </view>
           <view class="nut-input-clear-box">
@@ -84,7 +108,7 @@
   </view>
 </template>
 <script lang="ts">
-import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes, h } from 'vue';
+import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
 
@@ -262,13 +286,6 @@ export default create({
     const inputRef = ref();
     const getModelValue = () => String(props.modelValue ?? '');
 
-    const renderInput = (type: InputType) => {
-      return h(type == 'textarea' ? 'textarea' : 'input', {
-        style: type == 'textarea' ? stylesTextarea : styles,
-        type: type != 'textarea' && inputType(type)
-      });
-    };
-
     const state = reactive({
       focused: false,
       validateFailed: false, // 校验失败
@@ -425,7 +442,6 @@ export default create({
     });
 
     return {
-      renderInput,
       inputRef,
       active,
       classes,

+ 13 - 13
src/packages/__VUE/price/demo.vue

@@ -2,18 +2,18 @@
   <div class="demo">
     <nut-cell-group :title="translate('title1')">
       <nut-cell>
-        <nut-price :price="0" size="small" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="small" :need-symbol="false" />
       </nut-cell>
       <nut-cell>
-        <nut-price :price="0" size="normal" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="normal" :need-symbol="false" />
       </nut-cell>
       <nut-cell>
-        <nut-price :price="0" size="large" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="large" :need-symbol="false" />
       </nut-cell>
     </nut-cell-group>
     <h2>{{ translate('title2') }}</h2>
     <nut-cell>
-      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="8888" :decimal-digits="0" />
     </nut-cell>
     <h2>{{ translate('titleStrike') }}</h2>
     <nut-cell>
@@ -21,15 +21,15 @@
     </nut-cell>
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
-      <nut-price :price="10010.01" size="normal" :need-symbol="true" :thousands="false" />
+      <nut-price :price="10010.01" symbol="¥" />
     </nut-cell>
     <h2>{{ translate('title4') }}</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+      <nut-price :price="8888.01" position="after" symbol="元" />
     </nut-cell>
     <h2>{{ translate('title5') }}</h2>
     <nut-cell>
-      <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
     </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell>
@@ -49,18 +49,18 @@ const initTranslate = () =>
       title1: '支持三种尺寸:small、normal、large',
       title2: '不保留小数',
       titleStrike: '划线价',
-      title3: '有人民币符号,无千位分隔',
-      title4: '有人民币符号,有千位分隔,保留小数点后三位',
-      title5: '调整 symbol 符号位置',
+      title3: '货币符号',
+      title4: '货币符号位置',
+      title5: '千位分隔',
       title6: '异步随机变更'
     },
     'en-US': {
       title1: 'Support three sizes:small、normal、large',
       title2: 'No decimals',
       titleStrike: 'Strike Through',
-      title3: 'With RMB symbol, no thousands separator',
-      title4: 'With RMB symbol, separated by thousands, keep three decimal places',
-      title5: 'Adjust the symbol position',
+      title3: 'Currency symbol',
+      title4: 'Currency symbol position',
+      title5: 'Separated by thousands',
       title6: 'Asynchronous random changes'
     }
   });

+ 23 - 13
src/packages/__VUE/price/doc.en-US.md

@@ -19,27 +19,31 @@ app.use(Price);
 ```
 
 
-### Support three sizes:small、normal、large
+### Price size
+
+Three sizes are supported: small, normal, and large, and the default is large.
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="0" size="small" :need-symbol="false" :thousands="true" />
-    <nut-price :price="0" size="normal" :need-symbol="false" :thousands="true" />
-    <nut-price :price="0" size="large" :need-symbol="false" :thousands="true" />
+    <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>
 ```
 
 :::
 
-### No decimals
+### Decimals places
+
+`decimal-digits` can set the number of decimal places, and 2 decimal places are displayed by default.
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+    <nut-price :price="8888" :decimal-digits="0" />
 </template>
 ```
 
@@ -56,36 +60,42 @@ app.use(Price);
 
 :::
 
-### With RMB symbol, no thousands separator
+### Currency symbol
+
+`symbol` can set the currency symbol, the default is `¥`.
 
 :::demo
 
 ``` html
 
 <template>
-    <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+    <nut-price :price="10010.01" symbol="¥" />
 </template>
 ```
 :::
-### With RMB symbol, separated by thousands, keep three decimal places
+### Currency symbol position
+
+`position` can adjust the currency symbol position.
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+    <nut-price :price="8888.01" position="after" symbol="元" />
 </template>
 ```
 
 :::
 
-### Adjust the symbol position
+### Thousands separator
+
+`thousands` can be displayed as thousands.
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+    <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
 </template>
 ```
 
@@ -127,5 +137,5 @@ app.use(Price);
 | decimal-digits | Decimal digits                                             | Number | String | 2      |
 | thousands      | Thousands separation                                       | Boolean          | false  |
 | position       | The symbol appear before or after the price,`before`、`after` | String           | before |
-| size           | Size,`large`、`normal`、`small`                            | String           | large |
+| size           | Size,`small`、`normal`、`large`                            | String           | large |
 | strike-through`v3.3.1`          | strike-through    | Boolean           | false |

+ 23 - 13
src/packages/__VUE/price/doc.md

@@ -19,27 +19,31 @@ app.use(Price);
 ```
 
 
-### 基础用法 small normal large
+### 价格大小
+
+支持 small、normal、large 三种尺寸,默认为 large。
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="0" size="small" :need-symbol="false" :thousands="true" />
-    <nut-price :price="0" size="normal" :need-symbol="false" :thousands="true" />
-    <nut-price :price="0" size="large" :need-symbol="false" :thousands="true" />
+    <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>
 ```
 
 :::
 
-### 不保留小数
+### 小数点位数
+
+`decimal-digits` 可设置小数点位数,默认展示2位小数。
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+    <nut-price :price="8888" :decimal-digits="0" />
 </template>
 ```
 
@@ -58,36 +62,42 @@ app.use(Price);
 
 :::
 
-### 有人民币符号,无千位分隔
+### 货币符号
+
+`symbol` 可设置货币符号,默认为 `¥`。
 
 :::demo
 
 ``` html
 
 <template>
-    <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+    <nut-price :price="10010.01" symbol="¥" />
 </template>
 ```
 :::
-### 带人民币符号,有千位分隔,保留小数点后三位
+### 货币符号位置
+
+`position` 可以调整货币符号位置。
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+    <nut-price :price="8888.01" position="after" symbol="元" />
 </template>
 ```
 
 :::
 
-### 调整 symbol 符号位置
+### 千位分隔
+
+`thousands` 可以按照千分号形式显示。
 
 :::demo
 
 ``` html
 <template>
-    <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+    <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
 </template>
 ```
 
@@ -129,5 +139,5 @@ app.use(Price);
 | decimal-digits | 小数位位数                              | Number | String  | 2     |
 | thousands      | 是否按照千分号形式显示                    | Boolean          | false  |
 | position       | 符号显示在价格前或者后,`before`、`after`  | String           | before |
-| size           | 价格尺寸,`large`、`normal`、`small`     | String           | large |
+| size           | 价格尺寸,`small`、`normal`、`large`     | String           | large |
 | strike-through`v3.3.1`          | 是否展示划线价    | Boolean           | false |

+ 5 - 5
src/sites/mobile-taro/vue/src/exhibition/pages/price/index.vue

@@ -2,18 +2,18 @@
   <div class="demo">
     <nut-cell-group title="基本用法 small normal large">
       <nut-cell>
-        <nut-price :price="0" size="small" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="small" :need-symbol="false" />
       </nut-cell>
       <nut-cell>
-        <nut-price :price="0" size="normal" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="normal" :need-symbol="false" />
       </nut-cell>
       <nut-cell>
-        <nut-price :price="0" size="large" :need-symbol="true" :thousands="true" />
+        <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" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="8888" :decimal-digits="0" />
     </nut-cell>
     <h2>划线价</h2>
     <nut-cell>
@@ -21,7 +21,7 @@
     </nut-cell>
     <h2>调整 symbol 符号位置</h2>
     <nut-cell>
-      <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="10010.01" symbol="¥" />
     </nut-cell>
     <h2>有人民币符号,无千位分隔</h2>
     <nut-cell>