uniapp组件

uniapp组件

官网示例：=144

效果图：

代码实现：

<template><view><uni-fab:pattern="pattern":content="content"horizontal="right"vertical="top"direction="horizontal":popMenu="true"@trigger="trigger"@fabClick="fabClick"/></view>
</template><script>
export default {components: {},data() {return {pattern: {color: 'gray',backgroundColor: '#FFFFFF',selectedColor: '#007AFF',buttonColor:'orange'},content: [{iconPath: '/static/component.png',selectedIconPath: '/static/componentHL.png',text: '组件',active: false},{iconPath: '/static/api.png',selectedIconPath: '/static/apiHL.png',text: 'API',active: true},{iconPath: '/static/template.png',selectedIconPath: '/static/templateHL.png',text: '模版',active: false}]};},methods: {trigger(e) {uni.showModal({title: '提示',content:`激活状态：${e.item.active};选中项：${}`,success(res) {if (firm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});},fabClick() {uni.showToast({title: '点击了悬浮按钮',icon: 'none'});}}
};
</script>

当不指定pattern属性时，其样式为：

当direction="vertical"时，其样式为：

当:popMenu="false"时，组件将不可展开