mali-applet-ui 1.1.65 → 1.1.67

package/lib/components/ml-progress-bar/ml-progress-bar.vue

@@ -1,20 +1,32 @@
 <template>
   <view class="ml-progress-bar" :class="className">
-    <view class="progress-bar-header">
+    <view v-if="showHeader || title" class="progress-bar-header">
       <slot name="header">
         <view v-if="title" class="progress-header-title" :class="{'is-underline': titleUnderline}">{{ title }}</view>
-        <view v-if="title && showNum" class="progress-header-num">{{ value || 0 }}{{ unit || '' }}</view>
+        <view v-if="showTitleNum" class="progress-header-num">{{ titleNum || (`${percNum}${unit || ''}`) }}</view>
       </slot>
     </view>
-    <view class="progress-bar-chart" :class="{'show-num': !title && showNum}" @click="barClick">
-      <progress
+    <view class="progress-bar-chart" @click="barClick">
+      <view v-if="showBarTitle" class="progress-bar-left" :style="barLeftStyle">
+        <slot name="bar_title">
+          <text>{{ barTitle || '' }}</text>
+        </slot>
+      </view>
+      <view class="progress-bar-content">
+        <progress
         :percent="percNum"
         :activeColor="activeColor || '#1890FF'"
         :backgroundColor="backgroundColor"
         :strokeWidth="strokeWidth"
         :fontSize="fontSize"
         :border-radius="borderRadius" />
-      <view v-if="!title && showNum" class="progress-bar-num">{{ value || 0 }}{{ unit || '' }}</view>
+        <view v-if="showBarRatio" class="progress-bar-ratio">{{ barRatio || `${value}/${max}` }}</view>
+      </view>
+      <view v-if="showBarNum" class="progress-bar-right">
+        <slot name="bar_num">
+          <text>{{ barNum || (`${percNum}${unit || ''}`) }}</text>
+        </slot>
+      </view>
     </view>
     <view class="progress-bar-footer">
       <slot name="footer"></slot>
@@ -38,9 +50,13 @@ export default {
     },
     title: String,
     titleUnderline: Boolean,
+    showHeader: Boolean,
+    showBarTitle: Boolean,
+    barTitle: String,
+    barTitleWidth: [Number, String],
     strokeWidth: {
       type: [Number, String],
-      default: 12
+      default: 16
     },
     activeColor: String,
     fontSize: {
@@ -52,11 +68,23 @@ export default {
       default: '4rpx'
     },
     backgroundColor: String,
-    showNum: Boolean,
+    showTitleNum: Boolean,
+    titleNum: [Number, String],
+    showBarNum: Boolean,
+    barNum: Boolean,
+    showBarRatio: Boolean,
+    barRatio: Boolean,
     unit: String,
     className: String
   },
   computed: {
+    barLeftStyle () {
+      let stys = ''
+      if (this.barTitleWidth) {
+        stys = `width: ${XEUtils.isString(this.barTitleWidth) ? this.barTitleWidth : `${this.barTitleWidth}rpx`}`
+      }
+      return stys
+    },
     percNum () {
       return Math.ceil(XEUtils.toNumber(this.value) / (Math.max(1, XEUtils.toNumber(this.max)) / 100))
     },
@@ -81,19 +109,38 @@ export default {
     text-align: left;
   }
   .progress-bar-chart {
-    height: 24rpx;
+    display: flex;
+    flex-direction: row;
     position: relative;
     margin: 12rpx 0;
-    &.show-num {
-      padding-right: 80rpx;
+    .progress-bar-left,
+    .progress-bar-right {
+      flex-shrink: 0;
+      font-size: 24rpx;
+      line-height: 28rpx;
+      padding: 0 4rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .progress-bar-left {
+      width: 80rpx;
     }
-    .progress-bar-num {
+    .progress-bar-right {
+      width: 120rpx;
+    }
+    .progress-bar-content {
+      flex-grow: 1;
+      overflow: hidden;
+      position: relative;
+    }
+    .progress-bar-ratio {
       position: absolute;
-      right: 0;
       top: 0;
-      line-height: 24rpx;
-      min-width: 38rpx;
-      text-align: left;
+      left: 4rpx;
+      font-size: 24rpx;
+      line-height: 28rpx;
+      color: #fff;
     }
   }
   .progress-header-title {
@@ -107,9 +154,7 @@ export default {
     }
   }
   .progress-header-num {
-    flex-grow: 1;
-    min-width: 60rpx;
-    text-align: right;
+    flex-shrink: 0;
   }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.1.65",
+  "version": "1.1.67",
   "description": "码里UI-小程序组件库(vue2)",
   "files": [
     "lib",