TnButton-按钮

该组件内部实现以 uni-app 的button组件为基础，对其进行了扩展，使其能够在 uni-app 的各个平台上表现一致。

组件位置

nodeuni_modules

typescript

import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'

import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'

typescript

import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'

import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'

按钮type值可以修改按钮的主题颜色
按钮size值可以修改按钮的尺寸

注意

此组件内部使用 uni-appbutton 组件为基础，除了开头中所说的增加的功能，另外暴露出来的 props 属性和官方组件的属性完全一致， uni-appbutton 组件比较特殊，因为它有一些其他小程序平台的特定能力，请参考文档后面的参数列表，更详细说明请参 uni-app 方文档：uni-app 官方 button 组件
由于微信小程序的限制，在微信小程序中设置了 form-type 的 u-button 无法触发 form 组件的 submit 事件(H5 和 APP 正常)，详见微信小程序文档Bug & Tip 部分

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基本使用

通过slot插槽来设置按钮的内容

vue

<TnButton>按钮</TnButton>

<TnButton>按钮</TnButton>

阻止点击事件冒泡

为了兼顾多种情况，组件默认是没有阻止点击事件冒泡的，如果需要阻止点击事件冒泡，可以通过click-modifiers参数来设置，参数值为stop，此时点击事件就不会冒泡了。

提示

不要问为什么不在click事件后面加.stop，因为官方不支持啊，只能通过click-modifiers参数来设置。 vue 官方说明

vue

<TnButton click-modifiers="stop">按钮</TnButton>

<TnButton click-modifiers="stop">按钮</TnButton>

设置按钮样式

type值可选的有primary、success、warning、danger、info，默认为空，即默认按钮
通过shape设置按钮的形状
将text设置为true，此时按钮的背景色设置为透明，主题色会变成字体颜色
将plain设置为true，此时按钮为朴素按钮，只显示一个边框，主题色会变成边框的颜色
通过icon设置按钮为图标按钮，icon 可选值参考图标
通过bold设置按钮的字体是否加粗
通过font-size设置按钮的字体大小
通过bg-color设置按钮背景颜色
通过text-color设置按钮字体颜色
通过border-color设置按钮边框颜色，需要将plain设置为true
通过shadow设置按钮是否显示阴影
通过shadow-color设置按钮阴影颜色，需要将shadow设置为true
通过size设置按钮的大小，可选值为sm、lg、xl，默认为空，即默认按钮
通过width设置按钮的宽度，默认单位为 rpx，可以传递带单位的字符串
通过height设置按钮的高度，默认单位为 rpx，可以传递带单位的字符串

vue

<TnButton type="primary">按钮</TnButton>
<TnButton type="success">按钮</TnButton>
<TnButton type="warning">按钮</TnButton>
<TnButton type="danger">按钮</TnButton>
<TnButton type="info">按钮</TnButton>

<TnButton type="primary">按钮</TnButton>
<TnButton type="success">按钮</TnButton>
<TnButton type="warning">按钮</TnButton>
<TnButton type="danger">按钮</TnButton>
<TnButton type="info">按钮</TnButton>

vue

<TnButton bg-color="tn-blue">按钮</TnButton>
<TnButton bg-color="gradient__cool-1">按钮</TnButton>
<TnButton bg-color="#01beff">按钮</TnButton>
<TnButton bg-color="rgb(1, 190, 255)">按钮</TnButton>

<TnButton bg-color="tn-blue">按钮</TnButton>
<TnButton bg-color="gradient__cool-1">按钮</TnButton>
<TnButton bg-color="#01beff">按钮</TnButton>
<TnButton bg-color="rgb(1, 190, 255)">按钮</TnButton>

vue

<TnButton text-color="tn-blue">按钮</TnButton>
<TnButton text-color="#01beff">按钮</TnButton>
<TnButton text-color="rgb(1, 190, 255)">按钮</TnButton>

<TnButton text-color="tn-blue">按钮</TnButton>
<TnButton text-color="#01beff">按钮</TnButton>
<TnButton text-color="rgb(1, 190, 255)">按钮</TnButton>

vue

<TnButton plain border-color="tn-grey">按钮</TnButton>
<TnButton plain border-color="#01beff">按钮</TnButton>
<TnButton plain border-color="rgb(1, 190, 255)">按钮</TnButton>

<TnButton plain border-color="tn-grey">按钮</TnButton>
<TnButton plain border-color="#01beff">按钮</TnButton>
<TnButton plain border-color="rgb(1, 190, 255)">按钮</TnButton>

vue

<TnButton shadow shadow-color="tn-gray">按钮</TnButton>

<TnButton shadow shadow-color="tn-gray">按钮</TnButton>

vue

<TnButton text>按钮</TnButton>
<TnButton type="primary" text>按钮</TnButton>
<TnButton type="primary" shape="circle">按钮</TnButton>
<TnButton type="primary" shape="round">按钮</TnButton>

<TnButton text>按钮</TnButton>
<TnButton type="primary" text>按钮</TnButton>
<TnButton type="primary" shape="circle">按钮</TnButton>
<TnButton type="primary" shape="round">按钮</TnButton>

vue

<TnButton size="sm">按钮</TnButton>
<TnButton size="lg">按钮</TnButton>
<TnButton size="xl">按钮</TnButton>
<TnButton width="100" height="80">按钮</TnButton>
<TnButton width="100px" height="80px">按钮</TnButton>

<TnButton size="sm">按钮</TnButton>
<TnButton size="lg">按钮</TnButton>
<TnButton size="xl">按钮</TnButton>
<TnButton width="100" height="80">按钮</TnButton>
<TnButton width="100px" height="80px">按钮</TnButton>

使用外部定义的样式

针对非微信小程序平台，组件的根元素就是 uni-appbutton组件，所以修改按钮的样式很容易，直接给组件定义类名或者嵌入内联样式即可。
如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。
如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个 view 元素，控制这个 view 与其他元素的距离或者宽度，即可达到同等效果。

所以：组件提供了一个custom-class和custom-style参数，可以用来给组件定义类名或者嵌入内联样式，这样就可以修改按钮的样式了。自定义样式的时候需要注意驼峰命名法，比如font-size需要写成fontSize。

vue

<script lang="ts" setup>
import type { CSSProperties } from 'vue'

const style: CSSProperties = {
  fontSize: '20px',
  color: 'red',
}
</script>

<template>
  <TnButton custom-class="my-btn" :custom-style="style">按钮</TnButton>
</template>

<style lang="scss" scoped></style>

<script lang="ts" setup>
import type { CSSProperties } from 'vue'

const style: CSSProperties = {
  fontSize: '20px',
  color: 'red',
}
</script>

<template>
  <TnButton custom-class="my-btn" :custom-style="style">按钮</TnButton>
</template>

<style lang="scss" scoped></style>

各家小程序开放能力的对接

图鸟已对接 uni-app 文档关于uni-app 官方 button 组件的所有开放能力(截止 2020-04-14)uni-app 文档说明使用即可，如果有发现遗漏的地方，请加群反馈。

API

Props

属性名	说明	类型	默认值	可选值
width	按钮宽度，默认单位为 rpx，可以传入带单位的尺寸值	String \| Number	-	-
height	按钮高度，默认单位为 rpx，可以传入带单位的尺寸值	String \| Number	-	-
size	按钮尺寸	String	-	`sm` / `lg` / `xl`
shape	按钮形状	String	-	`circle` / `round`
type	按钮颜色类型，设置按钮颜色为主题色	String	primary	`primary` / `success` / `warning` / `danger` / `info`
text	是否显示文本按钮	Boolean	`false`	`true`
plain	是否为朴素、简约按钮	Boolean	`false`	`true`
icon	按钮显示的图标，此时按钮会变成一个图标按钮	String	-	图标有效值
bold	是否加粗字体	Boolean	`false`	`true`
font-size	字体大小，默认单位为 rpx，可以传入带单位的尺寸值	String	-	-
bg-color	按钮背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
text-color	文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
border-bold	是否加粗边框，在`plain`为`true`时有效	Boolean	`false`	`true`
border-color	边框颜色，在`border`为`true`时有效，支持图鸟内置的边框颜色、hex、rgb、rgba	String	-	-
shadow	是否显示阴影	Boolean	`false`	`true`
shadow-color	阴影颜色，在`shadow`为`true`时有效，支持图鸟内置的阴影颜色	String	-	-
hover-class	点击时触发的类	String	`tn-u-btn-hover`	-
custom-style	在外部自定义组件样式	CSSProperties	{}	-
custom-class	在外部作用于组件的类	String	-	-
disabled	是否禁用按钮	Boolean	`false`	`true`
loading	是否显示加载中	Boolean	`false`	`true`
only-button	是否为纯按钮，如果设置为`true`，其他跟样式有关系的参数将无效	Boolean	`false`	`true`
debounce	触发点击事件时是否进行防抖	Boolean	`false`	`true`
click-modifiers	点击事件描述符	String	-	`stop`
form-type	触发 form 表单的事件类型	String	-	`submit` / `reset`
open-type	按钮开放能力，具体能力参考官网https://uniapp.dcloud.io/component/button.html	String	-	-
app-parameter	打开 app 时向 app 传递的参数, 在`微信`、`QQ小程序`和`open-type`为`launchApp`时生效	String	-	-
session-from	会话来源, 在`微信小程序`和`openType`为`contact`时生效	String	-	-
send-message-title	会话内消息卡片标题, 默认为当前标题, 在`微信小程序`和`openType`为`contact`时生效	String	-	-
send-message-path	会话内消息卡片点击跳转小程序路径, 默认为当前路径, 在`微信小程序`和`openType`为`contact`时生效	String	-	-
send-message-img	会话内消息卡片图片, 默认为截图, 在`微信小程序`和`openType`为`contact`时生效	String	-	-
show-message-card	是否显示会话内消息卡片, 设置此参数为 true, 用户进入客服会话会在右下角显示"可能要发送的小程序"提示, 用户点击后可以快速发送小程序消息, 在`微信小程序`和`openType`为`contact`时生效	Boolean	`false`	`true`
phone-number-no-quota-toast	当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示	Boolean	`true`	`false`

Emits

事件名	说明	类型
click	按钮点击事件	`() => void`
getphonenumber	获取用户手机号码回调	`(e: any) => void`
getrealtimephonenumber	获取用户手机号实时验证回调	`(e: any) => void`
opensetting	打开权限设置面板并关闭时回调	`(e: any) => void`
getuserinfo	获取用户信息回调	`(e: any) => void`
chooseavatar	获取用户头像回调	`(e: any) => void`
agreeprivacyauthorization	同意隐私授权回调	`(e: any) => void`
launchapp	打开 APP 成功时回调	`(e: any) => void`
contact	客服消息回调	`(e: any) => void`
error	开放能力调用发生错误时回调	`(e: any) => void`

Slots

插槽名	说明
default	按钮内容

TnButton-按钮 ​

组件位置 ​

平台差异说明 ​

基本使用 ​

阻止点击事件冒泡 ​

设置按钮样式 ​

使用外部定义的样式 ​

各家小程序开放能力的对接 ​

API ​

Props ​

Emits ​

Slots ​