Слияние кода завершено, страница обновится автоматически
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 | {} | Настройки стиля связи по умолчанию |
function linkDesc(link) {
/**
根据 link 对象的属性判断定制连线描述
*/
return link.meta ? link.meta.info : ''
}
/*
// 内置默认样式配置
{
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)' // 描述文字背景
}
*/
{
// ... 可选属性 参考内置默认样式 用来覆盖连线样式的默认值
}
function linkStyle(link) {
/**
根据 link 对象的属性判断定制连线样式
*/
return {
// ... 可选属性 参考:[linkBaseStyle](#linkBaseStyle)
}
}
Метод | Описание | Параметры |
---|---|---|
selectAll | Выбирает все для перетаскивания и изменения origin | — |
toJSON | Преобразует объект graph в обычный json | — |
getMouseCoordinate | Получает координаты курсора в системе координат graph | clientX, clientY |
addNode | Добавляет узел | options |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )