1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/cht8848-vue-super-flow

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

vue-super-flow

  • Компонент редактора блок-схем на основе Vue.
  • Блок-схема Vue.
  • Vue 流程图。

Установка

npm install vue-super-flow
yarn add vue-super-flow
import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'
Vue.use(SuperFlow)

Атрибуты

Свойство Тип Значение по умолчанию Описание
draggable Boolean true Разрешает перетаскивание узлов
linkAddable Boolean true Разрешает быстрое создание ссылок
linkEditable Boolean true Определяет, можно ли редактировать ссылки
hasMarkLine Boolean true Показывает вспомогательные линии при перетаскивании
markLineColor String #55abfc Цвет вспомогательных линий
origin Array [0, 0] Исходная точка двумерной системы координат graph
nodeList Array [] Инициализирует список узлов
linkList Array [] Инициализирует список связей
graphMenu Array [] Настраивает контекстное меню graph
nodeMenu Array [] Настраивает контекстное меню узла
linkMenu Array [] Настраивает контекстное меню связи
enterIntercept Function () => true Ограничивает создание связей при входе в узел
outputIntercept Function () => true Функция ограничения создания связей из узла
linkDesc Function null Генерирует описание для связи
linkStyle Function null Настраивает стиль связи
linkBaseStyle Object {} Настройки стиля связи по умолчанию

linkDesc

function linkDesc(link) {
   /**
     根据 link 对象的属性判断定制连线描述
   */
   return link.meta ? link.meta.info : ''
}

linkBaseStyle

/*
// 内置默认样式配置
{
   hover: '#FF0000',        // 连线 hover 时颜色
   color: '#666666',        // 连线颜色
   textColor: '#666666',    // 连线描述文字颜色
   textHover: '#FF0000',    // 连线 hover 时描述文字颜色
   font: '14px Arial',      // 连线 描述文字 font 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/font
   dotted: false,           // 连线 是否是虚线
   lineDash: [4, 4],        // 为虚线时 虚线参数  参考:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
   background: 'rgba(255,255,255,0.6)'  // 描述文字背景  
}
*/

{
  // ... 可选属性 参考内置默认样式 用来覆盖连线样式的默认值
}

linkStyle

function linkStyle(link) {
   /**
     根据 link 对象的属性判断定制连线样式
   */
   return {
      // ... 可选属性 参考:[linkBaseStyle](#linkBaseStyle)
   }
}

Методы

Метод Описание Параметры
selectAll Выбирает все для перетаскивания и изменения origin
toJSON Преобразует объект graph в обычный json
getMouseCoordinate Получает координаты курсора в системе координат graph clientX, clientY
addNode Добавляет узел options

Пример

Пример по умолчанию Расширенный пример

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/cht8848-vue-super-flow.git
git@api.gitlife.ru:oschina-mirror/cht8848-vue-super-flow.git
oschina-mirror
cht8848-vue-super-flow
cht8848-vue-super-flow
master