Como comecei a me envolver no VUE, a implementação de todas as referências selecionadas ao método de implementação em Zhihu:
1. Obtenha dados do servidor e defina o atributo verificado para cada item
2. Calcule a quantidade selecionada SelectCount. Se a quantidade selecionada for igual ao número de selectItems, selecione todos os selecionados
3. Ao selecionar tudo, defina o atributo verificado de cada item como true e, ao selecionar inversamente, defina -o como falso.
4. Toda vez que a propriedade das alterações do SelectItems, o item verificado é colocado na matriz CheckedGroups.
A seguir, o código de implementação:
// Selecione todos os dados: function () {return {selectItems: [], // Dados obtidos no servidor}}, computados: {// Selecione todo o modelo vinculado à caixa de seleção Selectall: {get: function () {return this.selectCount == this.selectIms.length; }, set: function (value) {this.selectItems.foreach (function (item) {item.checked = value;}); valor de retorno; }}, // a quantidade selecionada SelectCount: {get: function () {var i = 0; this.SelectItems.ForEach (function (item) {if (item.checked) {i ++;}}); retornar i; }}, // A matriz selecionada CheckedGroups: {get: function () {var checkedGroups = []; this.SelectItems.ForEach (function (item) {if (item.checked) {checkedGroups.push (item);}}); Retorno CheckedGroups; }}}Este método não é muito conveniente de usar. Primeiro de tudo, é difícil reutilizar. Toda vez que você deseja usá -lo, você precisa escrever calculado. Em segundo lugar, o SelectAll, o CheckedGroups e o SelectItems são todos fixos e não são muito flexíveis.
Portanto, neste projeto, usei a instrução VUE para reimplementar a função de selecionar tudo. A idéia de diretiva é realmente semelhante à da calculada. Vamos começar com o código:
Exportar padrão {'check -al': {twoway: true, params: ['checkData'], bind () { / ** - se o atributo verificado de todas as listas for verdadeiro, selecione a caixa de verificação, caso contrário, a caixa de seleção não estiver selecionada* / this.vm. $ watch (estas item.Checked)) {this.set (true); }, // update (checkAll) Quando o checkAll alterações { / ** - Se a caixa de verificação for selecionada, todas as propriedades verificadas da lista serão convertidas em verdadeiras, caso contrário elas serão convertidas em false* / if (checkall) {this.vm [this.params.checkdata] .ForEach ((item) => {ite. } else {this.vm [this.params.checkdata] .foreach ((item) => {item.checked = false;}); }},},};Chamado:
<entrada de entrada = "Caixa de seleção" v-model = "checkall" v check-all = "checkall" check-data = "checkData"> <ul> <li v-for = "item em checkdata"> <input type = "caixa de seleção" v-model = "item.checked"> {{ite.text}} </Li>Vamos falar sobre as vantagens de usar isso:
1. Fácil de usar. Basta escrever v-check-all e check-data quando necessário.
2. Os nomes de modelo e matriz selecionados podem ser personalizados e qualquer nome pode ser usado. Se você não quiser ligar para o CheckAll e CheckallData, também pode ligar para as matrizes e o CheckData DatafromServer.
Na instrução, especifique o Twoway para true, você pode usar this.set(value) para definir o valor do checkAll e usar params para receber o valor da propriedade Valor CheckData no elemento de instrução de ligação, que é a matriz para operar.
Use this.vm para obter o contexto da diretiva de uso, ligue para $watch do contexto para ouvir as alterações no CheckData. Se todo o checkData for selecionado, defina o checkAll como true, caso contrário, defina o checkAll como falso.
Quando o valor da instrução (checkAll) for alterado, se true, defina o atributo verificado de checkData como true, caso contrário, ele será falso. Neste ponto, um comando selecionado é concluído.
Ao fazer essa seleção todas as instruções, originalmente eu queria usar os paramwatchers para ouvir alterações de checkData, mas descobri que, quando o CheckData mudar, o retorno de chamada dos paramwatchers não será acionado. Mais tarde, olhei para o código -fonte e descobri que os paramwatchers realmente chamavam de $watch , mas ele não suporta detecção profunda:
Directive.prototype._setupPparamWatcher = function (chave, expressão) {var self = this; var chamado = false; var UNPATCH = (this._scope || this.vm). $ relógio (expressão, function (val, OldVal) {self.params [key] = val; // Como estamos no modo imediato, // chamam apenas os chamados de chamadas de chamadas (self.Parwathwathwathwathwathwatchs, se não forem a primeira atualização. OldVal);Resumir
O acima é o conteúdo inteiro deste artigo. Se houver algo errado, por favor me dê alguns conselhos. Espero que o conteúdo deste artigo seja útil para todos.