首页 > 其他 > 详细

FlyLine 组件

时间:2021-01-06 23:47:46      阅读:40      评论:0      收藏:0      [点我收藏+]

一个2维的飞线组件

 

效果图:


技术分享图片

 

飞线使用:

import Vue from ‘vue‘
import {FlyLine} from ‘special-ui‘
Vue.use(FlyLine)

 

组件引用:

<template>
  <div class="container">
    <fly-line :lines="flyPoints"></fly-line>
  </div>
</template>

<script>
export default {
  name: ‘App‘,
  data () {
    return {
      flyPoints: [
        {
          start: [329.3029054888133, 166.22157534665564],
          end: [600, 80],
          arcRadis: 0
        },
        {
          start: [829.3029054888133, 166.22157534665564],
          end: [1100, 80],
          arcRadis: -0.5
        }
      ]
    }
  }
}
</script>

<style>
.container {
  height: 100%;
}
</style>

组件参数

config: 对象

属性 说明 默认值
lineColor 飞线颜色 #FFCE00
isDash 是否是虚线 true
dash 虚线配置 ‘3, 3‘
isFly 是否显示飞线动效 true
flyLineColor 飞线动效颜色 #FFCE00
isShowArrow 是否显示箭头 true

 

lines: 数组

属性 说明 默认值
start 起点坐标
end 终点坐标
arcRadis 曲线系数 0.5

 

 

FlyLine 组件

原文:https://www.cnblogs.com/chinasoft/p/14244008.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!