crmcard/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue

<!-- 悬浮按钮 -->
<template>
	<view class="nobody fulled"
		:class="[absolute?'fulled':'',fixed?'d-inline-block':'',absolute&&position=='bottom'?'flex-end-center height100':'']">
		<view  
			:class="[absolute?'fulled':'',absolute?'relative':'',absolute&&position=='top'?'flex-center':'',absolute&&position=='bottom'?'flex-end-center height100':'',fixed?'d-inline-block':'']">

			<view  class="flotbtnId" :style="pos" :class="[absolute?'absolute':'',fixed?'fixed':'']">

				<slot name="default">
					<tm-button
					v-if="isRender"
					@contact="$emit('contact', $event)"
					@error="$emit('error', $event)"
					@getphonenumber="$emit('getphonenumber', $event)"
					@getuserinfo="$emit('getuserinfo', $event)"
					@launchapp="$emit('launchapp', $event)"
					@opensetting="$emit('opensetting', $event)"
					@longpress="$emit('longpress', $event)"
					@touchcancel="$emit('touchcancel', $event)"
					:open-type="openType"
					@click="click"
					 :showValue="showText" vertical :label="label" :fontSize="fontSize"
						 :iconSize="iconSize" :theme="color_tmeme" round="rouned" :font-color="fontColor"  :bgcolor="bgcolor"
						:size="size" :width="width" :height="width" :icon="icon" fab>
					</tm-button>
				</slot>
				<view  v-if="(show || showActions)&&actions.length>0" class="menulistAction" :class="[actionsPos]">
					<view class="menulistAction_item" v-for="(item,index) in actions" :key="index">
						<!-- <tm-badges :dot="false" :label="item.num"></tm-badges> -->
						<text>{{item.num}}</text>
						<tm-button :fllowTheme="false" fab @click="itemChange(index)" iconSize="40" :icon="item.icon" :theme="item.color" size="m"></tm-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 悬浮按钮
	 * @property {Array} actions = [] 默认：[],悬浮按钮展开的子按钮。格式[{icon,color}]
	 * @property {String} actions-pos = [top | left | bottom | right] 默认：top,子菜单按钮显示的方向
	 * @property {String|Boolean} show-actions = [false|true] 默认：false,始终展开子菜单。点击子菜单后不消失.
	 * @property {String|Boolean} click-actions-hiden = [false|true] 默认：true,点击菜单后是否隐藏所有子菜单。
	 * @property {String} size = [xs|s|m|n|l|g] 默认：n, 按钮大小。
	 * @property {String|Number} width = [] 默认：NaN, 自定义按钮大小。
	 * @property {String|Boolean} show-text = [false|true] 默认：false, 是否显示文字。下下排列结构上图标，下文字。
	 * @property {String} label = [] 默认：'', 主按钮下方的文字
	 * @property {String} icon = [] 默认：icon-plus, 默认图标.
	 * @property {String} bgcolor = [] 默认："", 自定义-背景颜色
	 * @property {String|Number} font-size = [22|23|24|26|28] 默认：22, 文字大小
	 * @property {String} font-color = [] 默认：'', 文字颜色
	 * @property {String|Number} icon-size = [] 默认：'36', 图标大小。
	 * @property {String} color = [] 默认：primary,主题颜色
	 * @property {String|Boolean} absolute = [] 默认：false, 相对父组件定位。
	 * @property {String|Boolean} fixed = [] 默认：true, 绝对定位，根据屏幕定位。
	 * @property {String|Boolean} safe = [true|false] 默认：true,// 是否开启底部安全区域。
	 * @property {String} position = [ topLeft | topRight | bottomRight | bottomLeft|top|bottom|left|right] 默认：bottomRight, 在absolute模式下没有left和right剧中。fixed模式包含所有模式。
	 * @property {Array} offset = [] 默认： [16, 16], 单位upx，自定义偏移量，left,right
	 * @property {Function} click 主按钮点击触发的事件。
	 * @property {Function} change 当有子菜单按钮时，点击子按钮触发事件，并返回顺序Index
	 * @example <tm-flotbutton label="发文" show-text="true" ></tm-flotbutton>
	 */
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	export default {
		name:"tm-flotbutton",
		components:{tmButton},
		props: {
			// 子菜单如果有。
			actions: {
				type: Array,
				default: () => {
					return [];
				}
			},
			// 同原生btn相同。contact|getPhoneNumber|getUserInfo|launchapp|share|openSetting
			openType: {
				type: String,
				default: ''
			},
			// 子菜单按钮显示的方向。top | left | bottom | right
			actionsPos: {
				type: String,
				default: 'top'
			},
			// 始终展开子菜单。
			showActions: {
				type: String | Boolean,
				default: false
			},
			// 点击菜单后是否隐藏所有子菜单。
			clickActionsHiden: {
				type: String | Boolean,
				default: true
			},
			// 同button xs,s,m,n,l,g
			size: {
				type: String,
				default: 'n'
			},
			width: {
				type: String | Number,
				default: 100
			},
			height: {
				type: String | Number,
				default: 100
			},
			// 是否显示询问文字
			showText: {
				type: String | Boolean,
				default: false
			},
			// 底部文字。需要和上方同时使用。
			label: {
				type: String,
				default: ''
			},
			icon: {
				type: String,
				default: 'icon-plus'
			},

			// 自定义-背景颜色
			bgcolor: {
				type: String | Array,
				default: ''
			},
			// 文字大小。
			fontSize: {
				type: Number | String,
				default: 22
			},
			// 定义文字颜色
			fontColor: {
				type: String,
				default: 'white'
			},
			// 图标大小。
			iconSize: {
				type: Number | String,
				default: 36
			},
			// 主题颜色
			color: {
				type: String,
				default: 'primary'
			},
			// 根据像组件定位四个角和上下居中位置。6个位置。
			absolute: {
				type: String | Boolean,
				default: false
			},
			//是否开启询问安全距离。如果开启了，会计算底部偏差。
			safe:{
				type: String | Boolean,
				default: true
			},
			// 要的屏幕的宽高定位四个角和上下左右共8个位置
			fixed: {
				type: String | Boolean,
				default: true
			},
			// topLeft | topRight | bottomRight | bottomLeft 。在absolute模式下没有left和right剧中。只有top和bottom剧中模式。fixed模式包含所有模式。
			position: {
				type: String,
				default: 'bottomRight'
			},
			// 单位upx
			offset: {
				type: Array,
				default: () => {
					return [16, 16];
				}
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		computed: {
			offsets: {
				get: function() {
					return this.offset;
				},
				set: function() {
					try {
						this.offset = [uni.upx2px(this.offset[0]), uni.upx2px(this.offset[1])];
					} catch (e) {
						this.offset = [0, 0];
					}
				}
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			pos: {
				get: function() {
					
					return this.thisPos;
				},
				set:function(){
					this.thisPos = this.posfun();
				}
				
			}
		},
		data() {
			return {
				position_info: [],
				show: false,
				isRender:false,
				thisPos:''
			};
		},
		
		async mounted() {
			this.init();
			
		},
		methods: {
			init(){
				let t = this;
				this.$nextTick(function(){
					t.isRender=true;
					t.position_info = [{width:uni.upx2px(this.width),height:uni.upx2px(this.height)}];
					t.thisPos = t.posfun();
				})
				// #ifdef H5
				
				window.addEventListener('scroll',function(){
					t.thisPos = t.posfun();
					
				})
				// #endif
			},
			getsafeJl(){
				let sy = uni.getSystemInfoSync();
				// #ifdef MP
				return Math.abs(sy.screenHeight - sy.safeArea.bottom);
				// #endif
				// #ifdef H5
				return Math.abs(sy.windowHeight - sy.safeArea.height);
				// #endif
				// #ifdef APP
				return Math.abs(sy.safeArea.bottom - sy.safeArea.height);
				// #endif
				return 24;
			},
			posfun(){
				if (this.absolute && !this.fixed) {
					if (this.position == 'topLeft') {
						return `transform:translateY(${this.offset[1]}px);left:${this.offset[0]}px`;
					} else if (this.position == 'topRight') {
						return `transform:translateY(${this.offset[1]}px);right:${this.offset[0]}px;`
					} else if (this.position == 'bottomRight') {
						
						return `transform:translateY(${this.offset[1]}px);right:${this.offset[0]}px;`;
					} else if (this.position == 'bottomLeft') {
						return `btransform:translateY(${this.offset[1]}px);left:${this.offset[0]}px`;
					} else if (this.position == 'top') {
						return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`
					} else if (this.position == 'bottom') {
						return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`
					}
				
				}
				if (!this.absolute && this.fixed) {
					
					if (this.position == 'topLeft') {
						return `top:${ this.offset[1]}px;left:${this.offset[0]}px`;
					} else if (this.position == 'topRight') {
						return `top: ${this.offset[1]}px;right: ${this.offset[0]}px`;
					} else if (this.position == 'bottomRight') {
					
						let safbo = this.getsafeJl()
						if(!this.safe) safbo=0
						return `bottom: ${this.offset[1]+safbo}px;right: ${this.offset[0]}px;`;
				
					} else if (this.position == 'bottomLeft') {
						let sy = uni.getSystemInfoSync();
						
						let safbo = this.getsafeJl()
						if(!this.safe) safbo=0
						
						return `bottom:${ this.offset[1]+safbo}px;left:${this.offset[0]}px;`;
					} else if (this.position == 'top') {
						
						let js = uni.getSystemInfoSync();
						let left = js.windowWidth;
						
						if (this.position_info.length > 0) {
							let w = this.position_info[0].width;
							return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);top:0;left:${(left-w)/2}px;`;
						}
				
					} else if (this.position == 'bottom') {
						let safbo = this.getsafeJl()
						if(!this.safe) safbo=0
						let js = uni.getSystemInfoSync();
						let left = js.windowWidth;
						if (this.position_info.length > 0) {
							let w = this.position_info[0].width;
							console.log(w);
							return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);bottom:${safbo}px;left:${(left-w)/2}px`;
				
						} else if (this.position == 'left') {
							let js = uni.getSystemInfoSync();
							let left = js.windowHeight;
							if (this.position_info.length > 0) {
								let w = this.position_info[0].height;
								return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);left:0;top:${(left-w)/2}px`;
				
							}
				
						} else if (this.position == 'right') {
							let js = uni.getSystemInfoSync();
							let left = js.windowHeight;
							if (this.position_info.length > 0) {
								let w = this.position_info[0].height;
								return {
									transform: `translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`,
									right: 0,
									top: (left - w) / 2 + 'px',
								};
								`transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);right:0;top:{(left-w)/2}px`;
							}
				
						}
					}
				}
								
			},
			click(e) {
				this.$emit('click', e);
				this.show = !this.show;
				
			},
			itemChange(index) {
				
				this.$emit('change', index);
				if (!this.clickActionsHiden) return;
				this.show = !this.show;

			}
		},
	}
</script>

<style lang="scss" scoped>
	.nobody {
		.menulistAction {
			.menulistAction_item {
				position: relative;
				// #ifdef H5
				animation: sscsl 0.5s;
				// #endif
			}

			&.top {
				position: absolute;
				bottom: 130upx;
				left: 10upx;

				.menulistAction_item {
					
					margin-bottom: 10px;
				}
			}

			&.left {
				position: absolute;
				bottom: 10upx;
				display: flex;
				flex-flow: row;
				right: 140upx;

				.menulistAction_item {
					margin-left: 10px;
				}
			}

			&.bottom {
				position: absolute;
				top: 140upx;
				display: flex;
				flex-flow: column;
				left: 10upx;

				.menulistAction_item {
					margin-top: 10px;
				}
			}
			&.right {
				position: absolute;
				bottom: 10upx;
				display: flex;
				flex-flow: row;
				left: 140upx;
			
				.menulistAction_item {
					margin-left: 10px;
				}
			}
		}
	}

	@keyframes sscsl {
		from {
			transform: scale(0.5);
		}

		to {
			transform: scale(1);
		}
	}

	.height100 {
		height: 100%;
	}

	.fixed,
	.absolute {
		z-index: 400;
		bottom: 0;
	}
</style>