mali-applet-ui 1.1.64 → 1.1.66

package/lib/components/ml-list-select-page/ml-list-select-page.vue

@@ -3,7 +3,7 @@
     <view class="ml-list-select-page-warpper">
       <view v-if="hasEmpty" class="ml-list-select-page-placeholder">{{ readonly ? '' : placeholder }}</view>
       <view v-else>
-        <slot :items="selectRows">
+        <slot :items="selectRowList">
           <view>{{ selectLabel }}</view>
         </slot>
       </view>
@@ -27,6 +27,7 @@ export default {
   name: 'MlListSelectPage',
   props: {
     value: [Array, Number, String],
+    selectRows: Array,
     defaultOptions: Array,
     options: Array,
     optionProps: Object,
@@ -72,11 +73,11 @@ export default {
       }
       return XEUtils.eqNull(this.value) || this.value === ''
     },
-    selectRows () {
+    selectRowList () {
       return this.getSelectRows(this.value)
     },
     selectLabel () {
-      return this.selectRows.map(item => item[this.optLabelField]).join(',')
+      return this.selectRowList.map(item => item[this.optLabelField]).join(',')
     }
   },
   watch: {
@@ -115,6 +116,7 @@ export default {
         value = this.value.filter(key => key !== item[this.optValueField])
       }
       this.$emit('input', value)
+      this.$emit('update:selectRows', this.getSelectRows(value))
     },
     tapEvent () {
       if (this.showAddBtn || this.disabled) {
@@ -144,6 +146,7 @@ export default {
           // 点击确认事件
           confirm: (params) => {
             this.$emit('input', params.value)
+            this.$emit('update:selectRows', params.selectRows)
             this.$emit('change', params)
           }
         }

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

@@ -1,20 +1,31 @@
 <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 || (`${value || 0}${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>
+      <view v-if="showBarNum" class="progress-bar-right">
+        <slot name="bar_num">
+          <text>{{ barNum || (`${value || 0}${unit || ''}`) }}</text>
+        </slot>
+      </view>
     </view>
     <view class="progress-bar-footer">
       <slot name="footer"></slot>
@@ -38,9 +49,13 @@ export default {
     },
     title: String,
     titleUnderline: Boolean,
+    showHeader: Boolean,
+    showBarTitle: Boolean,
+    barTitle: String,
+    barTitleWidth: [Number, String],
     strokeWidth: {
       type: [Number, String],
-      default: 12
+      default: 14
     },
     activeColor: String,
     fontSize: {
@@ -52,11 +67,21 @@ export default {
       default: '4rpx'
     },
     backgroundColor: String,
-    showNum: Boolean,
+    showTitleNum: Boolean,
+    titleNum: [Number, String],
+    showBarNum: Boolean,
+    barNum: 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 +106,28 @@ 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;
+      padding: 0 4rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-    .progress-bar-num {
-      position: absolute;
-      right: 0;
-      top: 0;
-      line-height: 24rpx;
-      min-width: 38rpx;
-      text-align: left;
+    .progress-bar-left {
+      width: 80rpx;
+    }
+    .progress-bar-right {
+      width: 120rpx;
+    }
+    .progress-bar-content {
+      flex-grow: 1;
+      overflow: hidden;
     }
   }
   .progress-header-title {
@@ -107,9 +141,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.64",
+  "version": "1.1.66",
   "description": "码里UI-小程序组件库(vue2)",
   "files": [
     "lib",