图鸟 UI vue3 uniapp Plugins - 悬浮按钮

Tuniao UI vue3官方仓库

该组件一般用于将按钮现在是页面的指定位置，方便用户进行跳转等操作

组件安装

1npm install tnuiv3p-tn-suspend-button

组件位置

1import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue'

平台差异说明

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

基础使用

• 通过icon属性可以设置按钮显示的图标，可以在默认的插槽中设置按钮的内容

1<script setup lang="ts"></script>
2
3<template>
4  <TnSuspendButton icon="logo-tuniao" />
5</template>

修改按钮的位置

• 通过top和right属性可以设置悬浮按钮距离顶部和右边的距离, 默认单位为rpx, 也可以是一个具体的值

1<script setup lang="ts"></script>
2
3<template>
4  <TnSuspendButton icon="logo-tuniao" top="90%" right="30" />
5</template>

修改按钮的样式

• 通过bg-color属性可以修改按钮的背景颜色
• 通过text-color属性可以修改按钮的文字颜色
• 通过size属性可以设置按钮的大小，默认单位为rpx, 内置sm、lg、xl

1<script setup lang="ts"></script>
2
3<template>
4  <TnSuspendButton icon="logo-tuniao" size="sm" />
5</template>

1<script setup lang="ts"></script>
2
3<template>
4  <TnSuspendButton icon="logo-tuniao" size="140" />
5</template>

修改按钮的形状

• 通过shape属性可以修改按钮的形状，默认为circle，内置circle、square

1<script setup lang="ts"></script>
2
3<template>
4  <TnSuspendButton icon="logo-tuniao" shaepe="square" />
5</template>

修改按钮的定位方式

• 通过fixed参数可以设置按钮是相对于页面还是相对于父元素进行定位，默认为true，即相对于页面进行定位

1<script setup lang="ts"></script>
2
3<template>
4  <TnSuspendButton icon="logo-tuniao" :fixed="false" />
5</template>

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