Vue DevUI
主题

Button 按钮

按钮用于开始一个即时操作。

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

形态

通过variant设置按钮形态，目前支持solid、outline、text三种形态，默认为outline。

<template>
  <div class="demo-spacing">
    <d-button variant="solid">
      Solid Button
    </d-button>
    <d-button>Outline Button</d-button>
    <d-button variant="text">
      Text Button
    </d-button>
  </div>
</template>

主题色

通过color设置按钮的主题色，目前支持primary、secondary、danger三种主题色，默认为secondary。<br>注意：如果variant设置成solid，则默认使用primary主题色。

<template>
  <div>
    <div class="demo-spacing">
      <d-button
        variant="solid"
        color="primary"
      >
        Primary
      </d-button>
      <d-button color="primary">
        Primary
      </d-button>
      <d-button
        variant="text"
        color="primary"
      >
        Primary
      </d-button>
    </div>

    <div class="demo-spacing">
      <d-button
        variant="solid"
        color="secondary"
      >
        Secondary
      </d-button>
      <d-button color="secondary">
        Secondary
      </d-button>
      <d-button
        variant="text"
        color="secondary"
      >
        Secondary
      </d-button>
    </div>

    <div class="demo-spacing">
      <d-button
        variant="solid"
        color="danger"
      >
        Danger
      </d-button>
      <d-button color="danger">
        Danger
      </d-button>
      <d-button
        variant="text"
        color="danger"
      >
        Danger
      </d-button>
    </div>
  </div>
</template>

尺寸

通过size设置按钮尺寸，支持sm、md、lg三种类型的尺寸，默认为md。

<template>
  <div class="demo-spacing">
    <d-button size="sm">
      Small
    </d-button>
    <d-button>Medium</d-button>
    <d-button size="lg">
      Large
    </d-button>
  </div>
</template>

禁用状态

通过disabled参数设置按钮禁用状态。

<template>
  <div>
    <div class="demo-spacing">
      <d-button variant="solid">
        Solid Button
      </d-button>
      <d-button>Outline Button</d-button>
      <d-button variant="text">
        Text Button
      </d-button>
    </div>

    <div class="demo-spacing">
      <d-button
        variant="solid"
        disabled
      >
        Solid Button
      </d-button>
      <d-button disabled>
        Outline Button
      </d-button>
      <d-button
        variant="text"
        disabled
      >
        Text Button
      </d-button>
    </div>
  </div>
</template>

加载中状态

通过loading参数设置按钮加载中状态。

<template>
  <d-button
    variant="solid"
    :loading="showLoading"
    @click="handleClick"
  >
    Click Me
  </d-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const showLoading = ref(false);
const handleClick = () => {
  showLoading.value = true;

  setTimeout(() => {
    showLoading.value = false;
  }, 2000);
};
</script>

图标按钮 

<template>
  <div class="demo-spacing">
    <d-button
      icon="add"
      variant="solid"
    >
      New
    </d-button>
    <d-button icon="filter">
      Filter
    </d-button>
    <d-button
      icon="connect"
      variant="text"
    >
      Link
    </d-button>
    <d-button
      icon="delete"
      variant="text"
      title="Delete"
    />
    <d-button
      shape="round"
      title="Add"
    >
      Add
    </d-button>
    <d-button
      icon="delete"
      shape="circle"
      title="Delete"
      size="sm"
    />
    <d-button
      icon="delete"
      shape="circle"
      title="Delete"
    />
    <d-button
      variant="solid"
      icon="filter"
      shape="circle"
      title="Add"
      size="lg"
    />
  </div>
</template>

按钮组

将多个按钮作为一组放入按钮组容器中。按钮组可通过 size 设置尺寸，并与下拉菜单混合使用。

尺寸：sm

尺寸：默认

尺寸：lg

与dropdown下拉菜单一起使用

<template>
  <div>
    <d-button-group>
      <d-button variant="solid">
        按钮名称
      </d-button>
      <d-button
        icon="icon-select-arrow"
        variant="solid"
      />
    </d-button-group>

    <p>尺寸：sm</p>
    <d-button-group size="sm">
      <d-button
        color="primary"
        variant="solid"
      >
        上海
      </d-button>
      <d-button>北京</d-button>
      <d-button>深圳</d-button>
    </d-button-group>

    <p>尺寸：默认</p>
    <d-button-group>
      <d-button color="primary">
        上海
      </d-button>
      <d-button>北京</d-button>
      <d-button>深圳</d-button>
    </d-button-group>

    <p>尺寸：lg</p>
    <d-button-group size="lg">
      <d-button color="primary">
        上海
      </d-button>
      <d-button>北京</d-button>
      <d-button>深圳</d-button>
    </d-button-group>

    <p>与dropdown下拉菜单一起使用</p>
    <d-button-group>
      <d-dropdown
        style="width: 100px;"
        :position="position"
        align="start"
      >
        <d-button>Click Me 1</d-button>
        <template #menu>
          <ul class="list-menu">
            <li class="menu-item">
              Item 1
            </li>
            <li class="menu-item">
              Item 2
            </li>
            <li class="menu-item">
              Item 3
            </li>
            <li class="menu-item">
              Item 4
            </li>
          </ul>
        </template>
      </d-dropdown>
      <d-button
        icon="add"
        variant="solid"
      >
        上海
      </d-button>
      <d-dropdown
        style="width: 100px;"
        :position="position"
        align="start"
      >
        <d-button>Click Me 2</d-button>
        <template #menu>
          <ul class="list-menu">
            <li class="menu-item">
              Item 1
            </li>
            <li class="menu-item">
              Item 2
            </li>
            <li class="menu-item">
              Item 3
            </li>
            <li class="menu-item">
              Item 4
            </li>
          </ul>
        </template>
      </d-dropdown>
      <d-button icon="filter">
        北京
      </d-button>
      <d-dropdown
        style="width: 100px;"
        :position="position"
        align="start"
      >
        <d-button>Click Me 3</d-button>
        <template #menu>
          <ul class="list-menu">
            <li class="menu-item">
              Item 1
            </li>
            <li class="menu-item">
              Item 2
            </li>
            <li class="menu-item">
              Item 3
            </li>
            <li class="menu-item">
              Item 4
            </li>
          </ul>
        </template>
      </d-dropdown>
    </d-button-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const position = ref(["bottom-start", "top-start"]);
</script>

Button 参数

参数名类型默认说明跳转 Demo
variantIButtonVariant'outline'可选，按钮形态形态
colorIButtonColor'secondary'可选，按钮主题主题色
sizeIButtonSize'md'可选，按钮尺寸尺寸
iconstring--可选，自定义按钮图标图标按钮
shapeIButtonShape--可选，按钮形状(圆形/圆角)图标按钮
disabledbooleanfalse可选，是否禁用 button禁用状态
loadingbooleanfalse可选，设置加载中状态加载中状态
native-typeIButtonType'button'可选，按钮原生type属性

Button 类型定义

IButtonVariant 

type IButtonVariant = 'solid' | 'outline' | 'text';

IButtonSize 

type IButtonSize = 'lg' | 'md' | 'sm';

IButtonColor 

type IButtonColor = 'primary' | 'secondary' | 'danger';

IButtonShape 

type IButtonShape = 'circle' | 'round';

IButtonType 

type IButtonType = 'button' | 'submit' | 'reset';

ButtonGroup 参数

参数名类型默认说明跳转 Demo
sizeIButtonSize'md'可选，按钮组尺寸按钮组

ButtonGroup 类型定义

IButtonGroupSize 

type IButtonGroupSize = 'lg' | 'md' | 'sm';
Contributors
粤A2-20044005号