Tuniao UI Uniapp V3TnSuspendButton-悬浮按钮
该组件一般用于将按钮现在是页面的指定位置，方便用户进行跳转等操作
仓库地址
安装方式
bash
npm i tnuiv3p-tn-suspend-buttonnpm i tnuiv3p-tn-suspend-button1
bash
pnpm add tnuiv3p-tn-suspend-buttonpnpm add tnuiv3p-tn-suspend-button1
bash
yarn i tnuiv3p-tn-suspend-buttonyarn i tnuiv3p-tn-suspend-button1
组件位置
typescript
import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue'import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue'1
平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
- 通过
icon属性可以设置按钮显示的图标，可以在默认的插槽中设置按钮的内容
vue
<script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" />
</template><script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" />
</template>1
2
3
4
5
2
3
4
5
修改按钮的位置
- 通过
top和right属性可以设置悬浮按钮距离顶部和右边的距离, 默认单位为rpx, 也可以是一个具体的值
vue
<script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" top="90%" right="30" />
</template><script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" top="90%" right="30" />
</template>1
2
3
4
5
2
3
4
5
修改按钮的样式
- 通过
bg-color属性可以修改按钮的背景颜色 - 通过
text-color属性可以修改按钮的文字颜色 - 通过
size属性可以设置按钮的大小，默认单位为rpx, 内置sm、lg、xl
vue
<script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" size="sm" />
</template><script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" size="sm" />
</template>1
2
3
4
5
2
3
4
5
vue
<script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" size="140" />
</template><script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" size="140" />
</template>1
2
3
4
5
2
3
4
5
修改按钮的形状
- 通过
shape属性可以修改按钮的形状，默认为circle，内置circle、square
vue
<script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" shaepe="square" />
</template><script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" shaepe="square" />
</template>1
2
3
4
5
2
3
4
5
修改按钮的定位方式
- 通过
fixed参数可以设置按钮是相对于页面还是相对于父元素进行定位，默认为true，即相对于页面进行定位
vue
<script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" :fixed="false" />
</template><script setup lang="ts"></script>
<template>
<TnSuspendButton icon="logo-tuniao" :fixed="false" />
</template>1
2
3
4
5
2
3
4
5
API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| icon | 按钮显示的图标 | String | - | 图标有效值 |
| top | 按钮距离顶部的距离，默认单位为rpx | String | 80% | - |
| right | 按钮距离右边的距离，默认单位为rpx | String | 5% | - |
| bg-color | 按钮背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | tn-type-primary | - |
| text-color | 按钮文字的颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | tn-color-white | - |
| size | 按钮的尺寸，默认单位为rpx，内置了sm、lg、xl | String | - | sm、lg、xl |
| shape | 按钮的形状 | String | circle | shape |
| opacity | 按钮的透明度 | Number | 0.9 | - |
| shadow | 是否显示阴影 | Boolean | true | false |
| float | 是否显示漂浮的动画 | Boolean | true | false |
| fixed | 是否固定位置 | Boolean | true | false |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 按钮的内容 |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 按钮点击事件 | () => void |