Ставьте лайк и смотрите снова, формируйте привычку
эта статья
GitHubGitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.
Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.
Прямо в точку
Демонстрационный адрес:woo woo woo.dragon study.club/v UE-ой гость-слишком жарко…
адрес гитхаба:GitHub.com/QQ449245884…
Предыстория проекта
Компания должна сделать это из-за недавнего согласования OKR, OKR, которое имеет вид, ряд структур, как показано ниже:
Возьмем, к примеру, мой Xiaozhi, если кто-то выравнивает мой KR, поместите его справа от меня, если я выравниваю чей KR, поместите его слева от меня, аналогично отношениям начальник-подчиненный, поэтому здесь я использую два дерева для представления отношения между левым и правым.
После долгих поисков на GitHub таких компонентов не так много, и нет компонентов, отвечающих потребностям бизнеса, поэтому я решил собрать свои собственные колеса!
анализировать
- Поскольку это дерево, каждый узел должен быть одним и тем же компонентом.
- Узлы вложены ниже узлов, поэтому компонент узла должен быть рекурсивным компонентом.
- Все дерево должно иметь глобальное состояние, которое управляет значениями, переданными извне, а также свойствами и методами, предоставленными извне.
- Каждый узел фазового дерева также должен иметь соответствующее состояние узла для управления собственными атрибутами и методами.
Реализовать идеи
рекурсивный компонент
Для рекурсивных компонентовОфициальная документация VueВот что он говорит:
Компонент может рекурсивно вызывать себя в пределах своего шаблона. Однако это можно сделать только в том случае, если у него есть опция имени.
Здесь я используюOkrTreeNode.vueДля представления узлов дерева, использующего такую рекурсию, ниже приводится краткое описание компонента:
<template>
<OkrTreeNode
v-for="child in leftChildNodes"
:node="child"
></OkrTreeNode>
</template>
export default {
name: 'OkrTreeNode'
}
При использовании рекурсивных компонентов следует отметить два момента: в компонентах должны быть компоненты.nameи условие завершения рекурсии.
состояние дерева
Для состояния дерева я использую класс TreeStore для представления метода реализации, в основном относящегося к компоненту дерева в ElementUI. Атрибуты в TreeStore представляют плюсы или атрибуты или события и методы, которые я передаю извне, и все они управляются в этом объекте Конкретный код можно увидеть здесь:
состояние узла
Для состояния узла я использую объект Node для его представления Конкретный код можно увидеть по следующему адресу, поэтому я не буду его здесь раскрывать:
Демо
Основное использование
Отображение основной древовидной структуры, по умолчанию вертикальное.
горизонтальное направление
Будуdirectionсвойство установлено наhorizontalпоказать горизонтальную ориентацию.
Можно ли расширить узел
Узлы могут быть расширены, по умолчанию не расширены, черезshow-collapsableУзел настроек можно расширить.
Все узлы развернуты по умолчанию
установивdefault-expand-allРазвернуть все узлы по умолчанию, этот параметр доступен только вshow-collapsableдляtrueдействительный, когда
Некоторые узлы Дерева могут быть настроены на расширение по умолчанию.
пройти черезdefault-expanded-keysЗадает расширенный узел по умолчанию. Следует отметить, что в это время необходимо установитьnode-key, значением которого является имя поля в данных узла, уникальное для всего дерева.
стиль узла
Вы можете установить стиль по умолчанию и выбранный стиль узла самостоятельно.
пройти черезlabel-class-nameУстановите стиль узла, символ поддержки и режим функции. пройти черезcurrent-lable-class-nameЗадает стиль, выбранный текущим узлом, поддерживает символьные и функциональные методы.
Пользовательский контент узла
Вы можете установить содержимое узла самостоятельно. пройти черезrender-contentРендеринг содержимого узла.
Анимация узла
Этот компонент имеет встроенные различные анимации перехода и может использоваться напрямую. Анимация перехода по умолчаниюokr-zoom-in-center, см. документацию по API внизу, чтобы узнать о других анимациях.
Чтобы использовать анимацию, вам нужно передатьaniamteсвойства, черезanimateNameОпределяет тип анимации, анимация по умолчаниюokr-zoom-in-center.
Модель представления OKR
Внешний вид этого режима предназначен для достижения того же эффекта, что и вид, отображаемый Feishu OKR, поэтому в режиме дерева он расширяется на два поддерева слева и справа.
Должен быть установлен режимonlyBothTree, и черезleftDataСтруктура, представляющая левый субномер.
Контент пользовательского узла в режиме отображения OKR
Как и в случае с обычным деревом выше, мы также можем настроить содержимое узла с помощью пользовательских функций рендеринга.
пройти черезrender-contentВизуализируйте содержимое узла, возвращаяisLeftChildОпределите, является ли это деревом слева.
Фильтрация узлов (не расширяемая) и поддерживаемые методы
Фильтровать узлы дерева по ключевому слову.Когда узел необходимо отфильтровать, вызовите метод filter экземпляра дерева с ключевым словом в качестве параметра. Следует отметить, что в это время необходимо установитьfilter-node-method, которая является функцией фильтра.
Фильтрация узлов (можно расширить)
Отфильтруйте узлы дерева по ключевым словам и вызовите экземпляр дерева.filterметод, параметр является ключевым словом. Следует отметить, что в это время необходимо установитьfilter-node-method, которая является функцией фильтра.
Поддерживаемые события (не расширяемые)
Поддерживаемые события, которые нельзя расширить, — это щелчок узла и щелчок правой кнопкой мыши.
Поддерживаемые события (можно расширить)
События, поддерживаемые при расширении: щелчок узла, щелчок правой кнопкой мыши, раскрытие узла и закрытие узла.
Attributes
| параметр | иллюстрировать | Типы | необязательное значение | По умолчанию |
|---|---|---|---|---|
| data | Данные дисплея | array | — | — |
| direction | направление дерева | String | horizontal / vertical | vertical |
| onlyBothTree | Левая и правая сторона в корневом узле под деревом для расширения, этот режим действителен только в горизонтальном направлении, и должен предоставлять данные flowdata | Boolean | — | false |
| leftData | Отображение данных левого дочернего элемента, это свойство включено только в режиме BothTree. | array | — | — |
| label-width | Ширина узла по умолчанию равна автоматической ширине. Если label-width имеет тип number, единицей измерения являются px; если label-width имеет тип string, ширина будет установлена равной значению style.width узла, а ширина узла будет контролироваться внешний стиль | string/number | — | — |
| label-height | Высота узла по умолчанию равна автоматической высоте. Если label-height имеет тип number, единицей измерения являются px; если label-height имеет тип string, высота будет установлена равной значению style.height узла, а высота узла будет контролироваться внешний стиль | string/number | — | — |
| label-class-name | Метод обратного вызова узла className, вы также можете использовать строку для установки фиксированного className для всех узлов | Function(node)/String | — | — |
| current-lable-class-name | Стиль текущего выбранного узла | Function(node)/String | — | — |
| show-collapsable | Можно ли расширить узел | Boolean | — | false |
| default-expand-all | Следует ли разворачивать все узлы по умолчанию, этот параметр действителен только в том случае, если для show-collapsable установлено значение true. | Boolean | — | false |
| render-content | Функция рендеринга для области содержимого узла дерева | Function(h, node) | — | — |
| props | Варианты конфигурации см. в таблице ниже | object | — | — |
| node-key | Каждый узел дерева используется как атрибут для уникальной идентификации, и все дерево должно быть уникальным. | String | — | — |
| default-expanded-keys | Массив ключей узлов, расширенных по умолчанию (следует отметить, что клавиша узла должна быть установлена в это время, и его значение является именем поля в данных узла, которые уникальны во всем дереве.) | array | — | — |
| filter-node-method | Метод, который будет выполняться при фильтрации узлов дерева. Значение true указывает, что узел может быть отображен, а значение false указывает, что узел будет скрыт. | Function(value, data, node) | — | — |
| niamte | Включить ли анимацию перехода расширения узла | Boolean | — | false |
| animate-name | Название анимации перехода, поддерживаемые типы анимации: okr-fade-in-linear/okr-fade-in/okr-zoom-in-center/okr-zoom-in-top/okr-zoom-in-bottom | String | — | okr-zoom-in-center |
props
| параметр | иллюстрировать | Типы | необязательное значение | По умолчанию |
|---|---|---|---|---|
| label | Указывает, что метка узла является значением атрибута объекта узла. | string, function(data, node) | — | — |
| children | Указывает, что метка узла является значением атрибута объекта узла. | string | — | — |
## Events
| название события | иллюстрировать | параметр обратного вызова |
|---|---|---|
| node-click | Обратный вызов при нажатии узла | Есть три параметра по порядку: объект, соответствующий узлу в массиве, переданном атрибуту данных, узел, соответствующий узлу, и сам компонент узла. |
| node-expand | Событие срабатывает, когда узел расширяется | Есть три параметра по порядку: объект, соответствующий узлу в массиве, переданном атрибуту данных, узел, соответствующий узлу, и сам компонент узла. |
| node-collapse | Событие запускается при выключении узла | Есть три параметра по порядку: объект, соответствующий узлу в массиве, переданном атрибуту данных, узел, соответствующий узлу, и сам компонент узла. |
| node-contextmenu | Это событие запускается, когда узел щелкают правой кнопкой мыши. | Всего четыре параметра, по очереди: Событие, переданное объекту, узел, соответствующий узлу, узел, соответствующий узлу, сам узел в массиве свойств DATA. |
метод
| имя метода | иллюстрировать | параметр обратного вызова |
|---|---|---|
| filter | Отфильтровать узлы дерева | Получает параметр любого типа, который будет использоваться в качестве первого параметра в методе узла-фильтра. |
| getNode | Получить узел в компоненте "Дерево" по данным или ключу, для использования этого метода необходимо установить атрибут узла-ключа | (данные) ключ или данные для получения узла |
| setCurrentNode | Установите текущее выбранное состояние узла через узел, при использовании этого метода необходимо установить атрибут узла-ключа. | (узел) узел узла, который будет выбран |
| setCurrentKey | Установите текущее выбранное состояние узла по ключу. Чтобы использовать этот метод, вы должны установить атрибут node-key | (ключ) Ключ узла, который будет выбран, если он равен нулю, текущий выделенный узел будет отменен. |
| getCurrentKey | Получите ключ текущего выбранного узла, используйте этот метод, чтобы установить атрибут ключа узла, если узел не выбран, вернуть null | — |
| getCurrentNode | Получить данные текущего выбранного узла или вернуть null, если узел не выбран | — |
| remove | Удалить узел в Дереве, для использования этого метода необходимо установить свойство node-key | (данные) идентификатор или данные или узел узла для удаления |
| append | Добавить дочерний узел к узлу в дереве | (data, parentNode) получает два параметра: 1. данные дочернего узла для добавления 2. данные, ключ или узел родителя дочернего узла |
| insertBefore | Добавьте узел перед узлом Дерева | (data, refNode) получает два параметра: 1. данные добавляемого узла 2. данные, ключ или узел следующего узла добавляемого узла |
| insertAfter | Добавить узел после узла Дерева | (data, refNode) получает два параметра: 1. данные добавляемого узла 2. данные, ключ или узел предыдущего узла добавляемого узла |
Поддержка браузера
Modern browsers and Internet Explorer 10+.
Если вы считаете, что это неплохо, пожалуйста, помогите поставить звезду на github.Если вы считаете, что что-то нужно оптимизировать, вы можете отправить PR на github.
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
общаться с
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.