|
|
<template>
|
|
|
<view @click.stop="" class="tm-menubars fulled ">
|
|
|
<view v-if="!transparent" :style="{ height: tabHeight }"></view>
|
|
|
<view v-if="!transparent" :style="{ height: '45px' }"></view>
|
|
|
<view class="body fulled" :class="[
|
|
|
black_tmeme ? 'bk grey-darken-5 ' : '',
|
|
|
'shadow-' + color_tmeme + `-${shadow} `,
|
|
|
transparent ? (isTransparent ? 'transparent flat ' + `text-${fontColorTheme}` : color_tmeme) : color_tmeme,
|
|
|
flat ? 'flat' : ''
|
|
|
]">
|
|
|
<view :style="{ height: tabHeight }"></view>
|
|
|
<view class="body_wk flex-between">
|
|
|
<view class="left flex-start">
|
|
|
<block v-if="showback">
|
|
|
<view v-if="pageUrl && isHome == false" class="home-btn mr-20 text flex-center flex-shrink"
|
|
|
:class="[color_tmeme,black_tmeme ? 'outlined bk' : '']">
|
|
|
<navigator :url="pageUrl" open-type="reLaunch" class="flex-center">
|
|
|
<text class="iconfont icon-home" :style="{ fontSize: '32rpx' }"></text>
|
|
|
</navigator>
|
|
|
</view>
|
|
|
<navigator v-if="!pageUrl" open-type="navigateBack" class="flex-center px-24 flex-shrink fulled-height">
|
|
|
<text class="iconfont icon-angle-left" :class="[`text-${fontColorTheme}`]" :style="{ fontSize: '28rpx' }"></text>
|
|
|
</navigator>
|
|
|
</block>
|
|
|
<slot name="left" :data="{ style: widths, isTransparent: isTransparent, title: title }"></slot>
|
|
|
</view>
|
|
|
<view class="center flex-center text-size-g text-overflow text-align-center" :class="[`text-${fontColorTheme}`]">
|
|
|
<slot name="default" :data="{ style: widths, isTransparent: isTransparent, title: title }">
|
|
|
{{ title }}
|
|
|
</slot>
|
|
|
</view>
|
|
|
<view class="right flex-end" :style="{ width: widths.btns }">
|
|
|
<slot name="right" :data="{ style: widths, isTransparent: isTransparent, title: title }"></slot>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 菜单工具栏
|
|
|
* @property {Boolean} black = [true|false] 默认:false,暗黑模式。
|
|
|
* @property {String|Array} color = [primary] 默认:primary,主题颜色名称如果为array,则为渐变色格式第一个方向：top,bottom,right,left[top,color1,color2]，如果为string时，可以为rgba,rgb,#fff或者颜色主题名称如：purple-darken-4
|
|
|
* @property {String} theme = [black|white] 默认:custom,只有在transparent:true时，black:表示黑色模式，文字变白。white文字变黑。
|
|
|
* @property {String} font-color = [] 默认:null,文字颜色,默认不需要提供根据主题色自动推断。一旦赋值，自带的theme失效。使用用户颜色类。
|
|
|
* @property {String} home-url = [] 默认:'/pages/index/index',应用的首页地址。当从其它页面以reLaunch进入非首页时会自动显示首页按钮。
|
|
|
* @property {Boolean} flat = [true|false] 默认:false,去除投影，边线
|
|
|
* @property {Boolean} transparent = [true|false] 默认:false,开启透明顶部。下拉时会变成自定义的背景色。
|
|
|
* @property {Number} scroll-tobg = [true|false] 默认:0,当值大于0即开启透明背景。下拉时达到设定的值，即显示自定义的背景和文字色。
|
|
|
* @property {Number | String} width = [] 默认:0,宽度，数字，或者百度比。数字的单位是upx
|
|
|
* @property {Boolean} showback = [true|false] 默认:true,是否显示左边的返回和首页按钮。
|
|
|
* @property {String} title = [] 默认:标题, 中间标题文字。
|
|
|
* @example <tm-menubars color="white" :showback="false"></tm-menubars>
|
|
|
*
|
|
|
*/
|
|
|
|
|
|
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
tmIcons
|
|
|
},
|
|
|
options:{
|
|
|
multipleSlots: true
|
|
|
},
|
|
|
name: 'tm-menubars',
|
|
|
props: {
|
|
|
// 是否开启暗黑模式
|
|
|
black: {
|
|
|
type: String | Boolean,
|
|
|
default: null
|
|
|
},
|
|
|
// 主题颜色名称如果为array,则为渐变色格式第一个方向：top,bottom,right,left[top,color1,color2]
|
|
|
// 如果为string时，可以为rgba,rgb,#fff或者颜色主题名称如：purple-darken-4
|
|
|
color: {
|
|
|
type: String | Array,
|
|
|
default: 'primary'
|
|
|
},
|
|
|
fontColor:{
|
|
|
type:String,
|
|
|
default:''
|
|
|
},
|
|
|
// custom为自定导航样式 。black标题文字为白。white标题文字为黑。它表示的是所处背景的模式。
|
|
|
theme: {
|
|
|
type: String,
|
|
|
default: 'custom' //'black'|'white'|'custom'
|
|
|
},
|
|
|
// 几乎所有组件都有flat选项，去除投影，边线。
|
|
|
flat: {
|
|
|
type: String | Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
// 是否开启顶部透明模式。
|
|
|
transparent: {
|
|
|
type: String | Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
// 当值大于0即开启透明背景。下拉时达到设定的值，即显示自定义的背景和文字色。
|
|
|
scrollTobg: {
|
|
|
type: Number,
|
|
|
default: 70
|
|
|
},
|
|
|
// 是否显示左边的返回和首页按钮。
|
|
|
showback: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
},
|
|
|
// 中间标题文字。
|
|
|
title: {
|
|
|
type: String,
|
|
|
default: '标题'
|
|
|
},
|
|
|
// 首页页面地址。当前访问子页面时，将会显示首页按钮。
|
|
|
homeUrl: {
|
|
|
type: String,
|
|
|
default: '/pages/index/index'
|
|
|
},
|
|
|
shadow: {
|
|
|
type: String | Number,
|
|
|
default: 3
|
|
|
},
|
|
|
// 跟随主题色的改变而改变。
|
|
|
fllowTheme: {
|
|
|
type: Boolean | String,
|
|
|
default: true
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
pageUrl: '',
|
|
|
nowScrollTop: 0,
|
|
|
isHome: false,
|
|
|
tabHeight: 0
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
black_tmeme: function() {
|
|
|
if (this.black !== null) return this.black;
|
|
|
return this.$tm.vx.state().tmVuetify.black;
|
|
|
},
|
|
|
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;
|
|
|
}
|
|
|
if(this.transparent){
|
|
|
if(this.isTransparent) return ''
|
|
|
}
|
|
|
return this.color;
|
|
|
},
|
|
|
fontColorTheme:function(){
|
|
|
if(this.theme == 'custom') return this.fontColor;
|
|
|
if(this.transparent){
|
|
|
if(this.isTransparent){
|
|
|
if(this.theme == 'black') return 'white';
|
|
|
if(this.theme == 'white') return 'black';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return this.fontColor;
|
|
|
},
|
|
|
// 当页面在滚动时返回当前是透明还是不透明背景。
|
|
|
isTransparent: function() {
|
|
|
return this.nowScrollTop < this.scrollTobg;
|
|
|
},
|
|
|
ColorThemeName:function(){
|
|
|
return this.color;
|
|
|
},
|
|
|
widths: function() {
|
|
|
let jnwd = 0; //小程序有的胶囊宽度.
|
|
|
// #ifdef MP
|
|
|
// 胶囊的大小。
|
|
|
let mw = uni.getMenuButtonBoundingClientRect();
|
|
|
jnwd = mw.width;
|
|
|
// #endif
|
|
|
return uni.$tm.objToString({
|
|
|
btns: jnwd + 'px',
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
let sysinfo = uni.getSystemInfoSync();
|
|
|
let sysbarheight = 0;
|
|
|
// #ifdef MP || APP-PLUS || APP-VUE
|
|
|
sysbarheight = sysinfo.statusBarHeight;
|
|
|
// #endif
|
|
|
this.tabHeight = sysbarheight + 'px';
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
uni.$on('onPageScroll', e => {
|
|
|
this.nowScrollTop = e.scrollTop;
|
|
|
});
|
|
|
// 检查页面栈
|
|
|
let pages = getCurrentPages();
|
|
|
let nopage = pages[pages.length - 1].route;
|
|
|
if (nopage[0] != '/') {
|
|
|
nopage = '/' + nopage;
|
|
|
}
|
|
|
if (nopage == this.homeUrl) {
|
|
|
this.isHome = true;
|
|
|
}
|
|
|
if (pages.length == 1 && typeof pages[0].route !== 'undefined') {
|
|
|
// #ifdef H5
|
|
|
this.pageUrl = '/';
|
|
|
// #endif
|
|
|
// #ifdef MP
|
|
|
this.pageUrl = this.homeUrl;
|
|
|
// #endif
|
|
|
}
|
|
|
},
|
|
|
methods: {}
|
|
|
};
|
|
|
//
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tm-menubars {
|
|
|
.body {
|
|
|
position: fixed;
|
|
|
z-index: 450;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
|
|
|
&.transparent {
|
|
|
background: none !important;
|
|
|
transition: all 0.6s;
|
|
|
}
|
|
|
|
|
|
.body_wk {
|
|
|
height: 45px;
|
|
|
// opacity: 0.9;
|
|
|
|
|
|
.left {
|
|
|
max-width: 74px;
|
|
|
min-width: 74px;
|
|
|
|
|
|
.home-btn {
|
|
|
border-radius: 50%;
|
|
|
|
|
|
height: 30px;
|
|
|
width: 30px;
|
|
|
line-height: 30px;
|
|
|
margin-left: 24upx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
max-width: 74px;
|
|
|
min-width: 74px;
|
|
|
}
|
|
|
|
|
|
.center {
|
|
|
width: calc(100% - 148px);
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|