find-h5-toolbar v2.0.27

默认样式类名 default-toolbar

interface IToolBarItem {
  pianoKey: number | 'ANY_KEY' // 按钮对应的琴键id
  display?: boolean // 当前按钮显示状态
  positionX?: number // 自由模式x坐标
  positionY?: number // 自由模式Y坐标
  offsetY?: number // 按钮容器纵向偏移
  offsetX?: number // 按钮容器横向偏移
  class?: string // 自定义样式名
  background?: { // 背景 以琴键中心定位
    bgValue: string | object // 颜色 图片地址 dom
    width?: number
    height?: number
  },
  button: {
    bgValue: string | object // 颜色 图片地址
    class?: string // 额外的样式名称
    width?: number
    height?: number
    offsetY?: number
    offsetX?: number
  }
  extra?: HTMLElement // 额外的任意dom元素 追加在按钮容器中
  bottomDot?: boolean // 下方小圆点
  bottomText?: string // 按钮下方文本
  middleText?: string | { value: string, style?: string, class?: string } // 按钮中间的文字
  active?: boolean // 激活状态
  activeSign?: HTMLElement // 激活标识
  longClickProgressTime?: number // 长按多久触发长按事件 单位ms default: 1500
  event: {
    keyDown?: (e?: TouchEvent, pianoKey?: number) => void
    keyUp?: (e?: TouchEvent, pianoKey?: number) => void
    click?: (e?: TouchEvent, pianoKey?: number) => void
    longClick?: (e?: TouchEvent, pianoKey?: number) => void
  }
}

interface IToolBar {
  uniqueId?: string // 唯一id 自动生成 初始化不需要传递
  display: boolean // 按钮组显示状态
  class?: string // 父容器类名
  style?: string // 父容器样式
  toolBarItems: IToolBarItem[] // 按钮配置
}

创建一个数据驱动的toolbar. 需要变更toolbar状态可直接修改配置属性

参数2: 默认的按钮尺寸/是否自由布局模式

const t = new ToolBar(/*初始化配置对象*/,/*{width?: number, height?: number, freePosition?: boolean}*/, /*可选标识, 会追加在domID中*/)
// 销毁toolbar
t.destory()