131 lines
4.9 KiB
Markdown
131 lines
4.9 KiB
Markdown
# 图鸟 UI vue3 uniapp Plugins - 悬浮按钮
|
|
|
|
|
|
|
|
[Tuniao UI vue3官方仓库](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)
|
|
|
|
该组件一般用于将按钮现在是页面的指定位置，方便用户进行跳转等操作
|
|
|
|
## 组件安装
|
|
|
|
```bash
|
|
npm install tnuiv3p-tn-suspend-button
|
|
```
|
|
|
|
## 组件位置
|
|
|
|
```typescript
|
|
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>
|
|
```
|
|
|
|
## 修改按钮的位置
|
|
|
|
- 通过`top`和`right`属性可以设置悬浮按钮距离顶部和右边的距离, 默认单位为`rpx`, 也可以是一个具体的值
|
|
|
|
```vue
|
|
<script setup lang="ts"></script>
|
|
|
|
<template>
|
|
<TnSuspendButton icon="logo-tuniao" top="90%" right="30" />
|
|
</template>
|
|
```
|
|
|
|
## 修改按钮的样式
|
|
|
|
- 通过`bg-color`属性可以修改按钮的背景颜色
|
|
- 通过`text-color`属性可以修改按钮的文字颜色
|
|
- 通过`size`属性可以设置按钮的大小，默认单位为`rpx`, 内置`sm`、`lg`、`xl`
|
|
|
|
```vue
|
|
<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>
|
|
```
|
|
|
|
## 修改按钮的形状
|
|
|
|
- 通过`shape`属性可以修改按钮的形状，默认为`circle`，内置`circle`、`square`
|
|
|
|
```vue
|
|
<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>
|
|
```
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|
|
| ---------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
|
|
| icon | 按钮显示的图标 | String | - | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
|
|
| top | 按钮距离顶部的距离，默认单位为`rpx` | String | 80% | - |
|
|
| right | 按钮距离右边的距离，默认单位为`rpx` | String | 5% | - |
|
|
| bg-color | 按钮背景颜色，可以使用图鸟内置的[背景色](https://vue3.tuniaokj.com/zh-CN/guide/style/background.html)、hex、rgb、rgba | String | `tn-type-primary` | - |
|
|
| text-color | 按钮文字的颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、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` |
|
|
|