В этом уроке я покажу вам, как можно создать плагин в Vue.js. Прежде чем приступить к изучению этого урока, необходимо иметь некоторый опыт работы с Javascript и/или frontend-разработкой.
Если вы не знаете, что такое Vue.js, вы можете узнать больше здесь. TLDR: Это прогрессивный Javascript-фреймворк, который можно использовать для создания высокоинтерактивных веб-приложений. Vue.js легкий, производительный, очень хорошо поддерживается и документируется, что делает его хорошим выбором для создания сложных современных веб-приложений в 2017 году и в будущем.
Плагины
Vue.js позволяет нам создавать плагины для добавления многократно используемой функциональности в приложение. Плагин обычно содержит одно или несколько следующих элементов:
- Глобальные активы – например, директивы, фильтры, переходы и т.д.
- Глобальные свойства или методы
- Методы экземпляра
- Опции компонента (например, миксин компонента, переопределяющий метод mounted()).
Когда плагин применяется к приложению Vue.js, мы можем получить доступ к активам плагина из всех компонентов приложения. Плагины также дают нам, разработчикам, отличный способ упаковать и поделиться нашим кодом и классной функциональностью с другими разработчиками в экосистеме.
Синтаксис плагина
Плагин в Vue.js – это просто объект Javascript, который реализует метод установки. Vue.js ищет этот метод, когда мы вызываем Vue.use(Plugin).
FieldFormatter.install = (Vue, options) => {
/* Plugin functionality */
}Метод install() принимает объект Vue в качестве первого параметра и объект options в качестве второго параметра. Мы можем предоставить эти опции при вызове Vue.use():
Vue.use(Plugin, {
somePluginOption: true,
someOtherPluginOption: false,
})Используя опции, мы можем настроить использование плагина в соответствии с конкретными потребностями пользователя.
В примере ниже мы создадим директиву, которая ограничивает количество символов в текстовом узле (т.е. <p>, <div>, <h3> и т.д.) до заданного значения. Эта директива просто заменит текст в узле на сокращенную версию и добавит ссылку в конце, которая позволит нам увидеть остальную часть содержимого при нажатии на нее. Подобную функциональность мы можем наблюдать в приложениях социальных сетей, которые позволяют постепенно раскрывать содержание, например, длинного комментария.
Как вы можете себе представить, мы, вероятно, захотим иметь доступ к этой директиве во всех наших компонентах и, возможно, упаковать ее красивым образом с другим кодом, связанным с рендерингом. Это хороший пример того, как использование плагинов в вашем проекте может быть полезным.
Мы сделаем это, как показано ниже:
// - src/plugins/fieldFormatter.js
const FieldFormatter = {
install(Vue, options) {
Vue.directive('limit-characters', {
bind(el, binding, vnode, oldVnode) {
const limit = binding.value || 100;
const original = el.innerHTML;
const summary = original.slice(0, limit);
const expandLink = document.createElement('a');
const collapseLink = document.createElement('a');
expandLink.innerHTML = 'Read more...';
collapseLink.innerHTML = 'Read less...';
expandLink.style.textDecoration = collapseLink.style.textDecoration = 'underline';
expandLink.style.cursor = collapseLink.style.cursor = 'pointer';
const expandNode = () => {
el.innerHTML = `${original} `;
el.appendChild(collapseLink);
}
const collapseNode = () => {
el.innerHTML = `${summary}... `;
el.appendChild(expandLink);
}
expandLink.addEventListener('click', expandNode);
collapseLink.addEventListener('click', collapseNode)
collapseNode();
}
})
},
};
export default FieldFormatter;Здесь мы видим простой плагин с одной директивой limit-characters, которая ограничивает количество символов в строке. Мы установим значение этого ограничения для текстового узла с помощью v-limit-characters=”characterLimit”. characterLimit – это переменная в нашем объекте данных, но мы также можем использовать вместо нее литеральное число.
Обратите внимание, что этот пример не готов к “производству”. Он сломается, если ограничение не будет задано числом.
Чтобы установить наш недавно созданный плагин, в вашем входном файле (обычно это src/main.js при инициализации проекта с помощью vue-cli) установите плагин с помощью Vue.use()
// - src/main.js import Vue from 'vue'; import FieldFormatter from './plugins/fieldFormatter'; ... Vue.use(FieldFormatter); ...
Теперь мы можем использовать эту директиву в наших компонентах следующим образом:
// - src/components/Report.vue
<template>
<div class="report">
<div class="report-summary" v-for="report in reports" key="report.id">
<h1>{{ report.title }}</h1>
<p v-limit-characters="defaultCharacterLimit">{{ report.description }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
reports: [/* Array of Reports */],
defaultCharacterLimit: 100,
};
},
};
</script>Расширение нашего примера
Давайте расширим наш предыдущий пример и создадим простой метод экземпляра, который может фильтровать массив объектов на основе параметра запроса объекта. Этот метод будет просто перебирать и сравнивать, чтобы увидеть, какие объекты соответствуют шаблону объекта запроса.
// - src/plugins/fieldFormatter.js
const FieldFormatter = {
install(Vue, options) {
...
Vue.prototype.$filter = (dataset, query) => {
return dataset.filter(item => {
const queryKeys = Object.keys(query);
for(let i = 0; i < queryKeys.length; i++) {
const key = queryKeys[i];
if(query[key]!== '' && !(key in item)) {
return false;
}
if (item[key] !== query[key]) {
return false;
}
}
return true;
});
};
...
}
}
export default FieldFormatter;Затем мы можем использовать этот метод экземпляра в нашем компоненте следующим образом:
// - src/components/FilteredTableDisplay.vue
<template>
<div class="filtered-table-display">
<div class="filters">
<input type="text" v-mode="filter.param1"/>
<input type="text" v-mode="filter.param2"/>
<input type="text" v-mode="filter.param3"/>
</div>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>param1</th>
<th>param2</th>
<th>param3</th>
</tr>
</thead>
<tr v-for="row in filteredData">
<td>{{ row.param1 }}</td>
<td>{{ row.param2 }}</td>
<td>{{ row.param3 }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
filter: {
param1: 'a',
param2: 'b',
param3: 'c'
},
rawData: [
{
param1: 'c',
param2: 'd',
param3: 'e',
},
{
param1: 'c',
param2: 'a',
param3: 'd',
},
{
param1: 'e',
param2: 'a',
param3: 'c',
}
],
}
},
computed: {
filteredData() {
return this.$filter(this.rawData, this.filter);
},
},
}
</script>Здесь мы используем метод $filter(), который мы создали в нашем плагине, как если бы мы вызывали любой обычный метод компонента. Мы можем использовать наш метод в вычисляемом свойстве для фильтрации данных на основе объекта this.filter.
Резюме
Плагины предоставляют отличный способ обмена кодом между компонентами и, что более важно, обмена кодом с другими разработчиками. Есть несколько плагинов для Vue, которые вы, возможно, уже использовали, и вы можете найти еще больше замечательных плагинов здесь. Я использую много плагинов и поэтому обычно ценю то, как авторы различных плагинов строят свой код, чтобы сделать его удобным для разработчиков.
Надеюсь, это вдохновит вас на создание собственных плагинов и использование их в ваших будущих проектах Vue.js.
Более подробную информацию о плагинах можно найти в документации Vue.js.
Оригинал: “https://www.codementor.io/@chidieberennadi558/how-to-create-a-plugin-in-vue-js-ehdmg125e”