w-component-vue 2.2.3 → 2.2.6

package/docs/module-WText.html

@@ -422,7 +422,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextCore.html

@@ -248,7 +248,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextInt.html

@@ -374,7 +374,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextIntCore.html

@@ -278,7 +278,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSelect.html

@@ -434,7 +434,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggest.html

@@ -464,7 +464,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggestCore.html

@@ -368,7 +368,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextarea.html

@@ -218,7 +218,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeday.html

@@ -332,7 +332,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayCore.html

@@ -230,7 +230,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRange.html

@@ -338,7 +338,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRangeCore.html

@@ -242,7 +242,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html

@@ -368,7 +368,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html

@@ -272,7 +272,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -380,7 +380,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -284,7 +284,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -87,12 +87,66 @@
         <td><code>null</code></td>
         <td>No</td>
         <td>輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null</td>
+    </tr><tr>
+        <td><code>activable</code></td>
+        <td>Boolean</td>
+        <td><code>false</code></td>
+        <td>No</td>
+        <td>輸入是否使用主動模式布林值，預設false</td>
+    </tr><tr>
+        <td><code>funActive</code></td>
+        <td>function</td>
+        <td><code>null</code></td>
+        <td>No</td>
+        <td>輸入主動模式時處理點擊項目函數，給予並回傳true時代表點擊項目給予主動模式，回傳false代表點擊項目不給予主動模式，可應用於資料夾與有效項目之區隔，預設null</td>
+    </tr><tr>
+        <td><code>activeItem</code></td>
+        <td>Object</td>
+        <td><code>{}</code></td>
+        <td>No</td>
+        <td>輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}</td>
+    </tr><tr>
+        <td><code>itemTextColor</code></td>
+        <td>String</td>
+        <td><code>'#444'</code></td>
+        <td>No</td>
+        <td>輸入文字顏色字串，預設'#444'</td>
+    </tr><tr>
+        <td><code>itemTextColorHover</code></td>
+        <td>String</td>
+        <td><code>'#222'</code></td>
+        <td>No</td>
+        <td>輸入滑鼠移入時文字顏色字串，預設'#222'</td>
+    </tr><tr>
+        <td><code>itemTextColorActive</code></td>
+        <td>String</td>
+        <td><code>'#d72'</code></td>
+        <td>No</td>
+        <td>輸入主動模式時文字顏色字串，預設'#d72'</td>
+    </tr><tr>
+        <td><code>itemBackgroundColor</code></td>
+        <td>String</td>
+        <td><code>'transparent'</code></td>
+        <td>No</td>
+        <td>輸入背景顏色字串，預設'transparent'</td>
+    </tr><tr>
+        <td><code>itemBackgroundColorHover</code></td>
+        <td>String</td>
+        <td><code>'rgba(200,200,200,0.2)'</code></td>
+        <td>No</td>
+        <td>輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'</td>
+    </tr><tr>
+        <td><code>itemBackgroundColorActive</code></td>
+        <td>String</td>
+        <td><code>'rgba(255,167,38,0.2)'</code></td>
+        <td>No</td>
+        <td>輸入主動模式時背景顏色字串，預設'rgba(255,167,38,0.2)'</td>
     </tr><tr>
         <td><code>selectable</code></td>
         <td>Boolean</td>
         <td><code>false</code></td>
         <td>No</td>
-        <td>輸入是否具有勾選模式，預設false</td>
+        <td>輸入是否具有勾選模式布林值，預設false</td>
     </tr><tr>
         <td><code>selections</code></td>
         <td>Array</td>
@@ -248,7 +302,7 @@
         <td>Boolean</td>
         <td><code>false</code></td>
         <td>No</td>
-        <td>輸入是否為可拖曳編輯模式，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false</td>
+        <td>輸入是否為可拖曳編輯模式布林值，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false</td>
     </tr><tr>
         <td><code>dgTextDisabled</code></td>
         <td>String</td>
@@ -332,7 +386,7 @@
         <td>Boolean</td>
         <td><code>false</code></td>
         <td>No</td>
-        <td>輸入是否使用控制節點模式，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false</td>
+        <td>輸入是否使用控制節點模式布林值，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false</td>
     </tr><tr>
         <td><code>operateItemTextForInsertBefore</code></td>
         <td>String</td>
@@ -446,7 +500,7 @@
         <td>Boolean</td>
         <td><code>true</code></td>
         <td>No</td>
-        <td>輸入是否為顯示模式，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題</td>
+        <td>輸入是否為顯示模式布林值，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題</td>
     </tr></tbody>
 </table>
 
@@ -572,7 +626,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -248,7 +248,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -144,7 +144,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Tue Apr 12 2022 22:58:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Thu Apr 14 2022 09:51:01 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.2.3",
+  "version": "2.2.6",
   "author": "yuda-lyu(semisphere)",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/AppZoneWImageCascadingDyn.vue

@@ -69,6 +69,23 @@
             </div>
 
 
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-image-cascading-dyn'"
+                    :casename="'imageWidthSoft'"
+                ></demolink>
+
+                <w-image-cascading-dyn
+                    style="width:100%;"
+                    :imageWidthSoft="300"
+                    :images="WImageCascadingDyn.opt1.images"
+                    :imageStyle="WImageCascadingDyn.opt1.imageStyle"
+                    :opt="WImageCascadingDyn.opt1.opt"
+                ></w-image-cascading-dyn>
+
+            </div>
+
+
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-image-cascading-dyn'"

package/src/AppZoneWTree.vue

@@ -109,8 +109,12 @@
                     style="border:1px solid #ddd;"
                     :viewHeightMax="WTree.viewHeightMaxSync"
                     :data="WTree.option.items"
+                    @mouseenter="mouseenter"
+                    @mouseleave="mouseleave"
+                    @click="click"
                     @change-view-items="changeViewItems"
                     @change-height-of-items="changeHeightOfItems"
+                    @render="render"
                 ></w-tree>
 
             </div>
@@ -155,6 +159,88 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'itemTextColor & itemTextColorHover & itemBackgroundColor & itemBackgroundColorHover'"
+                ></demolink>
+
+                <w-tree
+                    style="border:1px solid #ddd; background:#444;"
+                    :data="WTree.option.items"
+                    :itemTextColor="'#ccc'"
+                    :itemTextColorHover="'#eee'"
+                    :itemBackgroundColor="'#444'"
+                    :itemBackgroundColorHover="'rgba(187, 119, 34, 0.6)'"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'activable & activeItem'"
+                ></demolink>
+
+                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :data="WTree.option.items"
+                    :activable="true"
+                    :activeItem.sync="WTree.option.activeItem"
+                    @click="clickActive"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'activable & activeItem & funActive'"
+                ></demolink>
+
+                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :data="WTree.option.items"
+                    :activable="true"
+                    :activeItem.sync="WTree.option.activeItem"
+                    :funActive="funActive"
+                    @click="clickActive"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'activable & activeItem & itemTextColor & itemTextColorHover & itemTextColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
+                ></demolink>
+
+                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+
+                <w-tree
+                    style="border:1px solid #ddd; background:#444;"
+                    :data="WTree.option.items"
+                    :activable="true"
+                    :activeItem.sync="WTree.option.activeItem"
+                    :itemTextColor="'#ccc'"
+                    :itemTextColorHover="'#eee'"
+                    :itemTextColorActive="'#fff'"
+                    :itemBackgroundColor="'#444'"
+                    :itemBackgroundColorHover="'rgba(187, 119, 34, 0.6)'"
+                    :itemBackgroundColorActive="'rgba(187, 119, 34, 0.8)'"
+                    @click="clickActive"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -407,24 +493,6 @@
             </div>
 
 
-            <div class="bk dz">
-                <demolink
-                    :kbname="'w-tree'"
-                    :casename="'mouseenter & mouseleave & click & change-view-items'"
-                ></demolink>
-
-                <w-tree
-                    style="border:1px solid #ddd;"
-                    :data="WTree.option.items"
-                    @mouseenter="mouseenter"
-                    @mouseleave="mouseleave"
-                    @click="click"
-                    @change-view-items="changeViewItems"
-                ></w-tree>
-
-            </div>
-
-
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -533,7 +601,7 @@
                             :data="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         ></w-tree>
                     </div>
 
@@ -565,7 +633,7 @@
                             :data="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -628,7 +696,7 @@
                             :data.sync="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         ></w-tree>
                     </div>
 
@@ -663,7 +731,7 @@
                             :data.sync="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -733,7 +801,7 @@
                             :selections.sync="WTree.option.selections"
                             :filterKeywords="WTree.option.keywords"
                             :noResultsText="'There are no items to show...'"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -794,7 +862,7 @@
                             :selectable="true"
                             :selections.sync="WTree.optionLocked.selections"
                             :locked="'locked'"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -861,7 +929,7 @@
                             :iconCheckedDisabledColor="'orange lighten-4'"
                             :iconCheckedPartiallyColor="'orange lighten-2'"
                             :iconCheckedPartiallyDisabledColor="'orange lighten-4'"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -921,7 +989,7 @@
                             :data="WTree.optionLarge.items"
                             :selectable="true"
                             :selections.sync="WTree.optionLarge.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex; align-items:center; min-height:34px;">
@@ -1003,6 +1071,9 @@ export default {
                         { 'id': 18 },
                         //勾選id:18會自動再加入id:19
                     ],
+                    activeItem: {
+                        'id': 4
+                    },
                     items: [
                         {
                             id: 1,
@@ -1365,18 +1436,6 @@ export default {
                 })
             return t
         },
-        click: function(msg) {
-            console.log('click', msg)
-        },
-        changeSections: function(msg) {
-            console.log('changeSections', msg)
-        },
-        changeViewItems: function(msg) {
-            console.log('changeViewItems', msg)
-        },
-        changeHeightOfItems: function(msg) {
-            console.log('changeHeightOfItems', msg)
-        },
         mouseenter: function(msg) {
             console.log('mouseenter', msg)
             msg.ele.style.transition = 'all 0.3s'
@@ -1388,6 +1447,28 @@ export default {
             msg.ele.style.background = 'rgba(255, 255, 255, 0)'
             //msg.ele.style.color = 'black'
         },
+        click: function(msg) {
+            console.log('click', msg)
+        },
+        render: function(msg) {
+            console.log('render', msg)
+        },
+        clickActive: function(msg) {
+            console.log('clickActive', msg)
+        },
+        funActive: function(msg) {
+            console.log('funActive', msg)
+            return !Array.isArray(msg.item.children) //children非陣列代表沒有所屬節點
+        },
+        changeSelections: function(msg) {
+            console.log('changeSelections', msg)
+        },
+        changeViewItems: function(msg) {
+            console.log('changeViewItems', msg)
+        },
+        changeHeightOfItems: function(msg) {
+            console.log('changeHeightOfItems', msg)
+        },
         clickOperateItem: function(msg) {
             console.log('clickOperateItem', msg)