XAction 操作按钮

示例

基础用法

<template>
  <XAction label="操作按钮"> </XAction>
  <XAction :icon="VtjIconBug" label="操作按钮" type="success"> </XAction>
  <XAction :icon="VtjIconBug" label="操作按钮" :disabled="true"> </XAction>
  <XAction mode="icon" :icon="VtjIconBug" size="large"></XAction>
  <XAction mode="icon" :icon="VtjIconBug" size="default"></XAction>
  <XAction mode="icon" :icon="VtjIconBug" size="small"></XAction>
  <XAction mode="icon" :icon="VtjIconBug" type="primary"></XAction>
  <XAction mode="icon" :icon="VtjIconBug" type="success"></XAction>
  <XAction mode="icon" :icon="VtjIconBug" type="info"></XAction>
  <XAction mode="icon" :icon="VtjIconBug" type="danger"></XAction>
</template>

<script setup lang="ts">
  import { XAction } from '@vtj/ui';
  import { VtjIconBug } from '@vtj/icons';
</script>

提示信息 用法

Custom

<template>
  <XAction
    :icon="VtjIconBug"
    label="提示按钮"
    tooltip="提示信息"
    @click="onClick">
  </XAction>

  <XAction :icon="VtjIconBug" mode="icon" tooltip="提示信息" @click="onClick">
  </XAction>

  <XAction :icon="VtjIconBug" mode="icon" tooltip="提示信息" @click="onClick">
  </XAction>

  <XAction
    :icon="VtjIconBug"
    mode="icon"
    tooltip="提示信息"
    circle
    background="hover"
    type="success"
    @click="onClick">
  </XAction>

  <XAction tooltip="提示">
    <h1>Custom</h1>
  </XAction>
</template>

<script setup lang="ts">
  import { XAction } from '@vtj/ui';
  import { VtjIconBug } from '@vtj/icons';

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

<style scoped></style>

mode: icon 用法

<template>
  <XAction
    :icon="VtjIconBug"
    mode="icon"
    circle
    type="success"
    @click="onClick">
  </XAction>

  <XAction :icon="VtjIconBug" mode="icon" type="danger" @click="onClick">
  </XAction>

  <XAction
    :icon="VtjIconBug"
    mode="icon"
    circle
    background="hover"
    type="success"
    @click="onClick">
  </XAction>

  <XAction
    :icon="VtjIconBug"
    mode="icon"
    background="hover"
    type="danger"
    @click="onClick">
  </XAction>
</template>

<script setup lang="ts">
  import { XAction } from '@vtj/ui';
  import { VtjIconBug } from '@vtj/icons';

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

<style scoped></style>

下拉菜单 用法

³³

²²

¹¹

<template>
  <XAction
    :icon="VtjIconBug"
    badge="33"
    label="操作按钮"
    type="primary"
    :menus="menus"
    @command="onCommand">
  </XAction>

  <XAction
    :icon="VtjIconBug"
    badge="22"
    label="操作按钮"
    size="large"
    :menus="menus"
    @command="onCommand">
  </XAction>

  <XAction
    mode="icon"
    :icon="VtjIconBug"
    type="primary"
    badge="11"
    :menus="menus"
    @command="onCommand">
  </XAction>

  <XAction
    mode="icon"
    :icon="VtjIconBug"
    type="danger"
    :menus="menus"
    @command="onCommand">
  </XAction>
</template>

<script setup lang="ts">
  import { XAction } from '@vtj/ui';
  import { VtjIconBug } from '@vtj/icons';

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

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

<style scoped></style>

API

属性

属性名	说明	类型	默认值
name	动作名称标识	string	-
label	动作标题文本	boolean	false
value	动作值，用来传输数据	string | number | object | array |	-
icon	图标配置	string | object	-
mode	模式	string	button
menus	下拉菜单配置	array	-
tooltip	tooltip 配置	string | object	-
badge	badge配置	string | Number | Object	-
dropdown	ElDropdown 组件配置	object	-
button	ElButton 组件配置，mode为button时有效	object	-
disabled	禁用	boolean	-
size	尺寸	string	default
type	颜色类型	string	-
background	icon 背景设置，当 mode为 icon 时有效	string always, hover, none	always
circle	icon 背景样式圆形，当 mode为 icon 时有效	string	-
draggable	是否可拖拽	boolean	-

事件

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