Kun-UI

Appearance

Return to top
On this page

Button

基本按钮组件

基本使用

通过 type 设置按钮类型, plain 设置朴素按钮

<template>
  <div>
    <kun-button>默认按钮</kun-button>
    <kun-button type="primary">主要按钮</kun-button>
    <kun-button type="success">成功按钮</kun-button>
    <kun-button type="warn">警告按钮</kun-button>
    <kun-button type="error">错误按钮</kun-button>
  </div> 

  <div>
    <kun-button plain>默认按钮</kun-button>
    <kun-button type="primary" plain>主要按钮</kun-button>
    <kun-button type="success" plain>成功按钮</kun-button>
    <kun-button type="warn" plain>警告按钮</kun-button>
    <kun-button type="error" plain>错误按钮</kun-button>
  </div> 

  <div>
    <kun-button round>默认按钮</kun-button>
    <kun-button type="primary" round>主要按钮</kun-button>
    <kun-button type="success" round>成功按钮</kun-button>
    <kun-button type="warn" round>警告按钮</kun-button>
    <kun-button type="error" round>错误按钮</kun-button>
  </div> 
</template>

按钮大小

通过 size 设置按钮大小

<template>
  <div>
    <kun-button type="primary" size="small">小号按钮</kun-button>
    <kun-button type="primary">中号按钮</kun-button>
    <kun-button type="primary" size="large">大号按钮</kun-button>
  </div> 
</template>

图标按钮

通过 icon 属性设置图标

<template>
  <div>
    <kun-button type="primary" icon="search" plain>搜索</kun-button>
    <kun-button type="primary" icon="search" round></kun-button>
  </div> 
</template>

Button Attributes

参数说明类型可选值默认值
type按钮类型stringdefault, success, warn, primary, errordefault
size按钮大小stringsmall, medium, largemedium
plain是否朴素按钮boolean-false
round是否圆角按钮boolean-false
icon图标类型string-''

Events

事件名称说明
click按钮点击