Поскольку я только начал участвовать в VUE, реализация всех выбранных ссылок на метод реализации на Zhihu:
1. Получить данные с сервера и установить проверенный атрибут для каждого элемента
2. Рассчитайте выбранное количество SelectCount. Если выбранная величина равна количеству SelectItems, выберите All SelectAll
3. При выборе всех установите проверенный атрибут каждого элемента в True, и при выборе обратного выбора установите его на false.
4. Каждый раз, когда свойство SelectItems изменяется, проверенный элемент помещается в контрольные группы массива.
Ниже приведено код реализации:
// Выберите All Data: function () {return {selectItems: [], // Данные, полученные с сервера}}, вычисляют: {// Выберите все модели, связанную с флажком Selectall: {get: function () {return.selectcount == this.selectitems.length; }, set: function (value) {this.selectitems.foreach (function (item) {item.checked = value;}); возвращаемое значение; }}, // Выбранное количество SelectCount: {get: function () {var i = 0; this.selectitems.foreach (function (item) {if (item.checked) {i ++;}}); вернуть я; }}, // Выбранные массивы CheckedGroups: {get: function () {var checkedGroups = []; this.selectitems.foreach (function (item) {if (item.checked) {fectedGroups.push (item);}}); возврат проверенных групп; }}}Этот метод не очень удобен в использовании. Прежде всего, это трудно повторно использовать. Каждый раз, когда вы хотите его использовать, вам нужно писать вычисленные. Во -вторых, SelectAll, FectedGroups и SelectItems все фиксированные и не очень гибкие.
Поэтому в этом проекте я использовал инструкцию VUE для повторного внедрения функции выбора всех. Идея директивы на самом деле похожа на идею вычисленного. Начнем с кода:
Экспорт по умолчанию {'check -all': {twoway: true, params: ['checkdata'], bind () { / ** - если проверенный атрибут всех списков верно, выберите флажок все, в противном случае флажок не выбран* / this.vm. item.cecked)) {this.set (true); }, // Обновление (CHACKALL) При изменении CHACKALL { / ** - Если выбран все флажок, все проверенные свойства списка преобразуются в TRUE, в противном случае они преобразуются в false* / if (checkall) {this.vm [this.params.checkdata] .foreach ((item) => {item.checked =}); } else {this.vm [this.params.checkdata] .foreach ((item) => {item.checked = false;}); }},},};Называется:
<input type = "fackbox" v-model = "checkall" v-check-all = "checkall" check-data = "checkData"> <ul> <li v-for = "item In checkData"> <input type = "checkbox" v-model = "item.cecked"> {item.text} </li> </ul>Давайте поговорим о преимуществах использования этого:
1. Легко в использовании. Просто напишите команду v-check-all и check-data где это необходимо.
2. Выбранные имена модели и массива могут быть настроены, и можно использовать любое имя. Если вы не хотите звонить в Checkall и CheckallData, вы также можете позвонить в массивы и проверку DataFromServer.
В инструкции указать Twoway to True, вы можете использовать this.set(value) для установки значения чек -лла и использовать параметры для получения проверки значения свойства на элементе инструкции по привязке, который является массивом для работы.
Используйте this.vm , чтобы получить контекст Директивы об использовании, вызовите $watch контекста, чтобы прослушать изменения в чекдате. Если выбран все чекдаты, установите Checkall в True, в противном случае установите Checkall в false.
При изменении значения инструкции (чек), если это правда, установите проверенный атрибут CheckData на TRUE, в противном случае он FALSE. На этом этапе выбранная команда завершена.
При выполнении этого выбора все инструкции я изначально хотел использовать Paramwatchers для прослушивания изменений CheckData, но я обнаружил, что при изменении CheckData обратный вызов ParamWatchers не будет запускаться. Позже я посмотрел на исходный код и обнаружил, что Paramwatchers фактически называют $watch , но он не поддерживает глубокое обнаружение:
Directive.prototype._SetUpparamWatcher = function (key, Expression) {var self = this; var называется = false; var ultatch = (this._scope || this.vm). $ watch (Expression, function (val, oldval) {self.params [key] = val; // Поскольку мы находимся в немедленном режиме, // только вызовут обратные вызовы параметра, если это не первое обновление. if (call) {var cb = self.paramwatchers && self.paramwatchers [key); Val, OldVal);Суммировать
Вышеуказанное - все содержание этой статьи. Если что -то не так, пожалуйста, дайте мне несколько советов. Я надеюсь, что содержание этой статьи будет полезно для всех.