ui-button 按钮组件

版本：v2.3.11

按钮是最常用的操作控件之一，用于触发操作或提交表单

基本使用

<template>
  <div class="button-demo">
    <ui-button type="primary" @click="handleClick">主要按钮</ui-button>
    <ui-button type="success" @click="handleClick">成功按钮</ui-button>
    <ui-button type="warning" @click="handleClick">警告按钮</ui-button>
    <ui-button type="danger" @click="handleClick">危险按钮</ui-button>
    <ui-button type="info" @click="handleClick">信息按钮</ui-button>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了);
};
</script>

<style scoped>
.button-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
type	String	'default'	按钮类型，可选值：primary、success、warning、danger、info、default
size	String	'default'	按钮尺寸，可选值：large、default、small
plain	Boolean	false	是否为朴素按
round	Boolean	false	是否为圆形按
circle	Boolean	false	是否为圆角按
disabled	Boolean	false	是否禁用按钮
loading	Boolean	false	是否显示加载状
icon	String	-	按钮图标类名
href	String	-	按钮链接地址，设置后按钮将渲染为 <a> 标签
target	String	'_self'	链接的目标窗口，仅在设置href 时有
block	Boolean	false	是否为块级按

Events

事件	说明	回调参数
click	按钮点击时触	event: Event

Slots

名称	说明
default	按钮内容
icon	按钮图标，优先级高于 icon 属

示例

不同尺寸的按

<template>
  <div class="button-demo">
    <ui-button type="primary" size="large">大按/ui-button>
    <ui-button type="primary">默认值按钮</ui-button>
    <ui-button type="primary" size="small">小按/ui-button>
  </div>
</template>

不同样式的按

<template>
  <div class="button-demo">
    <ui-button type="primary">默认值按钮</ui-button>
    <ui-button type="primary" plain>朴素按钮</ui-button>
    <ui-button type="primary" round>圆形按钮</ui-button>
    <ui-button type="primary" circle icon="search">搜索</ui-button>
  </div>
</template>

禁用状态的按钮

<template>
  <div class="button-demo">
    <ui-button type="primary" disabled>禁用主要按钮</ui-button>
    <ui-button type="primary" plain disabled>禁用朴素按钮</ui-button>
    <ui-button type="primary" loading>加载中按/ui-button>
  </div>
</template>

图标按钮

<template>
  <div class="button-demo">
    <ui-button type="primary" icon="search">搜索</ui-button>
    <ui-button type="primary" icon="edit">编辑</ui-button>
    <ui-button type="primary" icon="delete">删除</ui-button>
    <ui-button type="primary" icon="plus">添加</ui-button>
  </div>
</template>

块级按钮

<template>
  <div class="button-demo">
    <ui-button type="primary" block>块级主要按钮</ui-button>
    <ui-button type="success" block>块级成功按钮</ui-button>
  </div>
</template>

主题定制

CSS 变量

变量	描述	默认值
--ui-button-primary-bg-color	主要按钮背景	#1E9FFF
--ui-button-primary-border-color	主要按钮边框	#1E9FFF
--ui-button-primary-text-color	主要按钮文本	#FFFFFF
--ui-button-primary-hover-bg-color	主要按钮悬停背景	#4DB3FF
--ui-button-primary-active-bg-color	主要按钮激活背景色	#007ACC

平台兼容

平台	支持情况
H5
微信小程
支付宝小程序
百度小程
字节跳动小程
QQ小程
APP

注意事项

1. 当按钮设置了 href 属性时，按钮将渲染<a> 标签，否则渲染为 <button> 标签
2. 按钮loading 状态会覆盖 disabled 状
3. 图标类名需要根据项目中使用的图标库进行调整

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/button/button