uview-plus

# FloatButton 悬浮按钮

悬浮按钮常用于在页面右小角显示快捷菜单用途

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

只显示一个不带展开的悬浮按钮

<style lang='scss' scoped>
<template>
	<view>
        <up-float-button :isMenu="false" top="90px">
        </up-float-button>
	</view>
</template>

<script setup>  
import { ref, onMounted } from 'vue';  
  
// 响应式数据  
const list = ref([
]);
</script>

<script>
export default {
	data() {
		return {
			list: []
		};
	},
	methods: {
	}
};
</script>

# 带子菜单模式

支持点击后展开子菜单

<style lang='scss' scoped>
<template>
	<view>
        <up-float-button :isMenu="true" top="220px"
          :list="list"  @item-click="itemClick">
        </up-float-button>
	</view>
</template>

<script setup>  
import { ref, onMounted } from 'vue';  
  
// 响应式数据  
const list = ref([
    {key: 'plus', name: 'plus', color: '#fff', backgroundColor: 'red'},
    {key: 'order', name: 'order', color: '#fff', backgroundColor: 'green'}
]);

const itemClick = (e) => {
    console.log(e)
}
</script>

<script>
export default {
	data() {
		return {
			list: [
                {key: 'plus', name: 'plus', color: '#fff', backgroundColor: 'red'},
                {key: 'order', name: 'order', color: '#fff', backgroundColor: 'green'}
            ]
		};
	},
	methods: {
        itemClick(e) {
            console.log(e)
        }
	}
};
</script>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

注意：props中没有控制组件弹出与收起的参数，因为这是通过show绑定变量实现的，见上方说明。

参数 说明 类型 默认值 可选值
isMenu 是否展开子菜单 Array -
list 子菜单列表 Boolean false true
top 顶部距离 String -
bottom 底部距离 String -
right 右侧距离 String 30px
backgroundColor 背景色 String #2979ff
color 文字颜色 String #fff
width 宽度 String 50px
height 高度 String 50px
borderColor 边框颜色 String -
height 高度 String 50px

# Slots

名称 说明
defalut 自定义弹出菜单内容 scope={showList}

# Event

事件名 说明 回调参数 版本
click 根按钮点击事件 - -
item-click 子菜单点击事件 - -

← Color 色彩 →