Button 按钮

该组件内部实现以 uni-app button 组件为基础，进行二次封装，主要区别在于：

• 新增了type属性，用于设置按钮类型
• 新增了size属性，用于设置按钮大小
• 新增了is-ripple属性，用于设置按钮点击涟漪效果

注意

按钮开放能力与 uni-app 按钮组件保持一致，不新增任何功能。参考uni-app 按钮组件

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

<see-button title="默认按钮" />

设置按钮参数

按钮类型

<see-button title="默认按钮" />
<see-button title="主要按钮" type="primary" />
<see-button title="失败按钮" type="error" />
<see-button title="警告按钮" type="warning" />
<see-button title="成功按钮" type="success" />

镂空按钮

<see-button isHollow title="默认按钮" />
<see-button isHollow title="主要按钮" type="primary" />
<see-button isHollow title="失败按钮" type="error" />
<see-button isHollow title="警告按钮" type="warning" />
<see-button isHollow title="成功按钮" type="success" />

禁用按钮

<see-button isDisabled title="默认按钮" />
<see-button isDisabled title="主要按钮" type="primary" />
<see-button isDisabled title="失败按钮" type="error" />
<see-button isDisabled title="警告按钮" type="warning" />
<see-button isDisabled title="成功按钮" type="success" />

按钮大小

<see-button size="normal" title="默认大小" />
<see-button size="small" title="小型尺寸" />
<see-button size="mini" title="最小尺寸" />
<see-button size="large" title="超大尺寸" />

水波动画

<see-button title="默认动画" isRipple />
<see-button type="primary" size="normal" title="按钮颜色" isRipple />
<see-button size="normal" title="动画颜色" isRipple ripple-color="blue" />
<see-button
  size="large"
  title="动画时长(10000ms)"
  isRipple
  ripple-time="10000"
  ripple-color="red"
  mask-time="20000"
/>

自定义

组合式

<see-button :customStyle="customStyle" title="自定义宽高" />
<see-button :radius="24" title="圆角按钮" />
<see-button
  size="large"
  title="渐变色按钮"
  textColor="#FFFFFF"
  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
  isRipple
/>
<see-button title="自定义颜色" color="#8A4D35" textColor="#FFFFFF" isRipple />
<see-button title="传入一个view">
  <view style="width: 10px; height: 10px; border: 1px red solid" />
</see-button>
<see-button size="large">
  <text>标题以slot形式</text>
</see-button>

<script lang="ts" setup>
const customStyle = {
  width: "200px",
  height: "150px",
};
</script>

选项式

<see-button :customStyle="customStyle" title="自定义宽高" />
<see-button :radius="24" title="圆角按钮" />
<see-button
  size="large"
  title="渐变色按钮"
  textColor="#FFFFFF"
  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
  isRipple
/>
<see-button title="自定义颜色" color="#8A4D35" textColor="#FFFFFF" isRipple />
<see-button title="传入一个view">
  <view style="width: 10px; height: 10px; border: 1px red solid" />
</see-button>
<see-button size="large">
  <text>标题以slot形式</text>
</see-button>

<script>
export default {
  data() {
    return {
      customStyle: {
        width: "200px",
        height: "150px",
      };
    };
  },
};
</script>

API

Props

参数名	说明	类型	默认值	可选值	平台差异
title	按钮文本内容	String	''	任意字符串	-
size	按钮尺寸	"normal" | "large" | "small" | "mini"	'normal'	normal、large、small、mini	-
type	按钮类型（预置样式）	"info" | "primary" | "error" | "warning" | "success"	'info'	info、primary、error、warning、success	-
color	自定义背景色（会覆盖 type 的默认颜色）	String	''	任意 CSS 颜色值	-
textColor	文本颜色	String	''	任意 CSS 颜色值	-
isRipple	是否启用水波纹点击效果	Boolean	false	true、false	-
rippleTime	水波纹扩散动画时长（毫秒）	Number	500	任意数字（建议 300–800）	-
maskTime	水波纹淡出遮罩时长（毫秒）	Number	1000	任意数字（建议为 rippleTime 的 2 倍）	-
rippleColor	点击产生的涟漪颜色	String	'rgba(0,0,0,.15)'	任意 CSS 颜色值	-
rippleStyle	涟漪的自定义 style（如透明度、动画方式等）	String	''	任意字符串	-
customStyle	自定义按钮 style（整体覆盖外层 view + 内部 button）	String	''	任意字符串	-
hoverClass	点击时的 hover 样式（H5 & 小程序有效）	String / Null	''	传入自定义 class 名	-
border	边框开关（使用 box-shadow 模拟边框）	1 | 0	1	1（有边框）、0（无边框）	-
isDisabled	是否禁用按钮	Boolean	false	true、false	-
radius	按钮圆角（px）	Number	4	任意数字	-
isHollow	是否为镂空按钮（反色按钮）	Boolean	false	true、false	-

Events

属性名	说明	类型	默认值	可选值	平台差异说明
click	点击按钮时触发	无	-	-	-