uni-fab +号事件

【uni-fab +号事件】

<template>
	<view>
		<view>
			<button type="primary" class="btn" @click="switchBtn(0)">
				切换菜单({{directionStr}})示
			</button>
			<button class="btn" type="primary" @click="switchBtn('left', 'bottom')">
				左下角显示
			</button>
			<button class="btn" type="primary" @click="switchBtn('right', 'bottom')">
				右下角显示
			</button>
			<button class="btn" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
			<button class="btn" type="primary" @click="switchBtn('right', 'top')">
				右上角显示
			</button>
		</view>
		<!-- pattern可选样式配置项
			content展开菜单内容配置项
			horizontal水平对齐方式。left:左对齐，right：右对齐
			vertical水平对齐方式。bottom:下对齐，top：上对齐
			direction展开菜单显示方式。horizontal:水平显示，vertical：垂直显示
			trigger展开菜单点击事件，返回点击信息
		 -->
		<uni-fab
			:pattern="pattern"  
			:content="content"
			:horizontal="horizontal"
			:vertical="vertical"
			:direction="direction"
			@trigger="trigger"
		></uni-fab>
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
import uniFab from '@/components/uni-fab.vue';
export default {
	data() {
		return {
			directionStr:'关注',
			// 配置项
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#007AFF'
			},
			content:[
				{
					iconPath: '/static/component.png',
					selectedIconPath: '/static/componentHL.png',
					text: '组件',
					active: false
				},
				{
					iconPath: '/static/api.png',
					selectedIconPath: '/static/apiHL.png',
					text: 'API',
					active: false
				},
				{
					iconPath: '/static/template.png',
					selectedIconPath: '/static/templateHL.png',
					text: '模版',
					active: false
				}
			],
			horizontal: 'left',
			vertical: 'bottom',
			direction: 'horizontal',
		};
	},
	methods: {
		// 垂直/水平方向
		switchBtn(hor,ver){
			if(hor === 0){
				this.direction=this.direction === 'horizontal' ? 'vertical' : 'horizontal';
				this.directionStr = this.direction === 'horizontal' ? '关注' : '取消关注';
			}else{
				this.horizontal=hor;
				this.vertical=ver;
			}
		},
		trigger(e){
			console.log(e);
			// 找到当前内容数组中的索引
			this.content[e.index].active = !e.item.active;
			uni.showModal({
				title: '提示',
				content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
		
		
	},
	components: {
		uniFab,
		uniIcon
	}
};
</script>

<style>
.btn {
	margin: 30upx 0;
}
</style>