SpControlPanel 操作面板

王金城大约 3 分钟

用于展现一组按钮，点击按钮可以执行不同的操作。

基础使用

<SpControlPanel>
  <SpControlPanelItem name="选区" icon="selection" :active="true" />
  <SpControlPanelItem name="放大" icon="zoom-in" />
  <SpControlPanelItem name="缩小" icon="zoom-out" />
  <SpControlPanelItem name="适应" icon="zoom-reset" />
  <SpControlPanelItem name="上一步" icon="undo" :disabled="true" />
  <SpControlPanelItem name="下一步" icon="redo" />
</SpControlPanel>

开启模糊效果

<SpControlPanel :blur-enabled="true">
  <SpControlPanelItem name="选区" icon="selection" :active="true" />
  <SpControlPanelItem name="放大" icon="zoom-in" />
  <SpControlPanelItem name="缩小" icon="zoom-out" />
  <SpControlPanelItem name="适应" icon="zoom-reset" />
  <SpControlPanelItem name="上一步" icon="undo" :disabled="true" />
  <SpControlPanelItem name="下一步" icon="redo" />
</SpControlPanel>

自定义布局

居中显示

我想要让其宽度为 100%，并且居中显示按钮，可以使用 Tailwind CSS 来实现。

<sp-control-panel class="w-full justify-center">
  <sp-control-panel-item name="选区" icon="selection" :active="true" />
  <sp-control-panel-item name="放大" icon="zoom-in" />
  <sp-control-panel-item name="缩小" icon="zoom-out" />
  <sp-control-panel-item name="适应" icon="zoom-reset" />
  <sp-control-panel-item name="上一步" icon="undo" :disabled="true" />
  <sp-control-panel-item name="下一步" icon="redo" />
</sp-control-panel>

垂直布局

我的场景是让它立起来，可以添加属性 direction="column" 来实现。

<sp-control-panel direction="column">
  <sp-control-panel-item name="选区" icon="selection" :active="true" />
  <sp-control-panel-item name="放大" icon="zoom-in" />
  <sp-control-panel-item name="缩小" icon="zoom-out" />
  <sp-control-panel-item name="适应" icon="zoom-reset" />
  <sp-control-panel-item name="上一步" icon="undo" :disabled="true" />
  <sp-control-panel-item name="下一步" icon="redo" />
</sp-control-panel>

API

SpControlPanel 属性

属性名	说明	类型	默认值
blurEnabled	是否启用模糊特效	boolean	false
direction	布局方向，垂直布局或者水平布局	"row" \| "column"	"row"

SpControlPanel 插槽

插槽名	说明	子标签
default	默认插槽，放入操作面板 Item	SpControlPanelItem

SpControlPanelItem 属性

属性名	说明	类型	默认值
icon	图标名	SpIconName	-
name	名称	string	-
disabled	是否禁用按钮	boolean	false
active	是否为激活状态	boolean	false

SpControlPanel 插槽

插槽名	说明	子标签
default	默认插槽，您可以自定义你的按钮	-
icon	图标	-
name	名字	-