<template>
|
<view>
|
<view class="fab-box fab" :class="{ leftBottom: leftBottom, rightBottom: rightBottom, leftTop: leftTop, rightTop: rightTop }">
|
<view class="fab-circle"
|
:class="{
|
left: horizontal === 'left' && direction === 'horizontal',
|
top: vertical === 'top' && direction === 'vertical',
|
bottom: vertical === 'bottom' && direction === 'vertical',
|
right: horizontal === 'right' && direction === 'horizontal'
|
}"
|
:style="{ 'background-color': styles.buttonColor }"
|
@click="open">
|
<image class="icon icon-jia" src="/static/images/common/menu.png" mode="" :class="{ active: showContent }"></image>
|
<!-- <text class="icon icon-jia" :class="{ active: showContent }"></text> -->
|
</view>
|
<view class="fab-content"
|
:class="{
|
left: horizontal === 'left',
|
right: horizontal === 'right',
|
flexDirection: direction === 'vertical',
|
flexDirectionStart: flexDirectionStart,
|
flexDirectionEnd: flexDirectionEnd
|
}"
|
:style="{ width: boxWidth, height: boxHeight, background: styles.backgroundColor }">
|
<view v-if="flexDirectionStart || horizontalLeft" class="fab-item first"></view>
|
<view class="fab-item"
|
v-for="(item, index) in content"
|
:key="index"
|
:class="{ active: showContent }"
|
:style="{
|
color: item.active ? styles.selectedColor : styles.color
|
}"
|
@click="taps(index, item)">
|
<image class="content-image icon"
|
:src="item.active ? item.selectedIconPath : item.iconPath"
|
mode=""></image>
|
<text class="text">{{ item.text }}</text>
|
</view>
|
<view v-if="flexDirectionEnd || horizontalRight" class="fab-item first"></view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
pattern: {
|
type: Object,
|
default: () => {
|
return {
|
color: '#7A7E83',
|
backgroundColor: '#fff',
|
selectedColor: '#007AFF',
|
buttonColor: '#FF7159'
|
};
|
}
|
},
|
horizontal: {
|
type: String,
|
default: 'left'
|
},
|
vertical: {
|
type: String,
|
default: 'bottom'
|
},
|
direction: {
|
type: String,
|
default: 'horizontal'
|
},
|
content: {
|
type: Array,
|
default: () => {
|
return [{
|
iconPath: '/static/images/common/tab-ic-hom-selected.png',
|
selectedIconPath: '/static/images/common/tab-ic-hom-unselected.png',
|
// text: '首页',
|
active: false,
|
url: '/pages/index/default/default'
|
},
|
{
|
iconPath: '/static/images/common/tab-ic-me-selected.png',
|
selectedIconPath: '/static/images/common/tab-ic-me-unselected.png',
|
// text: '个人中心',
|
active: false,
|
url: '/pages/index/member/member'
|
}];
|
}
|
}
|
},
|
data() {
|
return {
|
fabShow: false,
|
flug: true,
|
showContent: false,
|
styles: {
|
color: '#3c3e49',
|
selectedColor: '#007AFF',
|
backgroundColor: '#fff',
|
buttonColor: '#3c3e49'
|
}
|
};
|
},
|
created() {
|
if (this.top === 0) {
|
this.fabShow = true;
|
}
|
// 初始化样式
|
this.styles = Object.assign({}, this.styles, this.pattern);
|
},
|
methods: {
|
open() {
|
this.showContent = !this.showContent;
|
},
|
/**
|
* 按钮点击事件
|
*/
|
taps(index, item) {
|
//this.$emit('trigger', {
|
// index,
|
// item
|
//});
|
this.$u.route({
|
type: 'switchTab',
|
url: item.url
|
});
|
},
|
/**
|
* 获取 位置信息
|
*/
|
getPosition(types, paramA, paramB) {
|
if (types === 0) {
|
return this.horizontal === paramA && this.vertical === paramB;
|
} else if (types === 1) {
|
return this.direction === paramA && this.vertical === paramB;
|
} else if (types === 2) {
|
return this.direction === paramA && this.horizontal === paramB;
|
} else {
|
return this.showContent && this.direction === paramA
|
? this.contentWidth
|
: this.contentWidthMin;
|
}
|
}
|
},
|
watch: {
|
pattern(newValue, oldValue) {
|
// console.log(JSON.stringify(newValue));
|
this.styles = Object.assign({}, this.styles, newValue);
|
}
|
},
|
computed: {
|
contentWidth(e) {
|
return uni.upx2px((this.content.length + 1) * 90 + 20) + 'px';
|
},
|
contentWidthMin() {
|
return uni.upx2px(90) + 'px';
|
},
|
// 动态计算宽度
|
boxWidth() {
|
return this.getPosition(3, 'horizontal');
|
},
|
// 动态计算高度
|
boxHeight() {
|
return this.getPosition(3, 'vertical');
|
},
|
// 计算左下位置
|
leftBottom() {
|
return this.getPosition(0, 'left', 'bottom');
|
},
|
// 计算右下位置
|
rightBottom() {
|
return this.getPosition(0, 'right', 'bottom');
|
},
|
// 计算左上位置
|
leftTop() {
|
return this.getPosition(0, 'left', 'top');
|
},
|
rightTop() {
|
return this.getPosition(0, 'right', 'top');
|
},
|
flexDirectionStart() {
|
return this.getPosition(1, 'vertical', 'top');
|
},
|
flexDirectionEnd() {
|
return this.getPosition(1, 'vertical', 'bottom');
|
},
|
horizontalLeft() {
|
return this.getPosition(2, 'horizontal', 'left');
|
},
|
horizontalRight() {
|
return this.getPosition(2, 'horizontal', 'right');
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
@import "coreshop-fab.scss";
|
</style>
|
