refactor: price优化

src/packages/price/demo.vue

@@ -4,7 +4,7 @@
     <nut-cell>
       <nut-price :price="1010" :need-symbol="false" :thousands="true" />
     </nut-cell>
-    <h2>无人民币符号，有千位分隔</h2>
+    <h2>有人民币符号，无千位分隔</h2>
     <nut-cell>
       <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
     </nut-cell>

src/packages/price/doc.md

@@ -22,17 +22,17 @@ app.use(Price);
 ``` html
 <nut-price 
     :price="1010" 
-    :needSymbol="false" 
+    :need-symbol="false" 
     :thousands="true"
 />
 ```
 
-### 无人民币符号，有千位分隔
+### 有人民币符号，无千位分隔
 
 ``` html
 <nut-price  
     :price="10010.01" 
-    :needSymbol="true" 
+    :need-symbol="true" 
     :thousands="false"
 />
 ```
@@ -42,8 +42,8 @@ app.use(Price);
 ``` html
 <nut-price  
     :price="15213.122" 
-    :decimalDigits="3" 
-    :needSymbol="true" 
+    :decimal-digits="3" 
+    :need-symbol="true" 
     :thousands="true"
 />
 ```

src/packages/price/index.scss

@@ -1,14 +1,14 @@
 .nut-price {
-  font-size: 16px;
+  font-size: $font-size-3;
   display: inline;
-  color: #fa2c19;
+  color: $primary-color;
   .price-symbol {
-    font-size: 18px;
+    font-size: $font-size-4;
   }
   .price-big {
-    font-size: 24px;
+    font-size: $price-big-size;
   }
   .price-small {
-    font-size: 18px;
+    font-size: $font-size-4;
   }
 }

src/packages/price/index.vue

@@ -3,28 +3,24 @@
 </template>
 
 <script lang="ts">
-import { toRefs, computed } from 'vue';
+import { computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('price');
 
 export default create({
   props: {
-    // 价格
     price: {
       type: [Number, String],
       default: 0
     },
-    // 符号
     needSymbol: {
       type: Boolean,
       default: true
     },
-    // 小数点位数
     decimalDigits: {
       type: Number,
       default: 2
     },
-    // 是否按照千分号形式显示
     thousands: {
       type: Boolean,
       default: false
@@ -32,74 +28,57 @@ export default create({
   },
   components: {},
   setup(props) {
-    // setup内部只能访问这4个属性，值得注意的是props必须在上面声明才能在这里取到
-    // console.log('props', props, 'slots', slots);
-    const { price, needSymbol, decimalDigits, thousands } = toRefs(props);
-    console.log('decimalDigits', decimalDigits.value);
-    //判断是否为小数点
+    const priceShow = computed(() => {
+      const symbol = props.needSymbol
+        ? '<view class="price-symbol">￥</view>'
+        : '';
+      return symbol + formatToHump(props.price);
+    });
+    const classes = computed(() => {
+      return {
+        [componentName]: true
+      };
+    });
+
     const checkPoint = (price: string | number) => {
       return String(price).indexOf('.') > 0;
     };
-    //千分位显示
     const formatThousands = (num: string | number) => {
-      if (thousands.value) {
+      if (props.thousands) {
         return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
       } else {
         return num;
       }
     };
-    //根据小数位数格式化小数部分
     const formatDecimal = (decimalNum: string | number) => {
-      // const decimalDigitsNum = decimalDigits.value;
-      const result = '0.' + String(decimalNum);
-      const resultFixed = Number(result).toFixed(decimalDigits.value);
-      console.log('44', String(resultFixed));
+      const result = '0.' + decimalNum;
+      const resultFixed = Number(result).toFixed(props.decimalDigits);
       return String(resultFixed).substring(2, resultFixed.length);
     };
-    //将数字转换成驼峰形式
+
+    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>`;
+    };
+
     const formatToHump = (price: string | number) => {
-      // price = String(price).replace('￥', '');
+      if (Number(price) == 0) {
+        return [0];
+      }
       if (checkPoint(price)) {
-        // console.log('price', price)
-        price = Number(price).toFixed(decimalDigits.value);
-        if (Number(price) == 0) {
-          price = 0;
-          return [0];
-        }
-        const priceArray = price.split('.');
-        console.log('num1', priceArray);
-        return (
-          '<view class="price-big">' +
-          formatThousands(priceArray[0]) +
-          '</view><view class="price-point">.</view><view class="price-small">' +
-          formatDecimal(priceArray[1]) +
-          '</view>'
-        );
+        price = Number(price).toFixed(props.decimalDigits);
+        return renderPrice(price.split('.'));
       } else {
-        return (
-          '<view class="price-big">' +
-          formatThousands(price) +
-          '</view><view class="price-point">.</view><view class="price-small">' +
-          formatDecimal(0) +
-          '</view>'
-        );
+        return renderPrice(price.toString());
       }
     };
-    const priceShow = computed(() => {
-      const symbol = needSymbol ? '<view class="price-symbol">￥</view>' : '';
-      return symbol + formatToHump(price.value);
-    });
-    const classes = computed(() => {
-      return {
-        [componentName]: true
-      };
-    });
     return {
       priceShow,
-      checkPoint,
-      formatThousands,
-      formatDecimal,
-      formatToHump,
       classes
     };
   }

src/sites/doc/components/Search.vue

@@ -9,7 +9,7 @@
       @blur="onblur"
       @keyup="choseList"
     />
-    <ul class="search-list" v-if="data.searchList.length > 0">
+    <ul class="search-list" v-show="data.searchList.length > 0">
       <li
         :class="data.searchCurName == item.name ? 'cur' : ''"
         @click="checklist(item)"
@@ -169,8 +169,15 @@ export default defineComponent({
     }
   }
   .cur {
-    background: #6096ff;
+    background: #fa2c19;
     color: #fff;
+    &:hover {
+      color: #fff;
+      font-weight: bold;
+      a {
+        color: #fff;
+      }
+    }
     a {
       color: #fff;
     }

src/styles/variables.scss

@@ -129,6 +129,9 @@ $shortpsd-border-color: #ddd;
 $shortpsd-error: rgba(242, 39, 12, 1);
 $shortpsd-forget: rgba(128, 128, 128, 1);
 
+//price
+$price-big-size: 24px;
+
 // calendar
 $calendar-primary-color: $primary-color;
 $calendar-choose-color: #fef6f6;