XActionBar 操作按钮集

示例

基础用法

¹

<template>
  <div>
    <XActionBar
      :items="items"
      mode="button"
      :disabled="disabled"
      @command="onCommand"></XActionBar>
  </div>
</template>
<script lang="ts" setup>
  import { XActionBar, type ActionBarItems } from '@vtj/ui';
  import { VtjIconBug, VtjIconApi, VtjIconPlus } from '@vtj/icons';

  const menus = [
    {
      command: 'a',
      label: '菜单 一'
    },
    {
      command: 'a1',
      label: '菜单 二'
    },
    {
      command: 'b',
      label: '菜单 三',
      divided: true,
      icon: VtjIconBug
    }
  ];

  const items: ActionBarItems = [
    {
      label: '按钮一',
      icon: VtjIconPlus,
      tooltip: '提示信息内容',
      draggable: true,
      onDragstart: (d: any, e: any) => {
        console.log(d, e);
      }
    },
    {
      label: '按钮二',
      icon: VtjIconBug,
      menus,
      onCommand(item: any) {
        console.log('onCommand', item);
      }
    },
    '|',
    {
      label: '按钮三',
      icon: VtjIconApi,
      badge: 1,
      onClick() {
        // alert('clicked!');
      }
    }
  ];

  const disabled = () => {
    return false;
  };

  const onCommand = (action: any, menu: any) => {
    console.log('onCommand', action, menu);
  };
</script>

mode:icon 效果

¹

<template>
  <XActionBar
    :items="items"
    mode="icon"
    :disabled="disabled"
    @command="onCommand"></XActionBar>
</template>

<script setup lang="ts">
  import { XActionBar, type ActionBarItems } from '@vtj/ui';
  import { VtjIconBug, VtjIconApi, VtjIconPlus } from '@vtj/icons';

  const menus = [
    {
      command: 'a',
      label: '菜单 一'
    },
    {
      command: 'a1',
      label: '菜单 二'
    },
    {
      command: 'b',
      label: '菜单 三',
      divided: true,
      icon: VtjIconBug
    }
  ];

  const items: ActionBarItems = [
    {
      icon: VtjIconPlus,
      tooltip: '提示信息内容',
      draggable: true,
      onDragstart: (d: any, e: any) => {
        console.log(d, e);
      }
    },
    {
      icon: VtjIconBug,
      menus,
      onCommand(item: any) {
        console.log('onCommand', item);
      }
    },
    '|',
    {
      icon: VtjIconApi,
      badge: 1,
      onClick() {
        // alert('clicked!');
      }
    }
  ];

  const disabled = () => {
    return false;
  };

  const onCommand = (action: any, menu: any) => {
    console.log('onCommand', action, menu);
  };
</script>

<style scoped></style>

API

属性

属性名	说明	类型	默认值
items	动作项	array	-
mode	模式	string button|text|icon	-
size	尺寸	string	default
type	颜色类型	string	-
background	icon 背景设置，当 mode为 icon 时有效	string always|hover|none	always
circle	icon 背景样式圆形，当 mode为 icon 时有效	boolean	-
disabled	禁用	boolean | () => boolean	-
tooltip	tooltip 配置	object	-
badge	Badge 配置	object	-
dropdown	ElDropdown 组件配置	object	-
button	ElButton 组件配置，mode为button时有效	object	-

事件

名称	说明	参数
click	点击事件	-
command	menu菜单项点击事件	-