⌘
K

Button 按钮

能忍住不点我吗？

import { DuButton } from 'dangoui'

示例

各种类型的按钮

使用 full 属性时候需要注意，如果你的环境是微信小程序，自定义组件自身会有一个额外的节点，一些情况下，你需要给这个额外的节点指定宽度才能达到预期效果，在下面的示例中，采用的是兼容小程序环境的写法

<template>
  <PreviewBlock title="按钮类型">
    <DuButton type="primary" @click="onClick">
      Primary
    </DuButton>
    <DuButton type="secondary" @click="onClick">
      Secondary
    </DuButton>
    <DuButton type="outline" @click="onClick">
      Outline
    </DuButton>
    <DuButton type="text" @click="onClick">
      Text
    </DuButton>
  </PreviewBlock>
  <PreviewBlock title="按钮大小">
    <DuButton size="mini" @click="onClick">
      Mini
    </DuButton>
    <DuButton size="small" @click="onClick">
      Small
    </DuButton>
    <DuButton size="normal" @click="onClick">
      Normal
    </DuButton>
    <DuButton size="medium" @click="onClick">
      Medium
    </DuButton>
    <DuButton size="large" @click="onClick">
      Large
    </DuButton>
  </PreviewBlock>
  <PreviewBlock title="加载态/禁用态">
    <DuButton loading>
      加载中...
    </DuButton>
    <DuButton disabled disabled-type="default">
      永久禁用
    </DuButton>
    <DuButton disabled disabled-type="temp">
      短暂不可用
    </DuButton>
  </PreviewBlock>
  <PreviewBlock title="带图标">
    <DuButton icon="alarm-filled" type="secondary">
      提醒我
    </DuButton>
    <DuButton arrow-right>去发帖</DuButton>
    <DuButton type="outline" icon="wifi" icon-position="right">
      连接 Wifi
    </DuButton>
  </PreviewBlock>
  <PreviewBlock title="全宽">
    <DuButton class="w-full" type="secondary" full>
      占据剩余空间
    </DuButton>
    <div class="w-full flex gap-x-8px">
      <DuButton class="w-full" type="outline" full>
        取消
      </DuButton>
      <DuButton class="w-full" full>
        确认
      </DuButton>
    </div>
  </PreviewBlock>
</template>

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

function onClick() {
  console.log('[demo] button clicked')
}
</script>
0
不同颜色
<template>
  <PreviewBlock title="primary">
    <DuButton color="primary">Primary</DuButton>
    <DuButton color="primary" type="secondary">Secondary</DuButton>
    <DuButton color="primary" type="outline">Outline</DuButton>
    <DuButton color="primary" type="text">Text</DuButton>
    <DuButton color="primary" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="primary" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="primary" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="primary" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
  <PreviewBlock title="secondary">
    <DuButton color="secondary">Primary</DuButton>
    <DuButton color="secondary" type="secondary">Secondary</DuButton>
    <DuButton color="secondary" type="outline">Outline</DuButton>
    <DuButton color="secondary" type="text">Text</DuButton>
    <DuButton color="secondary" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="secondary" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="secondary" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="secondary" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
  <PreviewBlock title="default">
    <DuButton color="default">Primary</DuButton>
    <DuButton color="default" type="secondary">Secondary</DuButton>
    <DuButton color="default" type="outline">Outline</DuButton>
    <DuButton color="default" type="text">Text</DuButton>
    <DuButton color="default" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="default" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="default" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="default" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
  <PreviewBlock title="success">
    <DuButton color="success">Primary</DuButton>
    <DuButton color="success" type="secondary">Secondary</DuButton>
    <DuButton color="success" type="outline">Outline</DuButton>
    <DuButton color="success" type="text">Text</DuButton>
    <DuButton color="success" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="success" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="success" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="success" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
  <PreviewBlock title="warning">
    <DuButton color="warning">Primary</DuButton>
    <DuButton color="warning" type="secondary">Secondary</DuButton>
    <DuButton color="warning" type="outline">Outline</DuButton>
    <DuButton color="warning" type="text">Text</DuButton>
    <DuButton color="warning" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="warning" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="warning" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="warning" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
  <PreviewBlock title="error">
    <DuButton color="error">Primary</DuButton>
    <DuButton color="error" type="secondary">Secondary</DuButton>
    <DuButton color="error" type="outline">Outline</DuButton>
    <DuButton color="error" type="text">Text</DuButton>
    <DuButton color="error" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="error" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="error" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="error" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
  <PreviewBlock title="trade">
    <DuButton color="trade">Primary</DuButton>
    <DuButton color="trade" type="secondary">Secondary</DuButton>
    <DuButton color="trade" type="outline">Outline</DuButton>
    <DuButton color="trade" type="text">Text</DuButton>
    <DuButton color="trade" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="trade" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="trade" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="trade" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
  <PreviewBlock title="white">
    <div class="flex flex-wrap gap-x-8px gap-y-16px bg-black p-8px rounded-8px">
      <DuButton color="white">Primary</DuButton>
      <DuButton color="white" type="secondary">Secondary</DuButton>
      <DuButton color="white" type="outline">Outline</DuButton>
      <DuButton color="white" type="text">Text</DuButton>
      <DuButton color="white" disabled disabled-type="temp">Primary</DuButton>
      <DuButton color="white" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
      <DuButton color="white" disabled disabled-type="temp" type="outline">Outline</DuButton>
      <DuButton color="white" disabled disabled-type="temp" type="text">Text</DuButton>
    </div>
  </PreviewBlock>
  <PreviewBlock title="vip">
    <DuButton color="vip">Primary</DuButton>
    <DuButton color="vip" type="secondary">Secondary</DuButton>
    <DuButton color="vip" type="outline">Outline</DuButton>
    <DuButton color="vip" type="text">Text</DuButton>
    <DuButton color="vip" disabled disabled-type="temp">Primary</DuButton>
    <DuButton color="vip" disabled disabled-type="temp" type="secondary">Secondary</DuButton>
    <DuButton color="vip" disabled disabled-type="temp" type="outline">Outline</DuButton>
    <DuButton color="vip" disabled disabled-type="temp" type="text">Text</DuButton>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuButton } from 'dangoui'
</script>
0

API

属性

属性名类型默认值说明
type"primary" | "secondary" | "outline" | "text""primary"按钮类型
colorstring"primary"色彩，可以使用色板中的颜色名
textstring""按钮文本
button-idstring""id 属性，可用 CSS id 选择器获取到对应组件
ext-classstring | string[] | Record<string, boolean>""自定义 class
ext-stylestring | { [x: string]: string | number; }{}自定义 style
size"normal" | "mini" | "small" | "medium" | "large""normal"按钮大小
iconstring""按钮附带图标
icon-sizestring""图标大小
icon-position"left" | "right""left"图标位置
arrow-rightbooleanfalse按钮右侧箭头
disabledbooleanfalse是否禁用状态
disabled-type"default" | "temp""default"临时禁用还是永久禁用
fullbooleanfalse全宽
loadingbooleanfalse加载中
open-typestring""小程序 [open-type](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
pressbooleanfalse点击触发事件改为长按
press-backgroundstring"rgba(0, 0, 0, 0.04)"长按时候背景
themestring - 主题

插槽

名称
default

事件

名称类型
click(event: "click", event: any): void
getUserInfo(event: "getUserInfo", ...args: any[]): void

主题变量

变量名默认值
上一篇
Layout 布局
下一篇
Icon 图标
本页包含
示例
API
主题变量