## Attributes ------ | 参数 | 说明 | 类型 | 可选值 | 默认值| | ---- | ---- | ---- | ---- | ---- | | value / v-model | 悬浮球位置 | Object | — | — | | zIndex | 叠加顺序 | String/Number | — | 999 | | debounce | 防抖时长 | Number | — | 128 | ## 组件引用 ------ ### App.vue ```vue <script> export default { globalData: { //定义全局变量以供各个页面使用 globalFloatBallPosition: {x: 360, y: 256}, }, } </script> ``` ### 需引用页面 ```vue <template> <view class="workbench-wrap"> <!-- floatBallPosition已在插件的mixin文件中定义 --> <css-float-ball v-model="floatBallPosition"> <!-- <ball/> 为自己实现的球本体。如示例内的<ball/>组件 --> <!-- <ball/> --> <view class="float-ball-icon" hover-class="default-icon-hover" @click="()=>{}"> <icon type="success" :size="48"/> </view> </css-float-ball> <view class="workbench-main-wrap"> </view> </view> </template> <script> // pages.json 中 easycom 为自动读取uni_modules内插件时,可省略 // import CssFloatBall from '@/uni_modules/css-float-ball/components/css-float-ball/css-float-ball' // import Ball from '@/components/ball/ball' import FloatBallMixin from '../../uni_modules/css-float-ball/components/css-float-ball/mixin' export default { name: 'WorkBench', // pages.json 中 easycom 为自动读取uni_modules内插件时,可省略 // components:{ // CssFloatBall, // Ball, // }, mixins:[FloatBallMixin], } </script> <style lang="scss" scoped> @import "index"; .float-ball-icon { background-color: #FFF; width: 128rpx; height: 128rpx; border-radius: 50%; @extend .defaultFlex; -webkit-box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47); -moz-box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47); box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47); } </style> ``` ## PS: 在安卓、微信小程序流畅度还可以,其他平台暂未测试 pages.json 中 easycom 为自动读取uni_modules内插件时,可省略引入组件 防抖可以用lodash的debounce 欢迎斧正