1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <template>
| <view>
| <view class="use-header dflex padding-lr-sm w-full" :class="{ 'fixed': fixed, 'bg-main': type == 'white', 'bg-drak': type == 'gray' }">
| <!-- 头部组件 -->
| <view class="use-search dflex-b border-radius-lg padding-lr w-full use-hover" :class="{ 'bg-drak': type == 'white', 'bg-main': type == 'gray' }" @click="search">
| <text>{{ searchTip }}</text>
| <view class="iconfont iconsousuo-01"></view>
| </view>
| </view>
|
| <!-- 头部组件占位符 -->
| <view v-if="fixed && placeholder" class="use-header-placeholder"></view>
| </view>
| </template>
|
| <script>
| export default {
| props: {
| fixed: {
| type: [Number, Boolean],
| default: false
| },
| placeholder: {
| type: [Number, Boolean],
| default: !0
| },
| searchAuto: {
| type: [Number, Boolean],
| default: !0
| },
| searchTip: {
| type: String,
| default: '搜索关键字'
| },
| type: {
| type: String,
| default: 'white'
| }
| },
| data() {
| return {};
| },
| methods: {
| search() {
| this.$emit('search', {
| type: 'search'
| });
|
| if (this.searchAuto) {
| // 跳转搜索页
| this.$navigator.tosearch();
| }
| }
| }
| };
| </script>
|
| <style lang="scss">
| .use-header-placeholder {
| height: 100rpx;
| }
|
| .use-header {
| height: 100rpx;
| }
|
| .use-search {
| height: 70rpx;
| line-height: 70rpx;
|
| text {
| color: #c0c0c0;
| }
|
| .iconfont {
| font-size: $font-base + 6upx;
| color: #c0c0c0;
| }
| }
| </style>
|
|
