mali-applet-ui 1.0.70 → 1.0.72

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-tree-box/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-box/ml-tree-box.vue

@@ -0,0 +1,350 @@
+<template>
+  <view class="ml-tree-box">
+    <view class="ml-tree-tool">
+      <view class="ml-tree-breadcrumb" v-if="breadcrumb">
+        <view class="breadcrumb-item" @click="handleToBreadcrumb()">
+          全部
+          <ml-icon v-if="cache && cache.length" name="arrow-right"></ml-icon>
+        </view>
+        <view class="breadcrumb-item" v-for="(item, index) in cache" :key="index" @click="handleToBreadcrumb(index)">
+          {{ item[useProps.label] || '' }}
+          <ml-icon v-if="index !== (cache.length - 1)" name="arrow-right"></ml-icon>
+        </view>
+      </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 @click="e => $emit('click-icon', 'prefix', item)" :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>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import MlTreeIcon from './ml-tree-icon'
+import { findNodesByKeys, findTreeByKey } from './utils'
+
+export default {
+  name: 'ml-tree-box',
+  components: { MlTreeIcon },
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [Array, String, Number],
+    check: Boolean,
+    multiple: Boolean,
+    breadcrumb: Boolean,
+    strictly: Boolean,
+    arbitrary: Boolean,
+    props: {
+      type: Object,
+      default: () => ({})
+    },
+    tree: {
+      type: Array,
+      default: () => []
+    },
+    prefixIcon: [String, Object, Function],
+    suffixIcon: [String, Object, Function]
+  },
+  watch: {
+    value (val) {
+      const { multiple } = this
+      if (multiple) {
+        this.checkKey = val
+      } else {
+        this.checkIndex = val
+      }
+    }
+  },
+  data () {
+    return {
+      cache: [],
+      checkIndex: 0,
+      checkKey: [],
+      indeterminate: [],
+      defaultProps: {
+        key: 'key',
+        label: 'label',
+        children: 'children',
+        explain: 'explain',
+        user: 'user'
+      }
+    }
+  },
+  computed: {
+    showTree () {
+      const { current, tree } = this
+      if (current) {
+        return current.children
+      }
+      return tree
+    },
+    current () {
+      const { cache } = this
+      if (cache && cache.length) {
+        return cache[cache.length - 1]
+      }
+      return null
+    },
+    useProps () {
+      return { ...this.defaultProps, ...this.props }
+    }
+  },
+  methods: {
+    handleIntoChildren (item) {
+      if (item.children && item.children.length) {
+        this.cache.push(item)
+      }
+    },
+    handleBack () {
+      const { cache } = this
+      cache.splice(cache.length - 1, 1)
+    },
+    handleToBreadcrumb (index) {
+      const { cache } = this
+      if (index === (cache.length - 1)) return false
+      if (isNaN(+index)) {
+        this.cache = []
+      } else {
+        cache.splice(index + 1)
+      }
+    },
+    handleChangeRadio (e) {
+      this.checkIndex = e.value
+      this.handleEvent()
+    },
+    handleChangeCheckbox (row) {
+      const { checkKey, useProps } = this
+      const key = row[useProps.key]
+      if (key) {
+        const findIndex = checkKey.findIndex(item => item === key)
+        if (findIndex > -1) {
+          this.handleCheckOff(key)
+        } else {
+          this.handleCheckOn(key)
+        }
+      }
+      this.handleEvent()
+    },
+    handleCheckOn (key) {
+      const { tree, useProps, checkKey } = 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) {
+          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)
+            }
+          }
+        }
+        if (parent) {
+          this.handleIndeterminateOn(parent)
+        }
+      }
+    },
+    handleCheckOff (key) {
+      const { tree, useProps, checkKey } = 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) {
+          this.handleIndeterminateChildrenOff(node)
+          for (let i = 0; i < children.length; i++) {
+            const item = children[i]
+            const findKey = item[useProps.key]
+            this.handleCheckOff(findKey)
+          }
+        }
+      }
+      if (parent) {
+        this.handleIndeterminateParentOff(parent)
+      }
+    },
+    handleIndeterminateOn (node) {
+      const { indeterminate, useProps, checkKey } = this
+      const key = node[useProps.key]
+      const findIndex = indeterminate.findIndex(item => item === key)
+      if (findIndex === -1) {
+        indeterminate.push(key)
+      }
+      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)
+        }
+      }
+    },
+    handleIndeterminateChildrenOff (node) {
+      const { indeterminate, useProps } = this
+      const key = node[useProps.key]
+      const indeterminateIndex = indeterminate.findIndex(item => item === key)
+      if (indeterminateIndex > -1) {
+        indeterminate.splice(indeterminateIndex, 1)
+      }
+    },
+    handleIndeterminateParentOff (node) {
+      const { indeterminate, checkKey, useProps } = this
+      const key = node[useProps.key]
+      const children = node[useProps.children]
+      if (!(children.every(item => checkKey.indexOf(item[useProps.key]) > -1))) {
+        const findIndex = checkKey.findIndex(item => item === key)
+        if (findIndex > -1) {
+          checkKey.splice(findIndex, 1)
+        }
+      }
+      if (children.every(item => checkKey.indexOf(item[useProps.key]) === -1)) {
+        const findIndex = indeterminate.findIndex(item => item === key)
+        if (findIndex > -1) {
+          indeterminate.splice(findIndex, 1)
+        }
+      }
+    },
+    handleEvent () {
+      const { tree, multiple, checkKey, checkIndex, useProps } = this
+      if (multiple) {
+        const checkRows = findNodesByKeys(tree, checkKey, useProps)
+        this.$emit('input', checkKey)
+        this.$emit('change', checkKey, checkRows)
+      } else {
+        const { node } = findTreeByKey(tree, checkIndex, null, useProps)
+        this.$emit('input', checkIndex)
+        this.$emit('change', checkIndex, node)
+      }
+    },
+    // 自定义图标
+    getPrefixIcon (row) {
+      const { prefixIcon } = this
+      let icon = ''
+      if (typeof prefixIcon === 'function') {
+        icon = prefixIcon(row)
+      } else {
+        icon = prefixIcon
+      }
+      if (typeof icon === 'object') {
+        return icon
+      } else if (typeof icon === 'string') {
+        return {
+          icon,
+          color: ''
+        }
+      }
+      return false
+    },
+    // 自定义图标
+    getSuffixIcon (row) {
+      const { suffixIcon } = this
+      let icon = ''
+      if (typeof suffixIcon === 'function') {
+        icon = suffixIcon(row)
+      } else {
+        icon = suffixIcon
+      }
+      if (typeof icon === 'object') {
+        return icon
+      } else if (typeof icon === 'string') {
+        return {
+          icon,
+          color: ''
+        }
+      }
+      return false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ml-tree-box {
+  background-color: #ffffff;
+
+  .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__title {
+        flex: 1;
+
+        &.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__extra {
+        padding: 0 20rpx;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .ml-tree-tool {
+    .ml-tree-breadcrumb {
+      display: flex;
+      background-color: #f3f3f3;
+      padding: 0 30rpx;
+
+      .breadcrumb-item {
+        position: relative;
+        height: 50rpx;
+        line-height: 50rpx;
+        color: #afafaf;
+        font-size: 26rpx;
+
+        &:last-child {
+          color: #6e6e6e;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <view class="ml-tree-node__icon" :style="useStyle" v-if="info && info.icon" @click="e => $emit('click', e)">
+    <ml-icon :name="info.icon"></ml-icon>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ml-tree-icon',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    info: Object
+  },
+  computed: {
+    useStyle () {
+      const { info } = this
+      return `color: ${info?.color}; font-size: ${Number(info?.fontSize)}rpx`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ml-tree-node__icon {
+  display: inline-flex;
+  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.70",
+  "version": "1.0.72",
   "description": "码里云小程序组件库",
   "files": [
     "lib",