mali-applet-ui 1.0.84 → 1.0.85

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-tree-box">
+  <view class="ml-tree-box" :style="{ height: useHeight }">
     <view class="ml-tree-tool">
       <scroll-view :scroll-x="true" class="ml-tree-breadcrumb-scroll" v-if="breadcrumb">
         <view class="ml-tree-breadcrumb">
@@ -14,33 +14,54 @@
         </view>
       </scroll-view>
     </view>
-    <view class="ml-tree-content">
-      <view class="ml-tree-node" v-if="cache && cache.length" @click="handleBack">
-        <view class="ml-tree-node__title back">
-          <ml-icon name="direction-left"></ml-icon>
-          <text class="ml-tree-node__text">返回</text>
-        </view>
-      </view>
-      <view class="ml-tree-node" v-for="(item, index) in showTree" :key="index">
-        <view class="ml-tree-node__action" v-if="check">
-          <ml-checkbox
-            :value="checkKey.indexOf(item[useProps.key]) > -1"
-            :indeterminate="indeterminate.indexOf(item[useProps.key]) > -1"
-            v-if="multiple"
-            @change="handleChangeCheckbox(item)"></ml-checkbox>
-          <ml-radio :value="checkIndex" :label="item[useProps.key]" v-else @change="handleChangeRadio"></ml-radio>
-        </view>
-        <MlTreeIcon :margin-right="15" @click="e => $emit('click-icon', item, 'prefix')" :info="getPrefixIcon(item)" :key="index"></MlTreeIcon>
-        <view class="ml-tree-node__title" @click="handleIntoChildren(item)">
-          <view class="nowrap">{{ item[useProps.label] || '' }}</view>
-          <view class="ml-tree-node__explain" v-if="item[useProps.explain]">{{ item[useProps.explain] }}</view>
+    <scroll-view :scroll-y="true" class="ml-tree-container" :style="{ height: useContainerHeight }">
+      <view class="ml-tree-content">
+        <view class="ml-tree-node" v-if="cache && cache.length" @click="handleBack">
+          <view class="ml-tree-node__title back">
+            <ml-icon name="direction-left"></ml-icon>
+            <text class="ml-tree-node__text">返回</text>
+          </view>
         </view>
-        <view class="ml-tree-node__extra">
-          <MlTreeIcon :margin-right="15" @click="e => $emit('click-icon', item, 'suffix')" :info="getSuffixIcon(item)" :key="index"></MlTreeIcon>
-          <MlTreeIcon :margin-right="15" @click="handleIntoChildren(item)" v-if="(item.children && item.children.length) || (lazy && !item.isLeaf)" :info="{ icon: 'arrow-right' }" :key="index"></MlTreeIcon>
+        <view class="ml-tree-node" v-for="(item, index) in showTree" :key="index" @tap="handleClickEvent(item)">
+          <view class="ml-tree-node__action" v-if="check">
+            <ml-checkbox
+              :value="checkKey.indexOf(item[useProps.key]) > -1"
+              :indeterminate="indeterminate.indexOf(item[useProps.key]) > -1"
+              v-if="multiple"
+              @tap.stop
+              @change="handleChangeCheckbox(item)"></ml-checkbox>
+            <ml-radio
+              @tap.stop
+              :value="checkIndex"
+              :label="item[useProps.key]"
+              v-else
+              @change="handleChangeRadio"></ml-radio>
+          </view>
+          <MlTreeIcon
+            :margin-right="15"
+            @tap-icon.stop="handleClickIcon($event, item)"
+            :info="getPrefixIcon(item)"
+          />
+          <view class="ml-tree-node__title">
+            <view class="nowrap">{{ item[useProps.label] || '' }}</view>
+            <view class="ml-tree-node__explain" v-if="item[useProps.explain]">{{ item[useProps.explain] }}</view>
+          </view>
+          <view class="ml-tree-node__extra">
+            <MlTreeIcon
+              :margin-right="15"
+              @tap-icon.stop="handleClickIcon($event, item)"
+              :info="getSuffixIcon(item)"
+            />
+            <MlTreeIcon
+              :margin-right="15"
+              @tap-icon.stop="handleIntoChildren(item)"
+              v-if="(item.children && item.children.length) || (lazy && !item.isLeaf)"
+              :info="{ icon: 'arrow-right' }"
+            />
+          </view>
         </view>
       </view>
-    </view>
+    </scroll-view>
   </view>
 </template>
 
@@ -57,6 +78,7 @@ export default {
   props: {
     value: [Array, String, Number],
     check: Boolean,
+    height: [String, Number],
     multiple: Boolean,
     breadcrumb: Boolean,
     lazy: Boolean,
@@ -123,12 +145,26 @@ export default {
     },
     useProps () {
       return { ...this.defaultProps, ...this.props }
+    },
+    useContainerHeight () {
+      const { breadcrumb, useHeight: height } = this
+      const h = height.indexOf('px') > -1 || height.indexOf('%') > -1 ? height : `${height}rpx`
+      if (breadcrumb) {
+        return `calc(${h} - 50rpx)`
+      }
+      return `calc(${h})`
+    },
+    useHeight () {
+      const { height } = this
+      if (typeof height === 'string') {
+        return height.indexOf('px') > -1 || height.indexOf('%') > -1 ? height : `${height}rpx`
+      }
+      return `${height}rpx`
     }
   },
   methods: {
     async handleIntoChildren (item) {
-      const { lazyLoad, lazy } = this
-      console.log(this)
+      const { lazyLoad, lazy, current } = this
       if (!(item.children && item.children.length) && lazy && lazyLoad && !item.isLeaf) {
         // this.lazyLoading = true
         await lazyLoad.call(this.currVM, item)
@@ -136,6 +172,7 @@ export default {
       }
       if (item.children && item.children.length) {
         this.cache.push(item)
+        this.$emit('into', current)
       }
     },
     async reloadLazy () {
@@ -147,8 +184,9 @@ export default {
       }
     },
     handleBack () {
-      const { cache } = this
+      const { cache, current } = this
       cache.splice(cache.length - 1, 1)
+      this.$emit('back', current)
     },
     handleToBreadcrumb (index) {
       const { cache } = this
@@ -176,37 +214,41 @@ export default {
       }
       this.handleEvent()
     },
-    handleCheckOn (key) {
-      const { tree, useProps, checkKey } = this
+    handleCheckOn (key, down = true) {
+      const { tree, useProps, checkKey, strictly, arbitrary } = this
       const find = findTreeByKey(tree, key, null, useProps)
       if (find) {
         const { node, parent } = find
         this.checkKey.push(key)
         const children = node.children
-        if (children && children.length) {
+        if (children && children.length && down && !arbitrary) {
           for (let i = 0; i < children.length; i++) {
             const item = children[i]
             const findKey = item[useProps.key]
             const findIndex = checkKey.findIndex(fd => fd === findKey)
             if (findIndex === -1) {
-              this.handleCheckOn(findKey)
+              this.handleCheckOn(findKey, true)
             }
           }
         }
-        if (parent) {
-          this.handleIndeterminateOn(parent)
+        if (parent && !arbitrary) {
+          if (strictly) {
+            this.handleCheckOn(parent[useProps.key], false)
+          } else {
+            this.handleIndeterminateOn(parent)
+          }
         }
       }
     },
     handleCheckOff (key) {
-      const { tree, useProps, checkKey } = this
+      const { tree, useProps, checkKey, arbitrary } = this
       const find = findTreeByKey(tree, key, null, useProps)
       const { node, parent } = find
       if (find) {
         const findIndex = checkKey.findIndex(item => item === key)
         this.checkKey.splice(findIndex, 1)
         const children = node.children
-        if (children && children.length) {
+        if (children && children.length && !arbitrary) {
           this.handleIndeterminateChildrenOff(node)
           for (let i = 0; i < children.length; i++) {
             const item = children[i]
@@ -215,7 +257,7 @@ export default {
           }
         }
       }
-      if (parent) {
+      if (parent && !arbitrary) {
         this.handleIndeterminateParentOff(parent)
       }
     },
@@ -229,7 +271,7 @@ export default {
       const children = node[useProps.children]
       if (children && children.length && children.every(item => checkKey.indexOf(item[useProps.key]) > -1)) {
         if (checkKey.findIndex(item => item === key) === -1) {
-          this.handleCheckOn(key)
+          this.handleCheckOn(key, false)
         }
       }
     },
@@ -258,6 +300,21 @@ export default {
         }
       }
     },
+    handleClickEvent (row) {
+      const { check, handleChangeCheckbox, handleChangeRadio, useProps, multiple } = this
+      if (check) {
+        if (multiple) {
+          handleChangeCheckbox(row)
+        } else {
+          handleChangeRadio({ value: row[useProps.key] })
+        }
+      } else {
+        this.handleIntoChildren(row)
+      }
+    },
+    handleClickIcon (e, row) {
+      this.$emit('click-icon', e.icon, row)
+    },
     handleEvent () {
       const { tree, multiple, checkKey, checkIndex, useProps } = this
       if (multiple) {
@@ -315,53 +372,55 @@ export default {
 <style lang="scss" scoped>
 .ml-tree-box {
   background-color: #ffffff;
+  .ml-tree-container {
+    .ml-tree-content {
+      padding: 0 30rpx;
 
-  .ml-tree-content {
-    padding: 0 30rpx;
+      .ml-tree-node {
+        font-size: 34rpx;
+        display: flex;
+        align-items: center;
+        height: 116rpx;
+        border-bottom: 1rpx solid #efefef;
 
-    .ml-tree-node {
-      font-size: 34rpx;
-      display: flex;
-      align-items: center;
-      height: 116rpx;
-      border-bottom: 1rpx solid #efefef;
+        .ml-tree-node__title {
+          flex: 1;
+          width: 0;
+          .nowrap {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
 
-      .ml-tree-node__title {
-        flex: 1;
-        width: 0;
-        .nowrap {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+          &.back {
+            color: #6e6e6e;
+            font-size: 26rpx;
+          }
 
-        &.back {
-          color: #6e6e6e;
-          font-size: 26rpx;
+          .ml-tree-node__text {
+            margin: 0 10rpx;
+          }
+          .ml-tree-node__explain {
+            color: #989898;
+            font-size: 26rpx;
+          }
         }
 
-        .ml-tree-node__text {
-          margin: 0 10rpx;
+        .ml-tree-node__extra {
+          display: flex;
+          align-items: center;
+          padding: 0 0 0 20rpx;
         }
-        .ml-tree-node__explain {
-          color: #989898;
-          font-size: 26rpx;
-        }
-      }
 
-      .ml-tree-node__extra {
-        display: flex;
-        align-items: center;
-        padding: 0 0 0 20rpx;
-      }
-
-      &:last-child {
-        border-bottom: none;
+        &:last-child {
+          border-bottom: none;
+        }
       }
     }
   }
 
   .ml-tree-tool {
+    position: sticky;
     .ml-tree-breadcrumb-scroll {
       background-color: #f3f3f3;
     }

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-tree-node__icon" :style="useStyle" v-if="info && info.icon" @click="e => $emit('click', e)">
+  <view class="ml-tree-node__icon" :style="useStyle" v-if="info && info.icon" @tap.stop="handleEvent">
     <ml-icon :name="info.icon"></ml-icon>
   </view>
 </template>
@@ -19,6 +19,11 @@ export default {
       const { info, marginRight } = this
       return `color: ${info?.color}; font-size: ${Number(info?.fontSize)}rpx; margin-right: ${marginRight}rpx`
     }
+  },
+  methods: {
+    handleEvent (e) {
+      this.$emit('tap-icon', this.info)
+    }
   }
 }
 </script>

package/package.json

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