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

OSCHINA-MIRROR/cht8848-vue-super-flow

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 4 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 03.12.2024 02:21 a91ff3f

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 )

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

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