用Vue實現乙個全選指令

2022-07-03 16:33:12 字數 1455 閱讀 4008

下面為實現**:

//全選

data: function()

},computed: ,

set: function(value) );

return value;}},

//選中的數量

selectcount:

});return i;}},

//選中的陣列

checkedgroups:

});return checkedgroups;}}

}

這種方法用起來不太方便,首先是很難復用,每次要用到的時候都需要寫一次computed,其次是selectall、checkedgroups、selectitems都已經固定,不太靈活。

所以在這次專案中,我用vue的指令重新實現了全選的功能,directive的思路其實跟computed差不多,先上**:

export default  else 

}, );

},// checkall發生更改時

update(checkall) );

} else );}},

},};

呼叫:

先說說這樣用的優點:

1、方便使用,在需要用的地方,寫上v-check-all指令和check-data就可以

2、全選的model和陣列名可以定製,用什麼名字都可以,全選的model不想叫checkall叫checkalldata也可以,陣列不想叫checkdata叫datafromserver也可以。

在指令中,指定twoway為true,就可以用this.set(value)來設定checkall的值,用params接收繫結指令元素上的屬性值checkdata,也就是需要操作的陣列。

用this.vm獲取使用指令的上下文,呼叫上下文的$watch來監聽checkdata的變化,如果checkdata全部選中,則設定checkall為true,否則設定checkall為false。

當指令值(checkall)發生變化,如果為true,則將checkdata的checked屬性都設為true,否則為false。至此,乙個全選的指令就完成了。

在做這個全選指令的時候,本來想用paramwatchers來監聽checkdata的變化的,但是發覺checkdata變動時,並不會觸發paramwatchers的**,後來看了一下原始碼才發現,paramwatchers其實也是呼叫了$watch,但是不支援深度檢測:

directive.prototype._setupparamwatcher = function (key, expression) 

} else

}, );(this._paramunwatchfns || (this._paramunwatchfns = )).push(unwatch);

};

3 28 如何實現乙個指令 ?

前面的話 前端日問,鞏固基礎,不打烊!解答基本用法 使用vue.directive 來註冊自定義指令 全域性註冊 比如制定乙個懶載入指令v lazyload vue.directive lazyload 指令選項 實現乙個懶載入指令 vue 懶載入 引入節流函式 import from util e...

實現乙個最小版本vue(一)之Vue

功能 實現思路 通過屬性儲存選項的資料 把data中的成員轉化稱getter和setter,注入到vue例項,方便後續使用 呼叫observer物件,監聽資料變化 呼叫compiler物件,解析指令和差值表示式。compiler實現 class vue this.data options.data ...

Vue 實現乙個分頁元件

實現分頁元件要分三個部分 樣式,邏輯,和引用 首先新建乙個vue檔案用來承載元件內容 第一步 構建樣式 第二步 編寫邏輯 第三步 引用元件 1.在父元件中引入並註冊 components 2.在data下宣告三個變數 total 0,記錄總條數 display 10,每頁顯示條數 current 1...