默认样式类名 default-toolbar

``typescript
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
}
}
`

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

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

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

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