T-Button 按钮
- 示例代码路径：
/pages/components/t-button/t-button - 示例代码地址：https://gitee.com/turbo-ui/turbo-ui-demo/tree/master/pages/components/t-button/t-button
兼容端
| 安卓 | 苹果 | Web | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|
| ✅ | ✅ | ✅ | ❌ | ✅ |
使用示例
vue
<template>
<t-navbar title="按钮组件" :is-back="true"></t-navbar>
<t-page :loading="state.loading">
<t-card :ma="['8','15']" title="主要按钮">
<t-button type="default" :ma="['0','0','15','0']">默认按钮</t-button>
<t-button type="primary" :ma="['0','0','15','0']">主题按钮</t-button>
<t-button type="error" :ma="['0','0','15','0']">错误按钮</t-button>
<t-button type="success" :ma="['0','0','15','0']">成功按钮</t-button>
<t-button type="warning" :ma="['0','0','15','0']">警告按钮</t-button>
</t-card>
<t-card :ma="['8','15']" title="次要按钮">
<t-button type="default" :secondary="true" :ma="['0','0','15','0']">默认按钮</t-button>
<t-button type="primary" :secondary="true" :ma="['0','0','15','0']">主题按钮</t-button>
<t-button type="error" :secondary="true" :ma="['0','0','15','0']">错误按钮</t-button>
<t-button type="success" :secondary="true" :ma="['0','0','15','0']">成功按钮</t-button>
<t-button type="warning" :secondary="true" :ma="['0','0','15','0']">警告按钮</t-button>
</t-card>
<t-card :ma="['8','15']" title="镂空">
<t-button :sidelines="true" type="default" :ma="['0','0','15','0']">默认按钮</t-button>
<t-button :sidelines="true" type="primary" :ma="['0','0','15','0']">主题按钮</t-button>
<t-button :sidelines="true" type="error" :ma="['0','0','15','0']">错误按钮</t-button>
<t-button :sidelines="true" type="success" :ma="['0','0','15','0']">成功按钮</t-button>
<t-button :sidelines="true" type="warning" :ma="['0','0','15','0']">警告按钮</t-button>
</t-card>
<t-card title="尺寸" :ma="['8','15']">
<t-button type="primary" size="tiny" :ma="['0','0','15','0']" :block="false">tiny按钮</t-button>
<t-button type="primary" size="small" :ma="['0','0','15','0']" :block="false">small按钮</t-button>
<t-button type="primary" size="medium" :ma="['0','0','15','0']" :block="false">medium按钮</t-button>
<t-button type="primary" size="large" :ma="['0','0','15','0']" :block="false">large按钮</t-button>
</t-card>
<t-card title="图标" :ma="['8','15']">
<t-button icon="home-fill" type="primary" :ma="['0','0','15','0']">主题按钮</t-button>
<t-button icon="home-fill" icon-direction="right" type="success" :ma="['0','0','15','0']">主题按钮</t-button>
</t-card>
<t-card title="插槽" :ma="['8','15']">
<t-button type="primary" :ma="['0','0','15','0']">
<template v-slot:left>
<t-image width="20" height="20" src="/static/logo.png"></t-image>
</template>
<template v-slot:default>左插槽按钮</template>
</t-button>
<t-button icon-direction="right" type="success" :ma="['0','0','15','0']">
<template v-slot:right>
<t-image width="20" height="20" src="/static/logo.png"></t-image>
</template>
<template v-slot:default>右插槽按钮</template>
</t-button>
</t-card>
<t-card title="块级" :ma="['8','15']">
<t-button type="primary" :ma="['0','0','15','0']" :block="false">块级按钮</t-button>
</t-card>
<t-card title="自定义样式" :ma="['8','15']">
<t-button bgColor="#f81f81" :sidelines="true" :ma="['0','0','15','0']" :block="false">边线按钮</t-button>
<t-button bgColor="#f81f81" :secondary="true" :ma="['0','0','15','0']" :block="false">次要按钮</t-button>
<t-button bgColor="#f81f81" color="#ffffff" :ma="['0','0','15','0']" :block="false">背景色按钮</t-button>
<t-button bgColor="#f81f81" color="#ffffff" :round="['25','25']" :ma="['0','0','15','0']" :block="false">圆角按钮</t-button>
</t-card>
</t-page>
</template>
<script setup lang="uts">
type stateType = {
loading: boolean
}
const state = reactive<stateType>({
loading: false
} as stateType)
onReady(() => {
state.loading = true
})
</script>属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | "default" | 按钮主题类型，可选值：default/primary/error/success/warning |
| round | Array<string> | ['10','10'] | 圆角大小 |
| border | String | "" | 边线样式 |
| width | String | "auto" | 按钮宽度 |
| height | String | "45" | 按钮高度 |
| bgColor | String | "" | 背景颜色 |
| color | String | "#333333" | 文字颜色 |
| fontSize | String | "15" | 文字大小 |
| block | Boolean | true | 是否为块级按钮 |
| size | String | "" | 按钮尺寸，可选值：tiny/small/medium/large |
| link | Boolean | false | 是否为链接模式 |
| linkMode | String | "navigateTo" | 链接模式，可选值：navigateTo/redirectTo/reLaunch/switchTab/navigateBack |
| linkType | String | "" | 链接动画类型 |
| linkAnimationDuration | Number | 0 | 链接动画时长(ms) |
| linkUrl | String | "" | 链接地址 |
| ma | Array<string> | ['0','0'] | margin值 |
| pa | Array<string> | ['0','0'] | padding值 |
| icon | String | "" | 图标名称 |
| iconDirection | String | "left" | 图标方向，可选值：left/right |
| iconColor | String | "#ffffff" | 图图标颜色 |
| iconSize | String | "18" | 图标大小 |
| iconDark | Boolean | false | 是否开启图标暗黑模式自适应 |
| sidelines | Boolean | false | 是否为边线/镂空样式 |
| secondary | Boolean | false | 是否为次要按钮 |
| dark | Boolean | true | 是否为暗黑模式自适应 |
方法
| 方法名 | 说明 |
|---|---|
| click | 按钮点击事件 |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 按钮文本内容 |
| left | 左侧图标插槽 |
| right | 右侧图标插槽 |