开源软件名称：

suspension-ball

开源软件地址：

https://gitee.com/ChaoXxxx/suspension-ball

开源软件介绍：

suspension-ball

可滑动的悬浮球,自动吸附边缘,类似ios的辅助触控

示例

avatar

使用

npm install suspension-ball -Simport Vue from 'vue'import suspensionBall from 'suspension-ball'Vue.use(suspensionBall)

参数

名	类型	默认	说明
zIndex	number	1001	组件层级
init	object	{ top: 0,left: 0 }	初始化位置
distance	object	{ top: 10, left: 10, right: 10, bottom: 10 }	距离边部位置（拖拽超出某范围后会返回指定的距离）

事件

@eventEmit 没有返回值,在点击组件事会发送点击事件@positionEmit 返回值组件距离值left,top

template

<suspension-ball     @eventEmit="eventEmit"     @positionEmit="positionEmit"     :zIndex="1002"     :distance="{top: 70, left: 10, right: 25, bottom: 10}"     :init="{top: 80}">        <div class="float_ball">悬浮</div></suspension-ball>import suspensionBall from 'suspensionBall'

typescript

import { Component, Vue } from 'vue-property-decorator'import { Position } from './types/app'import SuspensionBall from '../src/components/SuspensionBall.vue'@Component({  components: {    SuspensionBall  }})export default class App extends Vue {  private eventEmit(): void {    return  }  private positionEmit(position: Position): void {    console.log(`top => ${position.top}  left => ${position.left}`)  }}

参数

// 组件层级 (如果碰到滑动问题，请检查 z-index。z-index需比web大一级) 默认1001@Prop({    type: Number,    required: false,    default: 1001}) private zIndex !: number// 初始化距离 (组件默认位置top, left)@Prop({    type: Object,    required: false,    default: () => {      return {        top: 0,        left: 0      }    }}) private init !: Init// 组件距离 (组件距离上右下左的边距)@Prop({    type: Object,    required: false,    default: () => {        return {            top: 10,            left: 10,            right: 10,            bottom: 10        }    }}) private distance !: Distance