mali-applet-ui 1.0.71 → 1.0.73

package/README.md

@@ -2,6 +2,14 @@
 
 Mali-Applet-UI 码里云小程序组件库  
 
+## 组件开发规范
+
+### 命名规范
+
+组件命名以开头 ml-*，全小写，配合 [easycom](https://uniapp.dcloud.net.cn/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83) 规则按需加载  
+例如，新增按钮组件：src/components/ml-button/ml-button.vue  
+如果是内部组件，使用大写开头驼峰命名
+
 ## 运行项目
 
 ```

package/lib/components/ml-amount-text/ml-amount-text.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-amount-text" :class="[className || '', status ? `ss-${status}` : '', {'is-underline': underline}]">
+  <view class="ml-amount-text" :class="[className || '', status ? `ss-${status}` : '', {'is-underline': underline}]" @tap="tapEvent">
     <slot name="symbol">
       <view v-if="symbol" class="amount-flag">￥</view>
     </slot>
@@ -45,6 +45,12 @@ export default {
       }
       return toAmountString(this.value)
     }
+  },
+  methods: {
+    tapEvent () {
+      this.$emit('tap', {})
+      this.$emit('click', {})
+    }
   }
 }
 </script>

package/lib/components/ml-dict-type/ml-dict-type.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-dict-type" :class="[className || '', (status || showStatus) && selectStatus ? `ss-${selectStatus}` : '', {'is-underline': underline, 'is-border': border, 'is-round': round}]">
+  <view class="ml-dict-type" :class="[className || '', (status || showStatus) && selectStatus ? `ss-${selectStatus}` : '', {'is-underline': underline, 'is-border': border, 'is-round': round}]" @tap="tapEvent">
     <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-dict-type-left-icon">
       <ml-icon :className="prefixIcon"></ml-icon>
     </view>
@@ -56,6 +56,12 @@ export default {
     optStatusField () {
       return this.optOptions.status || 'status'
     }
+  },
+  methods: {
+    tapEvent () {
+      this.$emit('tap', {})
+      this.$emit('click', {})
+    }
   }
 }
 </script>

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

@@ -28,14 +28,14 @@
             @change="handleChangeCheckbox(item)"></ml-checkbox>
           <ml-radio :value="checkIndex" :label="item[useProps.key]" v-else @change="handleChangeRadio"></ml-radio>
         </view>
-        <MlTreeIcon @click="e => $emit('click-icon', 'prefix', item)" :info="getPrefixIcon(item)" :key="index"></MlTreeIcon>
+        <MlTreeIcon @click="e => $emit('click-icon', item, 'prefix')" :info="getPrefixIcon(item)" :key="index"></MlTreeIcon>
         <view class="ml-tree-node__title" @click="handleIntoChildren(item)">
           <view>{{ 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 @click="e => $emit('click-icon', 'suffix', item)" :info="getSuffixIcon(item)" :key="index"></MlTreeIcon>
-          <MlTreeIcon @click="handleIntoChildren(item)" v-if="item.children && item.children.length" :info="{ icon: 'arrow-right' }" :key="index"></MlTreeIcon>
+          <MlTreeIcon @click="e => $emit('click-icon', item, 'suffix')" :info="getSuffixIcon(item)" :key="index"></MlTreeIcon>
+          <MlTreeIcon @click="handleIntoChildren(item)" v-if="(item.children && item.children.length) || (lazy && !item.isLeaf)" :info="{ icon: 'arrow-right' }" :key="index"></MlTreeIcon>
         </view>
       </view>
     </view>
@@ -43,8 +43,8 @@
 </template>
 
 <script>
-import MlTreeIcon from './ml-tree-icon'
-import { findNodesByKeys, findTreeByKey } from '@/components/ml-tree-box/index'
+import MlTreeIcon from './ml-tree-icon.vue'
+import { findNodesByKeys, findTreeByKey } from './utils'
 
 export default {
   name: 'ml-tree-box',
@@ -57,6 +57,8 @@ export default {
     check: Boolean,
     multiple: Boolean,
     breadcrumb: Boolean,
+    lazy: Boolean,
+    lazyLoad: Function,
     strictly: Boolean,
     arbitrary: Boolean,
     props: {
@@ -91,7 +93,8 @@ export default {
         label: 'label',
         children: 'children',
         explain: 'explain',
-        user: 'user'
+        user: 'user',
+        isLeaf: 'isLeaf'
       }
     }
   },
@@ -115,7 +118,13 @@ export default {
     }
   },
   methods: {
-    handleIntoChildren (item) {
+    async handleIntoChildren (item) {
+      const { lazyLoad, lazy } = this
+      if (lazy && lazyLoad && !item.isLeaf) {
+        // this.lazyLoading = true
+        await lazyLoad(item)
+        // this.lazyLoading = false
+      }
       if (item.children && item.children.length) {
         this.cache.push(item)
       }

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

@@ -25,6 +25,6 @@ export default {
 <style lang="scss" scoped>
 .ml-tree-node__icon {
   display: inline-flex;
-  margin-right: 10rpx;
+  margin-right: 15rpx;
 }
 </style>

package/lib/components/ml-tree-box/utils/index.js

@@ -0,0 +1,58 @@
+export const findTreeKey = (list, props = { key: 'key', children: 'children' }) => {
+  let keys = []
+  const { key = 'key', children = 'children' } = props
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+    if (item[key]) {
+      keys.push(item[key])
+    }
+    if (item[children] && item[children].length) {
+      const findKeys = findTreeKey(item[children], props)
+      keys = [...keys, ...findKeys]
+    }
+  }
+  return keys
+}
+
+// 根据节点ID找到对应节点
+export const findTreeByKey = (node, key, parent, props = { key: 'key', children: 'children' }) => {
+  const propsKey = props.key || 'key'
+  const propsChildren = props.children || 'children'
+  for (let i = 0; i < node.length; i++) {
+    const item = node[i]
+    if (item[propsKey] === key) {
+      return {
+        node: item,
+        parent: parent
+      }
+    }
+    if (item[propsChildren] && item[propsChildren].length) {
+      const children = item[propsChildren]
+      const findTree = findTreeByKey(children, key, item, props)
+      if (findTree) {
+        return findTree
+      }
+    }
+  }
+}
+
+// 根据节点ID找到对应节点
+export const findNodesByKeys = (node, keys, props = { key: 'key', children: 'children' }) => {
+  const propsKey = props.key || 'key'
+  const propsChildren = props.children || 'children'
+  let list = []
+  for (let i = 0; i < node.length; i++) {
+    const item = node[i]
+    if (keys.indexOf(item[propsKey]) > -1) {
+      list.push(item)
+    }
+    if (item[propsChildren] && item[propsChildren].length) {
+      const children = item[propsChildren]
+      const findTree = findNodesByKeys(children, keys, props)
+      if (findTree && findTree.length) {
+        list = [...list, ...findTree]
+      }
+    }
+  }
+  return list
+}

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

@@ -24,8 +24,7 @@ import XEUtils from 'xe-utils'
 
 export default {
   props: {
-    nodeData: Object,
-    nodeProps: Object
+    nodeData: Object
   },
   inject: {
     tree: {

package/package.json

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