mali-applet-ui 1.0.92 → 1.0.94

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

@@ -1,19 +1,18 @@
 <template>
   <view class="ml-list-select-user-page" :class="[className || '', {'is-border': border, 'is-disabled': disabled}]" @tap="tapEvent">
-    <view v-for="(item, index) in selectRows" :key="index" class="ml-list-select-user-item">
-      <view class="ml-list-select-user-portrait">
-        <image class="ml-list-select-user-img" :src="item.faceImgUrl" mode="aspectFit"></image>
-      </view>
-      <view class="ml-list-select-user-name">
-        <view>{{ item.nickname }}</view>
-      </view>
-      <view class="ml-list-select-user-del-item" @click="removeItem(item)">
-        <ml-icon name="close" />
+    <view class="ml-list-select-user-list">
+      <view v-for="(item, index) in selectRows" :key="index" class="ml-list-select-user-item">
+        <view class="ml-list-select-user-name">
+          <view class="ml-list-select-user-content">{{ item[optLabelField] }}</view>
+        </view>
+        <view v-if="clearable" class="ml-list-select-user-del-item" @click="removeItem(item)">
+          <ml-icon name="close" />
+        </view>
       </view>
     </view>
     <view class="ml-list-select-user-add-item" @click="openUserEvent">
       <view class="ml-list-select-user-add-btn">
-        <ml-icon name="add" />
+        <ml-icon name="add-circle" />
       </view>
     </view>
   </view>
@@ -67,11 +66,21 @@ export default {
       return XEUtils.eqNull(this.value) || this.value === ''
     },
     selectRows () {
-      return []
+      if (this.type === 'checkbox') {
+        return this.dataList.filter(item => this.value.includes(item[this.optValueField]))
+      }
+      return this.dataList.filter(item => this.value === item[this.optValueField])
     }
   },
   methods: {
     tapEvent () {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('tap', {})
+      this.$emit('click', {})
+    },
+    openUserEvent () {
       if (this.disabled) {
         return
       }
@@ -95,8 +104,14 @@ export default {
           }
         }
       })
-      this.$emit('tap', {})
-      this.$emit('click', {})
+    },
+    removeItem (item) {
+      let value = null
+      if (this.type === 'checkbox') {
+        value = this.value.filter(key => key !== item[this.optValueField])
+      }
+      this.$emit('input', value)
+      this.$emit('change', { value })
     },
     clearEvent () {
       let value = null
@@ -115,13 +130,26 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  .ml-list-select-user-item,
+  .ml-list-select-user-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-height: 76rpx;
+  }
+  .ml-list-select-user-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 8rpx;
+    padding: 8rpx 16rpx;
+    border-radius: $ml-page-interval-margin;
+    background: #F2F2F6;
+  }
   .ml-list-select-user-add-item {
-    position: relative;
-    width: 90rpx;
-    font-size: 24rpx;
-    margin: 10rpx 10rpx;
-    text-align: center;
+    position: absolute;
+    top: -74rpx;
+    right: 20rpx;
+    font-size: 44rpx;
   }
   .ml-list-select-user-img {
     width: 50rpx;
@@ -130,32 +158,17 @@ export default {
     overflow: hidden;
   }
   .ml-list-select-user-name {
-    font-size: 28rpx;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .ml-list-select-user-add-btn {
-    width: 80rpx;
-    height: 80rpx;
-    line-height: 80rpx;
-    text-align: center;
-    color: $uni-color-primary;
-    background: #DAE6FF;
-    border-radius: 50%;
-    font-size: 56rpx;
+    .ml-list-select-user-content {
+      font-size: 28rpx;
+      max-width: 140rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
   .ml-list-select-user-del-item {
-    position: absolute;
-    top: -10rpx;
-    right: 0;
-    color: #fff;
-    width: 40rpx;
-    height: 40rpx;
-    line-height: 40rpx;
-    font-size: 30rpx;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.45);
+    flex-shrink: 0;
+    margin-left: 16rpx;
   }
 }
 </style>

package/lib/components/ml-tree/ml-tree.vue

@@ -29,7 +29,14 @@ export default {
     // 复选框
     showCheckbox: Boolean,
     // （复选框）父子不关联
-    checkStrictly: Boolean,
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    indeterminateToChecked: {
+      type: Boolean,
+      default: false
+    },
     checkRowKeys: Array,
     halfRowKeys: Array,
     nodeProps: Object
@@ -84,6 +91,7 @@ export default {
   },
   created () {
     this.treeData = this.data
+    this.initCheckboxRows(this.checkRowKeys)
   },
   methods: {
     selectCheckboxNodeEvent ({ nodeData, nodeKey }) {
@@ -186,7 +194,7 @@ export default {
     updateCheckStatus () {
       const { keyField } = this
       this.isAllCheckboxChecked = this.treeData.every(item => this.selectCheckboxRowKeys.includes(item[keyField]))
-      this.isAllCheckboxIndeterminate = !this.isAllCheckboxChecked && this.treeData.some(item => this.selectCheckboxRowKeys.includes(item[keyField]))
+      this.isAllCheckboxIndeterminate = !this.isAllCheckboxChecked && this.treeData.some(item => this.selectCheckboxRowKeys.includes(item[keyField]) || this.indeterminateRowKeys.includes(item[keyField]))
     },
     initCheckboxRows (selecKeys) {
       this.selectCheckboxRowKeys = []
@@ -258,6 +266,7 @@ export default {
 .ml-tree {
   padding-left: 16rpx;
   overflow: auto;
+  background: #ffffff;
   .ml-tree-checkbox-btns {
     position: sticky;
     left: 0;
@@ -267,7 +276,6 @@ export default {
     align-items: center;
     height: 80rpx;
     border-bottom: 1px solid #e5e5e5;
-    background: #ffffff;
   }
   .ml-tree-checkbox-btns-left {
     flex-grow: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.0.92",
+  "version": "1.0.94",
   "description": "码里云小程序组件库",
   "files": [
     "lib",