|
|
<!-- 悬浮按钮 -->
|
|
|
<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"
|
|
|
:padding="[0,0]"
|
|
|
: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-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>
|