Button 按钮

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

何时使用

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

在 B+ Design 中我们提供了五种按钮。

• 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
• 默认按钮：用于没有主次之分的一组行动点。
• 虚线按钮：常用于添加操作。
• 文本按钮：用于最次级的行动点。
• 链接按钮：一般用于链接，即导航至某位置。

以及四种状态属性与上面配合使用。

• 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
• 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
• 禁用：行动点不可用的时候，一般需要文案解释。
• 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

代码演示

按钮类型

使用primary、dashed、text和link属性来定义 Button 的样式。

<template>
  <f-space wrap>
    <f-button type="primary">Primary Button</f-button>
    <f-button>Default Button</f-button>
    <f-button type="dashed">Dashed Button</f-button>
    <f-button type="text">Text Button</f-button>
    <f-button type="link">Link Button</f-button>
  </f-space>
</template>

<script lang="ts" setup>

</script>

图标按钮

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。

尽量使用UI库中的icon，不要自己引入。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

<template>
     <f-space wrap>
    <f-button type="primary">
      <template #icon><SearchOutlined /></template>
      Search
    </f-button>
  
    <f-button type="primary">
      <template #icon><f-icon type="icon-tianjia2" /></template>
      新增
    </f-button>

    <f-button>
     <f-icon type="icon-tianjia2" />新增
    </f-button>
    <f-button>
      <template #icon><SearchOutlined /></template>
      Search
    </f-button>
   
    <f-button type="dashed">
      <template #icon><SearchOutlined /></template>
      Search
    </f-button>
  
  
    <br />
   
  
    <f-button type="primary" size="large">
      <template #icon><SearchOutlined /></template>
      Search
    </f-button>
  
    <f-button size="large">
      <template #icon><SearchOutlined /></template>
      Search
    </f-button>
    <br />
</f-space>
  
  </template>
  <script>
  import { SearchOutlined } from '@ant-design/icons-vue';
  export default {
    components: {
      SearchOutlined,
    },
  };
  </script>
  

加载中状态

添加 loading 属性即可让按钮处于加载状态。

<template>
  <f-space direction="vertical" style="width: 100%">
    <f-space>
      <f-button type="primary" loading> Loading </f-button>
      <f-button type="primary" size="small" loading> Loading </f-button>
    </f-space>
    <f-space>
      <f-button type="primary" :loading="loading" @mouseenter="loading = true"> mouseenter me! </f-button>
      <f-button type="primary" :loading="iconLoading" @click="enterIconLoading"> 延迟1s </f-button>
    </f-space>
    <f-space>
      <f-button type="primary" loading />
      <f-button type="primary" shape="circle" loading />
      <f-button danger shape="round" loading />
    </f-space>
  </f-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

interface DelayLoading {
  delay: number
}
export default defineComponent({
  setup() {
    const iconLoading = ref<boolean | DelayLoading>(false)
    const enterIconLoading = () => {
      iconLoading.value = { delay: 1000 }

      setTimeout(() => {
        iconLoading.value = false
      }, 6000)
    }
    return {
      loading: ref(false),
      iconLoading,
      enterIconLoading,
    }
  },
})
const loadings = ref<boolean[]>([])
const enterLoading = (index: number) => {
  loadings.value[index] = true

  setTimeout(() => {
    loadings.value[index] = false
  }, 6000)
}
</script>

Block 按钮

block 属性将使按钮适合其父宽度。

<template>
  <f-button type="primary" block>Primary111</f-button>
  <br />
  <br />
  <f-button block>Default</f-button>
  <br />
  <br />
  <f-button type="dashed" block>Dashed</f-button>
  <br />
  <br />
  <f-button danger block>Danger</f-button>
  <br />
  <br />
  <f-button type="link" block>Link</f-button>
</template>

按钮尺寸

按钮有大、中、小三种尺寸。

通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

<template>
  <f-space wrap>
    <f-button type="primary" size="large">Large Button</f-button>
    <f-button size="middle">Middle Button</f-button>
    <f-button size="small">Small Button</f-button>
  </f-space>
</template>

<script lang="ts" setup>

</script>

危险按钮

<template>
  <f-space wrap>
    <f-button type="primary" danger>Primary Button</f-button>
    <f-button danger>Default Button</f-button>
    <f-button type="dashed" danger>Dashed Button</f-button>
    <f-button type="text" danger>Text Button</f-button>
    <f-button type="link" danger>Link Button</f-button>
  </f-space>
</template>

<script lang="ts" setup>

</script>

API

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。

按钮的属性说明如下：

属性	说明	类型	默认值	版本
block	将按钮宽度调整为其父宽度的选项	boolean	false
danger	设置危险按钮	boolean	false
disabled	设置按钮失效状态	boolean	false
ghost	幽灵属性，使按钮背景透明	boolean	false
href	点击跳转的地址，指定此属性 button 的行为和 a 链接一致	string	-
htmlType	设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button
icon	设置按钮的图标组件	ReactNode	-
loading	设置按钮载入状态	boolean |	false
shape	设置按钮形状	default | circle | round	default
size	设置按钮大小	large | middle | small	middle
target	相当于 a 链接的 target 属性，href 存在时生效	string	-
type	设置按钮类型	primary | ghost | dashed | link | text | default	default

事件

事件名称	说明	回调参数	版本
onClick	点击按钮时的回调	(event) => void

支持原生 button 的其他所有属性。