feat: CTreeDrop 新增 Slot Props

Author: ChuChencheng

CHANGELOG.md

@@ -5,6 +5,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/lang/zh-CN/
 
 ## [Unreleased]
 
+## [2.3.0] - 2020-04-15
+
+### Added
+
+- `CTreeDrop` 默认与 display slot 新增 Slot Props
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+### Security
+
 ## [2.2.6] - 2019-12-12
 
 ### Added

README.md

@@ -244,3 +244,24 @@ npm install @wsfe/ctree
 | 默认    | 展示输入框                                           |
 | display | 展示输入框的展示文字，如果有默认 slot 则此 slot 无效 |
 | clear   | 替换清空图标，如果有默认 slot 则此 slot 无效         |
+
+默认 slot 与 display slot 的 Slot Props `2.3.0` ：
+
+```typescript
+/** 展示 slot 的 props */
+slotProps: {
+  /** 多选选中的节点 */
+  checkedNodes: [] as TreeNode[],
+
+  /** 多选选中的节点 key */
+  checkedKeys: [] as Array<string | number>,
+
+  /** 单选选中的节点 */
+  selectedNode: null as TreeNode | null,
+
+  /** 单选选中的节点 key */
+  selectedKey: null as string | number | null,
+},
+```
+
+**注意**： `checkedNodes` 与 `selectedNode` 只包含已加载的节点，如果设置了选中的值（比如设置了 `value` Prop），但没有设置树的数据，则这两个字段内容将为空；而 `checkedKeys` 与 `selectedKey` 则会包含未加载的选中节点 key 。

examples/Drop.vue

@@ -1,19 +1,44 @@
 <template>
-  <div style="width: 200px;">
-    <CTreeDrop
-      v-model="value"
-      :data="data"
-      checkable
-      clearable
-      drop-placeholder="请选择"
-      :placement="placement"
-      :dropdown-min-width="300"
-      dropdown-width-fixed
-      @checked-change="handleCheckedChange"
-    >
-      <span slot="empty">slot 传进来的暂无数据</span>
-    </CTreeDrop>
-    {{ value }}
+  <div>
+    <div style="width: 200px;">
+      <p>自定义展示 slot ：</p>
+      <CTreeDrop
+        v-model="value"
+        :data="data"
+        checkable
+        clearable
+        drop-placeholder="请选择"
+        :placement="placement"
+        :dropdown-min-width="300"
+        dropdown-width-fixed
+        @checked-change="handleCheckedChange"
+      >
+        <template v-slot:display="scope">
+          <div
+            style="width: 170px; text-overflow: ellipsis; overflow: hidden;"
+          >{{ scope.checkedNodes.map((node) => node.title).join(',') }}</div>
+        </template>
+        <span slot="empty">slot 传进来的暂无数据</span>
+      </CTreeDrop>
+      {{ value }}
+    </div>
+    <div style="width: 200px;">
+      <p>默认：</p>
+      <CTreeDrop
+        v-model="value"
+        :data="data"
+        checkable
+        clearable
+        drop-placeholder="请选择"
+        :placement="placement"
+        :dropdown-min-width="300"
+        dropdown-width-fixed
+        @checked-change="handleCheckedChange"
+      >
+        <span slot="empty">slot 传进来的暂无数据</span>
+      </CTreeDrop>
+      {{ value }}
+    </div>
   </div>
 </template>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsfe/ctree",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "main": "./dist/ctree.umd.min.js",
   "types": "./types",
   "description": "A vue tree component using virtual list.",

src/components/TreeDrop.vue

@@ -6,10 +6,13 @@
       :class="referenceCls"
       @click="handleRefClick"
     >
-      <slot>
+      <slot v-bind="slotProps">
         <div :class="displayInputCls">
           <span :class="displayInputTextCls">
-            <slot name="display">
+            <slot
+              name="display"
+               v-bind="slotProps"
+            >
               {{ displayValue }}
             </slot>
           </span>
@@ -178,6 +181,21 @@ export default (Vue as VueConstructor<Vue & {
 
       /** 单选选中节点名称 */
       selectedTitle: ('' as TreeNodeKeyType),
+
+      /** 展示 slot 的 props */
+      slotProps: {
+        /** 多选选中的节点 */
+        checkedNodes: [] as TreeNode[],
+
+        /** 多选选中的节点 key */
+        checkedKeys: [] as TreeNodeKeyType[],
+
+        /** 单选选中的节点 */
+        selectedNode: null as TreeNode | null,
+
+        /** 单选选中的节点 key */
+        selectedKey: null as TreeNodeKeyType | null,
+      },
     }
   },
   computed: {
@@ -364,9 +382,14 @@ export default (Vue as VueConstructor<Vue & {
       }
     },
     handleCheckedChange (nodes: TreeNode[], keys: TreeNodeKeyType[]): void {
+      this.slotProps.checkedNodes = nodes
+      this.slotProps.checkedKeys = keys
       this.checkedCount = keys.length
     },
     handleSelectedChange (node: TreeNode | null, key: TreeNodeKeyType | null): void {
+      this.slotProps.selectedNode = node
+      this.slotProps.selectedKey = key
+
       if (node) {
         const titleField = this.$refs.treeSearch.$refs.tree.titleField
         this.selectedTitle = node[titleField]
@@ -380,8 +403,13 @@ export default (Vue as VueConstructor<Vue & {
 
     /** 处理树数据更新 */
     handleSetData (): void {
+      this.slotProps.checkedNodes = this.getCheckedNodes()
+      this.slotProps.checkedKeys = this.getCheckedKeys()
+      this.slotProps.selectedNode = this.getSelectedNode()
+      this.slotProps.selectedKey = this.getSelectedKey()
+
       if (this.checkable) {
-        this.checkedCount = this.getCheckedKeys().length
+        this.checkedCount = this.slotProps.checkedKeys.length
       }
       if (this.selectable) {
         if (this.value != null) {