Skip to content
12:13

TnSuspendButton-悬浮按钮

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

仓库地址

Github

npmjs

安装方式

bash
npm i tnuiv3p-tn-suspend-button
npm i tnuiv3p-tn-suspend-button
bash
pnpm add tnuiv3p-tn-suspend-button
pnpm add tnuiv3p-tn-suspend-button
bash
yarn i tnuiv3p-tn-suspend-button
yarn i tnuiv3p-tn-suspend-button

组件位置

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

平台差异说明

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>

修改按钮的位置

  • 通过topright属性可以设置悬浮按钮距离顶部和右边的距离, 默认单位为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>

修改按钮的样式

  • 通过bg-color属性可以修改按钮的背景颜色
  • 通过text-color属性可以修改按钮的文字颜色
  • 通过size属性可以设置按钮的大小,默认单位为rpx, 内置smlgxl
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>
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>

修改按钮的形状

  • 通过shape属性可以修改按钮的形状,默认为circle,内置circlesquare
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>

修改按钮的定位方式

  • 通过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>

API

Props

属性名说明类型默认值可选值
icon按钮显示的图标String-图标有效值
top按钮距离顶部的距离,默认单位为rpxString80%-
right按钮距离右边的距离,默认单位为rpxString5%-
bg-color按钮背景颜色,可以使用图鸟内置的背景色、hex、rgb、rgbaStringtn-type-primary-
text-color按钮文字的颜色,支持图鸟内置的颜色值、hex、rgb、rgbaStringtn-color-white-
size按钮的尺寸,默认单位为rpx,内置了smlgxlString-smlgxl
shape按钮的形状Stringcircleshape
opacity按钮的透明度Number0.9-
shadow是否显示阴影Booleantruefalse
float是否显示漂浮的动画Booleantruefalse
fixed是否固定位置Booleantruefalse

Slots

插槽名说明
default按钮的内容

Emits

事件名说明类型
click按钮点击事件() => void

Tuniao UI