Как да създадете избран потребителски списък с помощта на Multiselect за Vue.js

Дамян Дулиш, член на екипа на Vue.js и авторът на Vue-Multiselect, казва, че Vue-Multiselect е „най-пълното решение за избор на Vue.js“ и трябва да се съглася с него.

Наскоро трябваше да създам функция за нашия продукт във Fliplet, която позволява на потребителите да избират ресурси за вграждане в своите приложения. Подобно на това, как CodePen го прави, потребителят може да избере от списък на предварително дефинирани ресурси и / или да въведе за търсене на ресурси, доставени от cdnjs.com.

Пример Vue-Multiselect

Имайки предвид тази функционалност и имайки предвид, че нашият продукт е създаден с помощта на Vue.js, аз потърсих избран компонент на полето, създаден за Vue.js (не исках да отделям време за изграждане на моя собствен) и аз намерих доста, опитах двойка, докато не пробвах Vue-Multiselect и бях изумен от възможностите. Можете да проверите уебсайта, но в основата си е избрано поле, което позволява единичен и многократен избор, търсене, маркери и много други - повярвайте ми, наистина е добре. Затова днес реших да създам бърз урок, който да вземе това поле за избор и с малко код ще създадем персонализиран списък от избрани ресурси, заредени от cdnjs.com.

Какво ще постигнем

Приготвяме се да започнем

На първо място, ще предположа, че знаете пътя си около Vue.js и че вече имате създадена и работеща среда с Vue.js.

Ще се нуждаете от следните ресурси, инсталирани във вашия проект:

  • Vue.js
  • Vue-Групов
  • Vue-Ресурс
  • Шрифт страхотно

Инсталиране на Vue.js - Линк тук
NPM е препоръчителният метод за инсталиране, но не се колебайте да го инсталирате по различен метод.

npm инсталирате vue --save

Инсталиране на Vue-Multiselect - Линк тук
NPM е препоръчителният метод за инсталиране, но не се колебайте да го инсталирате по различен метод.

npm инсталирайте vue-multiselect --save

Инсталиране на Vue-Resource - Линк тук
NPM е препоръчителният метод за инсталиране, но не се колебайте да го инсталирате по различен метод.

npm инсталирайте vue-resource --save

Инсталиране на шрифта Awesome - Линк тук
Изтеглете файловете и ги добавете към вашия проект. Това не е задължително, включително, защото използвах в моя пример.

Сега, когато имате всички компоненти, необходими за този урок, нека да продължим.

Създайте компонента Vue

Първо ще настроим Vue и ще включим компонента Multiselect.

Vue

ново Vue ({
  компоненти: {
    Мултиселекция: window.VueMultiselect.default
  }
  данни: {
    настроики: [],
    optionsProxy: []
  }
}). $ Планината ( "# приложение")

Сега HTML, ще включим маркирането за полето за избор на мултиселекция.

HTML

  

По-горе можете да видите, че полето Мултиселекция вече има някои реквизити. Можете да видите пълния списък с налични реквизити в документацията, но ние ще добавяме повече и ще обясня какво ще правят новите и защо са важни.

За сега да ви обясня най-важните, които са следните:

 
  • опции - Това съдържа масива от елементи, които се показват, когато потребителите щракнат върху полето за избор
  • стойност - Това ще съдържа избраните елементи в масив

Сега, когато знаете целта на тези два реквизита, нека да разгледаме опората на данните на Vue. Можете да видите, че сме дефинирали две променливи като празни масиви:

 
-----
данни: {
  настроики: [],
  optionsProxy: []
}
  • опции - Трябва да съдържа масив от елементи, които да се показват, когато потребителите щракнат върху полето за избор
  • optionsProxy - Това ще бъде попълнено с избраните от потребителя елементи

Опциите не трябва да са празен масив, но в този урок ще го запълваме с ресурси от cdnjs.com, така че засега ще го държим празен.

Ако сте следвали заедно, сега трябва да имате нещо подобно:

Създайте потребителски списък, използван за показване на избраните ресурси

Едно от най-ценните неща на Multiselect е, че списъкът с елементи може да бъде масив от обекти и тези обекти могат да съдържат няколко клавиша, които можете да използвате за показване на данни, след като потребителят е избрал такъв.

Нека разгледаме маркирането на списъка с избрани ресурси.

      <шаблон v-for = "(ресурс, индекс) в избраниРесурси">     
  •       
            
               {{resource.name}}            {{resource.version}}                  
               {{resource.description}}                  
               {{resource.latest}}                       
                           

Добавете този блок от HTML вътре в

след маркирането на мултиселекция.

  • име-ресурс - Това отпечатва името на ресурса
  • описание на ресурса - Това разпечатва описанието на ресурса
  • resource-version - Това отпечатва версията на ресурса
  • resource-latest - Това отпечатва URL адреса на ресурса
  • RemoveDependency - Изпълнете функция за премахване на ресурс от списъка

Ето и малко CSS, за да направите този списък да изглежда добре:

.resources-list {
  марж-отгоре: 15px;
  подплънки: 0;
  списък-стил: няма;
}
.resources-list li {
  дисплей: гъвкав;
  подравняване-елементи: център;
  минимална височина: 50px;
  подплънки: 10px 40px 10px 0;
  граница-дъно: 1px твърда rgba (51, 51, 51, 0.1);
  позиция: относителна;
}
.resources-list li: last-child {
  граница-дъно: няма;
}
.resources-list li .resource-title {
  размер на шрифта: 1em;
  цвят: # 333;
}
.resources-list li .version {
  непрозрачност: 0,7;
  марж-ляво: 5px;
  размер на шрифта: 75%;
}
.resource-list li .resource-description,
.resources-list li .resource-url {
  размер на шрифта: 0.8em;
  цвят: # 999;
  марж-отгоре: 5px;
}
.resources-list li .resource-url {
  марж-топ: 0;
}
.resources-list li .resource-description: празен {
  дисплей: няма;
}
.resources-list li .delete-control {
  позиция: абсолютна;
  вдясно: 0;
  ширина: 40px;
  подравняване на текст: център;
  цвят: # 999;
  курсор: указател;
}
.resources-list li .delete-controls: задръжте,
.resources-list li .delete-controls: фокус {
  цвят: червен;
}

Сега, когато имаме всички HTML и CSS, трябва да имате нещо подобно:

Актуализирайте Multiselect с важни реквизити

Трябва да добавим още няколко реквизита към Multiselect, за да постигнем това, което искаме, така че нека да го направим:

 
  • @ input - Изпълнява функция, която се задейства, когато потребителят избере елемент от списъка
  • @ search-change - Изпълнява функция, това се задейства, когато потребителят започне търсене - Това работи само когато търсенето е активно
  • searchable - Приема булева информация и прави списъка с избрани полета за търсене
  • множество - Приема булева информация и позволява на потребителите да избират множество елементи от списъка
  • close-on-select - Приема булева информация и принуждава списъка да се затвори, когато потребителят избере елемент - Използвайте това, което искате.
  • custom-label - Шаблонен низ, който ще бъде представен като елемент от списъка
  • зареждане - Приема булева информация и ако е вярна, показва зареждане на спинер

Сега, когато обновихте своя мултиселекция и разберете какво добавихме и за какво, нека актуализираме нашия компонент Vue.

Актуализирайте компонента Vue

Данни

Да започнем с най-лесните неща, нека актуализираме нашите променливи в опората на данните. Ще добавим още две:

данни: {
  настроики: [],
  optionsProxy: [],
  selectedResources: [],
  showLoadingSpinner: false
}
  • selectedResources - Това ще бъде масивът от избрани елементи от списъка
  • showLoadingSpinner - Това ще задейства зареждащия завъртач в мултиселекцията

методи

Сега нека добавим нашите мениджъри на събития. Ще добавим 5 обработващи събития, но ще ги разгледаме поотделно, но ето пълният списък.

методи: {
  customLabel (опция) {
    върнете `$ {option.name} - $ {option.version}`
  }
  updateSelected (стойност) {
    value.forEach ((ресурс) => {
      // Добавя избрани ресурси за масив
      this.selectedResources.push (ресурс)
    })
    // Изчиства избрания масив
    // Това предотвратява показването на маркерите
    this.optionsProxy = []
  }
  cdnRequest (стойност) {
    това. $ http.get ( `https://api.cdnjs.com/libraries?search=$ {стойност} & полета = версия, description`)
      .then ((отговор) => {
        // получаване на данни за тялото
        this.options = []
        response.body.results.forEach ((object) => {
          this.options.push (обект)
        })
        this.showLoadingSpinner = false
      }, (отговор) => {
        // извикване на грешка
      })
  }
  searchQuery (стойност) {
    this.showLoadingSpinner = true
    // ВЗЕМЕТЕ
    this.cdnRequest (стойност)
  }
  RemoveDependency (индекс) {
    this.selectedResources.splice (индекс, 1)
  }
}

Нека да влезем във всеки един от обработващите събития:

Персонализирани етикети

customLabel (опция) {
  върнете `$ {option.name} - $ {option.version}`
}

Този ще върне персонализирания етикет, който да се показва в списъка на мултиселекцията, ощипвайте го както искате. Този пример изглежда така:

Добавяне към списъка по избор

updateSelected (стойност) {
  value.forEach ((ресурс) => {
    // Добавя избрани ресурси за масив
    this.selectedResources.push (ресурс)
  })
  // Изчиства избрания масив
  // Това предотвратява показването на маркерите
  this.optionsProxy = []
}

Това ще се задейства всеки път, когато потребителят избере ресурс от списъка. В тази малка функция добавяме избрания елемент по стойност към масива selectedResources, който беше дефиниран по-рано.

this.optionsProxy = []

След това изчистваме масива с опцииProxy, така че избраният елемент да не остава видим в полето Мултиселекция като маркер. Не се колебайте да коментирате този ред, за да видите как изглежда в потребителския интерфейс.

CDN JS заявка

cdnRequest (стойност) {
  това. $ http.get ( `https://api.cdnjs.com/libraries?search=$ {стойност} & полета = версия, description`)
    .then ((отговор) => {
      // получаване на данни за тялото
      this.options = []
      response.body.results.forEach ((object) => {
        this.options.push (обект)
      })
      this.showLoadingSpinner = false
    }, (отговор) => {
      // извикване на грешка
    })
}

В тази функция правим искане към cdnjs.com за извличане на списък с ресурси въз основа на това, което потребителят е въвел.

За това трябва да изчистим съществуващия списък чрез this.options = [] и след това да повторим всеки резултат и да ги добавим в списъка с помощта на цикъл forEach ().

response.body.results.forEach ((object) => {
  this.options.push (обект)
})

Ние също деактивираме завъртача с this.showLoadingSpinner = false

Има и обратен сигнал за грешка, който можете да използвате, ако искате.

Списък за търсене

searchQuery (стойност) {
  this.showLoadingSpinner = true
  // ВЗЕМЕТЕ
  this.cdnRequest (стойност)
}

Тази функция се задейства, когато потребителят търси в мултиселекцията.

Първо инициализираме завъртача, в случай че заявката за търсене отнеме известно време, с this.showLoadingSpinner = true. След това изпълняваме функцията cdnRequest, която имахме поглед по-горе, като я предаваме стойността, която потребителят въведе.

Премахване на ресурс от потребителски списък

RemoveDependency (индекс) {
  this.selectedResources.splice (индекс, 1)
}

И накрая, ние създаваме функцията за премахване на ресурси от потребителския списък. Това се стартира, когато потребителят кликне на кръста в потребителския интерфейс, който сме задали в HTML.

  

Когато потребител кликне на кръста, ние вземаме индекса на ресурса в масива и го премахваме от this.selectedResources.splice (индекс, 1).

Списък на населението при натоварване

Последното нещо, което трябва да направим, е да попълним списъка с ресурси, когато потребителите зареждат страницата, за това ще използваме създадената () кука за жизнения цикъл, за да запитваме cdnjs.com с празен низ.

създаден () {
  const стойност = ''
  this.cdnRequest (стойност)
}

Ако го прекарате празен низ, той ще върне всички ресурси в cdnjs.com (около 3000+), можете да зададете различен стандарт по подразбиране, дори не можете да питате cdnjs.com и да имате собствен статичен списък. Ако направите това, просто не забравяйте, че трябва да добавите списък към този.опции.

Ако сте следвали заедно, сега трябва да имате следното:

заключение

Както можете да видите, с малко кодиране можете да създадете невероятни интерфейси, използвайки този малък компонент Vue.

Надявам се да ви е харесал този урок, забавлявах се да го създадете, моля, оставете в коментарите как сте го намерили.

До следващия път продължавайте да решавате проблеми!