mpx-cube-ui

# Cube-float-ball

# 介绍

悬浮球，吸附停靠在窗口的指定位置，可以用手指拖动改变位置。

# 示例

# 基础用法

通过设置name属性渲染文本内容，通过设置initialPosition属性改变悬浮球的初始位置。

收起 
<template>
  <cube-float-ball
    name="default"
    initialPosition="{{ defaultPos }}" />
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    data() {
      return {
        defaultPos: {
          left: 0,
          top: 200
        }
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# slot 用法

通过默认插槽，我们可以渲染自定义内容，如一张图片。

收起 
<template>
  <cube-float-ball
    bindclick="handleClick">
    <image
      class="float-ball-demo"
      src="https://dpubstatic.udache.com/static/dpubimg/TRSp1qfRVjgrDF9Lr-OyN_service-assist.png"></image>
  </cube-float-ball>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    methods: {
      handleClick() {
        console.log('click')
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
name 小球文案。若引用时未提供文案则显示插槽内用户自定义内容 String - -
dockDistance 屏幕边框停靠距离。默认为零，吸附停靠为左右屏幕边框 Number - 0
initialPosition 指定小球初始距离屏幕原点的 left/top 位置。该属性未指定的话则默认在屏幕右侧居中位置。 Object - {}

# Events

事件名 说明 参数
touchstart 手指接触小球时触发 event 事件对象
touchmove 手指移动小球时触发 event 事件对象
touchend 手指抬起小球时触发 event 事件对象
click 手指点击小球触发 event 事件对象

# Slots

插槽名 说明
— (默认插槽) -

# CSS Variable

变量名 默认值 含义
$ball-content-width
50px
 悬浮球默认宽度
$ball-content-height
50px
 悬浮球默认高度
$ball-content-padding
8px
 悬浮球默认状态下的内边距
$ball-content-border-radius
50%
 悬浮球默认边框圆角半径
$ball-content-bxsh
0 2px 15px 1px rgba(113, 88, 74, 0.3)
 悬浮球默认状态下的阴影
$ball-content-font-size 悬浮球默认状态下字体大小
$ball-content-color 悬浮球默认状态下字体颜色
$ball-content-background
linear-gradient(-149deg, #FF9143 12%, #FF5303 96%)
 悬浮球默认状态下背景颜色
$ball-transition-delay
0
 悬浮球移动动画延迟时间
$ball-transition-duration
.3s
 悬浮球移动动画时间
$ball-transition-timing-function
ease-out
 悬浮球移动动画函数

← Loading 加载 →