ERP 组件库

Appearance

按钮 Button ​

按钮是一种命令组件，可发起一个即时操作。 ​

基本用法 ​

按钮分为 primary - 主要按钮、secondary - 次要按钮（默认）、dashed - 虚线按钮、outline - 线形按钮、text - 文本按钮五种类型。

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary">Primary</fk-button>
    <fk-button type="info">Info</fk-button>
    <fk-button>Secondary</fk-button>
    <fk-button disabled>Secondary</fk-button>
    <fk-button type="dashed">Dashed</fk-button>
    <fk-button type="outline">Outline</fk-button>
    <fk-button type="text">Text</fk-button>
    <fk-button type="outline" status="default">Outline default</fk-button>
  </fk-space>
</template>

防抖 ​

按钮防抖属性 debounce 为 true 动画帧级别的防抖，debounce 为 number，防抖时间，为 false 不防抖 默认为 true

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary" @click="handleClick(ev)">动画防抖</fk-button>
    <fk-button type="primary" :debounce="false" @click="handleClick(ev)">不防抖</fk-button>
    <fk-button type="primary" :debounce="1000" @click="handleClick(ev)">100ms防抖</fk-button>
  </fk-space>
</template>
<script setup lang="ts">
let now = Date.now();
const handleClick = (ev) => {
  const clickTime = Date.now();
  console.log('handleClick >>', ev, clickTime - now);
  now = clickTime;
}
</script>

图标按钮 ​

按钮可以嵌入图标。在只设置图标时，按钮的宽高相等。

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary">
      <template #icon>
        <icon-plus />
      </template>
    </fk-button>
    <fk-button type="primary">
      <template #icon>
        <icon-delete />
      </template>
      <!-- Use the default slot to avoid extra spaces -->
      <template #default>Delete</template>
    </fk-button>
    <fk-button type="info">
      <template #icon>
        <icon-delete />
      </template>
      <!-- Use the default slot to avoid extra spaces -->
      <template #default>Delete</template>
    </fk-button>
  </fk-space>
</template>

<script>
import { IconDelete, IconPlus } from '@erp/common';

export default {
  components: { IconPlus, IconDelete }
};
</script>

按钮形状 ​

按钮分为 square - 长方形（默认）、circle - 圆形、round - 全圆角三种形状。

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary">Square</fk-button>
    <fk-button type="primary" shape="round">Round</fk-button>
    <fk-button type="primary">
      <template #icon>
        <icon-plus />
      </template>
    </fk-button>
    <fk-button type="primary" shape="circle">
      <icon-plus />
    </fk-button>
    <fk-button type="info" shape="circle">
      <icon-plus />
    </fk-button>
  </fk-space>
</template>
<script>
import { IconPlus } from '@erp/common';

export default {
  components: { IconPlus }
};
</script>

按钮尺寸 ​

按钮分为 mini、small、medium、large 四种尺寸。高度分别为：24px、28px、32px、36px。推荐（默认）尺寸为 medium。可在不同场景及不同业务需求选择适合尺寸。

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary" size="mini">Mini</fk-button>
    <fk-button type="primary" size="small">Small</fk-button>
    <fk-button type="primary">Medium</fk-button>
    <fk-button type="primary" size="large">Large</fk-button>
  </fk-space>
</template>

按钮状态 ​

按钮的状态分为 normal - 正常（默认）、success - 成功、warning - 警告、danger - 危险四种，可以与按钮类型同时使用。

代码事例
vue
<template>
  <fk-space direction="vertical">
    <fk-space>
      <fk-button type="primary" status="success">Primary</fk-button>
      <fk-button type="info" status="success">Info</fk-button>
      <fk-button status="success">Default</fk-button>
      <fk-button type="dashed" status="success">Dashed</fk-button>
      <fk-button type="outline" status="success">Outline</fk-button>
      <fk-button type="text" status="success">Text</fk-button>
    </fk-space>
    <fk-space>
      <fk-button type="primary" status="warning">Primary</fk-button>
      <fk-button type="info" status="warning">Info</fk-button>
      <fk-button status="warning">Default</fk-button>
      <fk-button type="dashed" status="warning">Dashed</fk-button>
      <fk-button type="outline" status="warning">Outline</fk-button>
      <fk-button type="text" status="warning">Text</fk-button>
    </fk-space>
    <fk-space>
      <fk-button type="primary" status="danger">Primary</fk-button>
      <fk-button type="info" status="danger">Info</fk-button>
      <fk-button status="danger">Default</fk-button>
      <fk-button type="dashed" status="danger">Dashed</fk-button>
      <fk-button type="outline" status="danger">Outline</fk-button>
      <fk-button type="text" status="danger">Text</fk-button>
    </fk-space>
  </fk-space>
</template>

禁用状态 ​

按钮的禁用状态。

代码事例
vue
<template>
  <fk-space direction="vertical">
    <fk-space>
      <fk-button type="primary" disabled>Primary</fk-button>
      <fk-button type="info" disabled>Info</fk-button>
      <fk-button disabled>Default</fk-button>
      <fk-button type="dashed" disabled>Dashed</fk-button>
      <fk-button type="outline" disabled>Outline</fk-button>
      <fk-button type="text" disabled>Text</fk-button>
    </fk-space>
    <fk-space>
      <fk-button type="primary" status="success" disabled>Primary</fk-button>
      <fk-button type="info"  status="success" disabled>Info</fk-button>
      <fk-button status="success" disabled>Default</fk-button>
      <fk-button type="dashed" status="success" disabled>Dashed</fk-button>
      <fk-button type="outline" status="success" disabled>Outline</fk-button>
      <fk-button type="text" status="success" disabled>Text</fk-button>
    </fk-space>
    <fk-space>
      <fk-button type="primary" status="warning" disabled>Primary</fk-button>
      <fk-button type="info"  status="warning" disabled>Info</fk-button>
      <fk-button status="warning" disabled>Default</fk-button>
      <fk-button type="dashed" status="warning" disabled>Dashed</fk-button>
      <fk-button type="outline" status="warning" disabled>Outline</fk-button>
      <fk-button type="text" status="warning" disabled>Text</fk-button>
    </fk-space>
    <fk-space>
      <fk-button type="primary" status="danger" disabled>Primary</fk-button>
      <fk-button type="info"  status="danger" disabled>Info</fk-button>
      <fk-button status="danger" disabled>Default</fk-button>
      <fk-button type="dashed" status="danger" disabled>Dashed</fk-button>
      <fk-button type="outline" status="danger" disabled>Outline</fk-button>
      <fk-button type="text" status="danger" disabled>Text</fk-button>
    </fk-space>
  </fk-space>
</template>

加载中状态 ​

通过设置 loading 可以让按钮处于加载中状态。处于加载中状态的按钮不会触发点击事件。

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary" loading>Primary</fk-button>
    <fk-button loading>Default</fk-button>
    <fk-button type="dashed" loading>Dashed</fk-button>
    <fk-button type="primary" :loading="loading1" @click="handleClick1">Click Me</fk-button>
    <fk-button type="primary" :loading="loading2" @click="handleClick2">
      <template #icon>
        <icon-plus />
      </template>
      Click Me
    </fk-button>
  </fk-space>
</template>

<script>
import { ref } from 'vue';
import { IconPlus } from '@erp/common';

export default {
  components: {
    IconPlus
  },
  setup() {
    const loading1 = ref(false);
    const loading2 = ref(false);

    const handleClick1 = () => {
      loading1.value = !loading1.value
    }
    const handleClick2 = () => {
      loading2.value = !loading2.value
    }

    return {
      loading1,
      loading2,
      handleClick1,
      handleClick2
    }
  }
}
</script>

长按钮 ​

通过设置 long 属性，使按钮的宽度跟随容器的宽度。

代码事例
vue
<template>
  <fk-space class="wrapper" direction="vertical">
    <fk-button type="primary" long>Primary</fk-button>
    <fk-button long>Default</fk-button>
    <fk-button type="dashed" long>Dashed</fk-button>
    <fk-button type="outline" long>Outline</fk-button>
    <fk-button type="text" long>Text</fk-button>
  </fk-space>
</template>

<style scoped lang="less">
.wrapper{
  width: 400px;
  padding: 20px;
  border: 1px solid var(~'--color-border');
  border-radius: 4px;
}
</style>

组合按钮 ​

通过 <fk-button-group> 组件使按钮以组合方式出现。可用在同级多项操作中。

代码事例
vue
<template>
  <fk-space direction="vertical">
    <fk-button-group>
      <fk-button>Publish</fk-button>
      <fk-button>
        <template #icon>
          <icon-down />
        </template>
      </fk-button>
    </fk-button-group>
    <fk-button-group>
      <fk-button>Publish</fk-button>
      <fk-button>
        <template #icon>
          <icon-more />
        </template>
      </fk-button>
    </fk-button-group>
    <fk-button-group>
      <fk-button type="primary">
        <icon-left />
        Prev
      </fk-button>
      <fk-button type="primary">
        Next
        <icon-right />
      </fk-button>
    </fk-button-group>
    <fk-space size="large">
      <fk-button-group type="primary">
        <fk-button> copy </fk-button>
        <fk-button> cut </fk-button>
        <fk-button> find </fk-button>
      </fk-button-group>
      <fk-button-group type="primary" status="warning">
        <fk-button> <template #icon><icon-heart-fill /></template> </fk-button>
        <fk-button> <template #icon><icon-star-fill /></template> </fk-button>
        <fk-button> <template #icon><icon-thumb-up-fill /></template> </fk-button>
      </fk-button-group>
      <fk-button-group size="small" disabled>
        <fk-button> prev </fk-button>
        <fk-button> next </fk-button>
      </fk-button-group>
    </fk-space>
  </fk-space>
</template>

API ​

<button> Props ​

参数名描述类型默认值
type按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。ButtonTypes'secondary'
shape按钮的形状BorderShape-
status按钮的状态'normal' | 'warning' | 'success' | 'danger''normal'
size按钮的尺寸'mini' | 'small' | 'medium' | 'large''medium'
long按钮的宽度是否随容器自适应。booleanfalse
loading按钮是否为加载中状态booleanfalse
disabled按钮是否禁用booleanfalse
html-type设置 button 的原生 type 属性，可选值参考 HTML标准Pick<ButtonHTMLAttributes, 'type'>['type']'button'
href设置跳转链接。设置此属性时，按钮渲染为a标签。string-
label设置 button 的文本string-
icon图标样式string-

<button> Events ​

事件名描述参数
click点击按钮时触发ev: MouseEvent

<button> Slots ​

插槽名描述参数
icon图标-

<button-group> Props ​

参数名描述类型默认值
type按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。ButtonTypes-
status按钮的状态'normal' | 'warning' | 'success' | 'danger'-
shape按钮的形状BorderShape-
size按钮的尺寸'mini' | 'small' | 'medium' | 'large'-
disabled全部子按钮是否禁用booleanfalse

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team