You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.5 KiB
127 lines
3.5 KiB
<template>
|
|
<view>
|
|
<view class="cu-custom" :style="'height:' + CustomBar + 'px; '">
|
|
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'']">
|
|
<!-- 左侧 图标/文字 -->
|
|
<view class="action" v-if="isLeftIcon" @tap="leftBtn" style="height: 50rpx;">
|
|
<u-icon :name="iconLeft" size="23" color="#ffffff"></u-icon>
|
|
</view>
|
|
<view v-if="!isLeftIcon" @tap="leftBtn" style="width: 70rpx;">
|
|
<slot name="left"></slot>
|
|
</view>
|
|
<!-- 中间搜索 -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view v-if="isSeach" :style="[{top:StatusBar + 'px'}]" >
|
|
<u-search placeholder="请输入搜索内容" :showAction="false" height="30" v-model="keyword"
|
|
@search="searchText" clearabled @clear="clearKeyword"></u-search>
|
|
</view>
|
|
<!--#endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view v-if="isSeach" :style="[{top:StatusBar + 'px'}]" style="margin-left: 50rpx;">
|
|
<u-search placeholder="请输入搜索内容" :showAction="false" height="30" v-model="keyword"
|
|
@search="searchText" clearabled @clear="clearKeyword"></u-search>
|
|
</view>
|
|
<!--#endif -->
|
|
<view v-if="!isSeach" @tap="leftBtn">
|
|
<slot name="center"></slot>
|
|
</view>
|
|
<!-- 右侧 图标/文字 -->
|
|
<view v-if="isRightIcon" class="action" @tap="rightBtn" style="height: 50rpx;">>
|
|
<u-icon :name="iconRightIcon" size="23" color="#ffffff"></u-icon>
|
|
</view>
|
|
<view v-if="!isRightIcon" @tap="rightBtn" style="width: 70rpx;" class="float-right margin-right">
|
|
<slot name="right"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
StatusBar: this.StatusBar,
|
|
CustomBar: this.CustomBar,
|
|
keyword: ""
|
|
};
|
|
},
|
|
name: 'cu-custom',
|
|
computed: {
|
|
style() {
|
|
var StatusBar = this.StatusBar;
|
|
var CustomBar = this.CustomBar;
|
|
var bgImage = this.bgImage;
|
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
|
if (this.bgImage) {
|
|
style = `${style}background-image:url(${bgImage});`;
|
|
} else if (!!this.bgColor) {
|
|
style += 'background-color:' + this.bgColor
|
|
}
|
|
if (!!this.color) {
|
|
style += ';color:' + this.color
|
|
}
|
|
return style
|
|
}
|
|
},
|
|
props: {
|
|
color: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isLeftIcon: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
isSeach: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
isRightIcon: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
bgImage: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
iconLeft: {
|
|
type: String,
|
|
default: 'arrow-left'
|
|
},
|
|
iconRight: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
leftBtn() {
|
|
this.$emit("leftBtn")
|
|
},
|
|
rightBtn() {
|
|
this.$emit("rightBtn")
|
|
},
|
|
searchText() {
|
|
this.$emit("searchText", this.keyword)
|
|
},
|
|
clearKeyword(){
|
|
this.keyword = null;
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.action {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
padding: 0 7rpx;
|
|
border-radius: 10rpx;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|