@netang/quasar 0.0.78 → 0.0.80

package/components/img/index.vue

@@ -1,5 +1,10 @@
 <template>
     <q-img
+        class="n-img"
+        :class="{
+            'rounded-borders': rounded,
+            'n-img--round': round,
+        }"
         :src="currentSrc"
         :width="imageProps.width"
         :height="imageProps.height"
@@ -33,7 +38,11 @@
 
     <!-- 如果没有图片 -->
     <div
-        class="q-img"
+        class="q-img n-img"
+        :class="{
+            'rounded-borders': rounded,
+            'n-img--round': round,
+        }"
         v-bind="imageProps"
         v-else
     >
@@ -81,6 +90,10 @@ export default {
         width: [ String, Number ],
         // 高
         height: [ String, Number ],
+        // 是否为圆形
+        round: Boolean,
+        // 是否为圆角
+        rounded: Boolean,
         // 加载旋转器尺寸
         spinnerSize: [ String, Number ],
         // 错误尺寸
@@ -91,7 +104,7 @@ export default {
         // 错误图标大小
         errorIconSize: {
             type: String,
-            default: 'sm',
+            default: 'md',
         },
         // 错误图标
         errorIcon: {
@@ -177,3 +190,13 @@ export default {
     }
 }
 </script>
+
+<style lang="scss">
+.n-img {
+    // 圆形
+    &--round {
+        border-radius: 50%;
+    }
+}
+</style>
+

package/components/price/index.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="n-price">
+        <!-- 价格符号 -->
+        <span v-if="sign" :style="signStyle">{{sign}}</span>
+        <!-- 价格 -->
+        <span :style="priceStyle">{{currentPrice.main}}</span>
+        <!-- 价格后缀 -->
+        <span :style="signStyle" v-if="currentPrice.odd">{{currentPrice.odd}}</span>
+        <!-- 删除价格 -->
+        <span class="n-price__del" :style="[
+            signBaseStyle,
+            {
+                marginLeft: toPx(delPriceMarginLeft),
+                color: delPriceColor,
+            }
+        ]" v-if="delPrice && delPrice > price">{{sign}}{{getPrice(delPrice)}}</span>
+    </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+
+import $n_px from '@netang/utils/px'
+import $n_split from '@netang/utils/split'
+
+import $n_price from '../../utils/price'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NPrice',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 颜色
+        color: {
+            type: String,
+            default: '#ff3750',
+        },
+        // 删除价格颜色
+        delPriceColor: {
+            type: String,
+            default: '#999999',
+        },
+        // 价格符号
+        sign: {
+            type: [ String, Boolean ],
+            default: '¥'
+        },
+        // 价格符号大小
+        signSize: {
+            type: Number,
+            default: 12,
+        },
+        // 价格符号是否加粗
+        signBold: {
+            type: Boolean,
+            default: true,
+        },
+        // 价格
+        price: [ String, Number ],
+        // 最高价格
+        maxPrice: [ String, Number ],
+        // 删除价格
+        delPrice: [ String, Number ],
+        // 删除价格左边距
+        delPriceMarginLeft: {
+            type: [ String, Number ],
+            default: 8,
+        },
+        // 价格符号大小
+        priceSize: {
+            type: Number,
+            default: 16,
+        },
+        // 价格是否加粗
+        priceBold: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【计算属性】==========================================================================================
+
+        /**
+         * 当前价格
+         */
+        const currentPrice = computed(function () {
+
+            const price = $n_price(props.price)
+            const arr = $n_split(String(price), '.')
+
+            return {
+                main: arr[0],
+                odd: arr.length > 1 ? '.' + arr[1] : ''
+            }
+        })
+
+        /**
+         * 价格符号基础样式
+         */
+        const signBaseStyle = computed(function () {
+            return {
+                fontSize: $n_px(props.signSize),
+                marginBottom: $n_px((props.priceSize - props.signSize) * 0.5 / 2),
+            }
+        })
+
+        /**
+         * 价格符号样式
+         */
+        const signStyle = computed(function () {
+
+            const style = {
+                color: props.color,
+            }
+
+            if (props.signBold) {
+                style.fontWeight = 'bold'
+            }
+
+            return [
+                style,
+                signBaseStyle.value,
+            ]
+        })
+
+        /**
+         * 价格样式
+         */
+        const priceStyle = computed(function () {
+
+            const style = {
+                color: props.color,
+                fontSize: $n_px(props.priceSize),
+            }
+
+            if (props.priceBold) {
+                style.fontWeight = 'bold'
+            }
+
+            return style
+        })
+
+        // ==========【方法】=============================================================================================
+
+        return {
+            // 当前价格
+            currentPrice,
+            // 价格符号基础样式
+            signBaseStyle,
+            // 价格符号样式
+            signStyle,
+            // 价格样式
+            priceStyle,
+
+            // 转为像素
+            toPx: $n_px,
+            // 获取价格
+            getPrice: $n_price
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+
+.n-price {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+
+    // 删除价格
+    &__del {
+       text-decoration: line-through;
+   }
+}
+
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/sass/common.scss

@@ -41,12 +41,12 @@ body {
 
 // 自动显示横向滚动条
 .n-overflow-auto-x {
-    overflow-x: auto;
+    overflow-x: auto !important;
 }
 
 // 自动显示竖向滚动条
 .n-overflow-auto-y {
-    overflow-y: auto;
+    overflow-y: auto !important;
 }
 
 // 字体大小 12 像素

package/utils/config.js

@@ -1,7 +1,6 @@
 import $n_get from 'lodash/get'
 import $n_merge from 'lodash/merge'
 
-
 // 用户配置 参数
 // userConfig: {
 //     // api 请求公共数据地址

package/utils/price.js

@@ -1,22 +1,18 @@
 import $n_decimal from '@netang/utils/decimal'
 
-import { configs } from './config'
-
-const {
-    // 是否开启人民币分转元
-    priceCentToYuan,
-} = configs
+import $n_config from './config'
 
 /**
  * 换算金额
  */
 export default function price(value, params) {
+
     return $n_decimal(value, Object.assign({
         // 最小值
         min: 0,
         // 小数点位数
         decimalLength: 2,
         // 是否开启人民币分转元(如值 189 -> 1.89)
-        centToYuan: priceCentToYuan === true,
+        centToYuan: $n_config('priceCentToYuan') === true,
     }, params))
 }