js控制collapse,js控制顯示和隱藏

本文目錄一覽：

• 1、vue實現collapse摺疊板動畫，可設置動畫時間，動畫延遲等
• 2、Vue.js+Element-UI實現點擊按鈕控制左側菜單摺疊與展開
• 3、js ,控制光標位置
• 4、Vuejs高度的改變動畫探索：摺疊面板Collapse組件的最佳實現方案

vue實現collapse摺疊板動畫，可設置動畫時間，動畫延遲等

但是這個動畫並不支持設置時間，進一步封裝還是可以的。

重寫了一個collapse 的動畫。

效果如下

新建collapseMixins.js，內容如下

建立一個collapseTransition.js，內容如下

collapseMixins.js是一個混合類，因為我封裝了其他不同類型的動畫，所以做了一個mixins。

使用的時候引入collapseTransition組件就行。

Vue.js+Element-UI實現點擊按鈕控制左側菜單摺疊與展開

在element-ui中採用NavMenu導航菜單作為系統菜單的實現。

官方文檔中NavMenu導航菜單有一個Menu Attributes屬性collapse，是一個 bollean 類型，用於控制是否水平摺疊菜單。

我們可以通過設置collapse屬性的值為 true 或 false 來控制菜單的摺疊與展開。

解決方案

1.實現一個按鈕，

2.在data中定義一個數據collapse

3.實現方法toggleCollapse

4.在el-menu中動態綁定屬性值collapse

問題：在左側菜單的展開與摺疊中，文本和圖標摺疊了，但是菜單的長度並沒有摺疊，發現原因是菜單的長度給了一個固定的值，而實際上我們需要動態給定長度。如果菜單是展開的，長度是等於文本的長度+圖標的長度。如果菜單是摺疊的，長度是等於圖標的長度。我們可以根據isCollapse的值進行判斷，通過它的值為true或者是false，來給定不同的長度：

js ,控制光標位置

1、獲取光標位置

function getCursortPosition (ctrl) {

//獲取光標位置函數 

var CaretPos = 0; // IE Support

if (document.selection) { 

ctrl.focus (); 

var Sel = document.selection.createRange ();

Sel.moveStart (‘character’, -ctrl.value.length);

CaretPos = Sel.text.length; } 

 // Firefox support 

else if (ctrl.selectionStart || ctrl.selectionStart == ‘0’)

CaretPos =ctrl.selectionStart; 

return (CaretPos); }

2.設置光標位置

function setCaretPosition(ctrl, pos){

//設置光標位置函數 

if(ctrl.setSelectionRange) {

ctrl.focus(); 

ctrl.setSelectionRange(pos,pos);

 } else if (ctrl.createTextRange){ 

 varrange = ctrl.createTextRange(); 

 range.collapse(true); 

 range.moveEnd(‘character’, pos);

 range.moveStart(‘character’, pos); 

 range.select(); 

 } 

 }

3、將光標移動到輸入框

ctrl.focus();

Vuejs高度的改變動畫探索：摺疊面板Collapse組件的最佳實現方案

使用過CSS transition屬性的童鞋們應該都清楚，當元素在過渡開始或者結束時的高度為auto時，動畫是不生效的；那麼如何才能實現元素高度的改變動畫效果呢？ 本篇文章將為大家提供一個基於Vue3的非常簡潔的解決方案。

要實現高度的改變動畫，我們需要在動畫進行之前為元素設置準確的高度。

當元素由可見變為隱藏狀態時，我們需要先獲取元素的計算高度，將其設置到style屬性上，然後執行一個觸發瀏覽器渲染引擎重繪的動作，然後再將高度設置為0，這樣高度的改變動畫就會正常進行。

當元素由隱藏變為可見狀態時，我們需要先將高度設置為auto，然後獲取元素的計算高度，再將高度設置為0，然後執行一個觸發瀏覽器渲染引擎重繪的動作，然後再將高度設置為計算高度，這樣高度的改變動畫就會正常進行。

現在，根據以上實現原理分析，我們創建一個高度的改變動畫通用組件CollapseTransition.vue。該組件非常簡單，僅需30多行代碼。我幾乎每行代碼都有注釋，大家應該能看懂吧？

以上就是實現高度的改變動畫的通用組件源碼，童鞋們理解了嗎？是不是非常簡單？現在，我們實現摺疊面板組件。使用過element-ui這樣的UI庫的童鞋們應該都知道，摺疊面板是由兩個組件摺疊面板Collapse和摺疊面板項CollapseItem組合而成；

現在，我們先實現CollapseItem.vue組件。為了節省篇幅，我將源碼中的空行全部去掉了，縮進比較規範，自認為可讀性還行；源碼如下，一共30多行，我直接在源碼中添加了注釋，就不過多解釋了。

這是CollapseItem.vue組件的樣式。

現在，我們實現Collapse.vue組件。該組件仍然只有30多行，大家理解起來應該很輕鬆，我就直接在源碼里添加註釋作為講解了；

以上就是摺疊面板組件的實現。包括摺疊動畫組件，一共僅需不到150行代碼，是不是非常簡單？童鞋們都理解了嗎？不管有什麼疑問，童鞋們都可以問我。感謝閱讀！