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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| <template>
| <view class="demo-title">
| <view>
| <view v-if="type === 'first'" class="main_title">
| <view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view>
| <view class="main_title__content">{{ title }}</view>
| <view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view>
| </view>
| <view v-if="type === 'second'" class="second_title">
| <view class="second_title__content">{{ title }}</view>
| </view>
| </view>
| <view class="content" :class="[{
| 'content--padding': contentPadding
| }]">
| <slot></slot>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| name: 'demo-title',
| options: {
| // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
| virtualHost: true
| },
| props: {
| // 标题类型
| type: {
| type: String,
| default: 'first'
| },
| // 标题
| title: {
| type: String,
| default: ''
| },
| // 左图标
| leftIcon: {
| type: String,
| default: 'star'
| },
| // 右图标
| rightIcon: {
| type: String,
| default: 'star'
| },
| // 内容容器是否有两边边距
| contentPadding: {
| type: Boolean,
| default: true
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .main_title {
| display: flex;
| align-items: center;
| justify-content: center;
| margin-top: 50rpx;
| font-size: 36rpx;
| font-weight: bold;
|
| &__content {
| padding: 0 18rpx;
| }
|
| &__icon {
| font-size: 34rpx;
| }
| }
|
| .second_title {
| margin: 24rpx 0;
| margin-left: 30rpx;
|
| &__content {
| font-size: 32rpx;
| font-weight: bold;
| }
| }
|
| .content {
| margin-top: 30rpx;
|
| &--padding {
| margin-left: 30rpx;
| margin-right: 30rpx;
| }
| }
| </style>
|
|
