-
uniapp——组件多颜色模块展示、气泡框
一、自定义颜色：
样式
代码
<template> <view class="content"> <view class="coverStatus" :class="[itemClass, positionClass,cornerClass,sanJiaoCss,sanJiaoCss2]" :style="dynamicStyle"> {{title}} view> view> template> <script> export default { name: "cardTypeCard", props: { title: { type: String, default: '进行中', }, cardType: { type: String, default: 'progress', }, position: { type: String, default: 'right', // 默认值为 'right' }, cornerStyle: { // 新增的 prop 控制圆角 type: String, default: 'rightTop', // 默认右上角元素的圆角 }, sanJiao: { type: Boolean, default: false, // 默认右上角元素的小三角 }, sanJiao2: { type: Boolean, default: false, // 默认右上角元素的小三角 }, width: { // 新增的 prop 控制宽度 type: String, default: '48rpx', }, height: { // 新增的 prop 控制高度 type: String, default: '20rpx', }, fontSize: { // 新增的 prop 控制字体大小 type: String, default: '14rpx', }, }, computed: { //定位 positionClass() { return this.position === 'left' ? 'leftPosition' : 'rightPosition'; }, sanJiaoCss() { return this.sanJiao == true ? 'sanJiaoAct' : ''; }, sanJiaoCss2() { return this.sanJiao2 == true ? 'sanJiaoAct2' : ''; }, // 圆角样式 cornerClass() { // 根据 cornerStyle 返回相应的圆角样式类 switch (this.cornerStyle) { case 'rightTop': return 'rightDemo'; case 'leftTop': return 'leftDemo'; default: return 'allDemo'; } }, // 背景颜色 itemClass() { let className; switch (this.cardType) { case 'progress': className = 'blueBg' break; case 'finish': className = 'greyBg' break; case 'enroll': className = 'pinkBg' break; case 'wait_upload': className = 'pinkBg' break; case 'wait_examine': className = 'greyBg' break; case 'passed': className = 'greyBg' break; case 'fail': className = 'redBg' break; } return className; }, // 动态样式对象 dynamicStyle() { return { width: this.width, height: this.height, fontSize: this.fontSize, }; }, }, } script> <style lang="scss" scoped> // 卡片颜色 .coverStatus { color: #FFFFFF; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; } .sanJiaoAct { } .sanJiaoAct::after { content: ''; position: absolute; left: 10rpx; bottom: -8rpx; width: 0; height: 0; border-top: 6rpx solid var(--triangle-color); border-right: 4rpx solid transparent; border-bottom: 4rpx solid transparent; border-left: 4rpx solid transparent; } .sanJiaoAct2 { } .sanJiaoAct2::after { content: ''; position: absolute; right: 10rpx; bottom: -8rpx; width: 0; height: 0; border-top: 6rpx solid var(--triangle-color); border-right: 4rpx solid transparent; border-bottom: 4rpx solid transparent; border-left: 4rpx solid transparent; } // 左上角定位 .leftPosition { left: 0; } // 右上角定位 .rightPosition { right: 0; } // 右上角圆角 .rightDemo { border-radius: 0rpx 10rpx 0rpx 10rpx; } // 左上角圆角 .leftDemo { // border-radius: 8rpx 0rpx 8rpx 0rpx; border-radius: 15rpx; } // 全部圆角 .allDemo { border-radius: 15rpx; } //已报名颜色 、待上传 .pinkBg { background: #F364B3; --triangle-color: #F364B3; } //进行中颜色 .blueBg { background: #A4CBE8; --triangle-color: #A4CBE8; } //已截止、待审核、已完成颜色 .greyBg { background-color: #898989; --triangle-color: #898989; } //已驳回颜色 .redBg { background-color: #ff0000; --triangle-color: #ff0000; } style>- 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
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
使用
父页面：
<cardTypeColor :cardType="data.task_status" :title="data.task_status_text" cornerStyle="allDemo" :sanJiao="true"> cardTypeColor> import cardTypeColor from '@/components/cardTypeColor/cardTypeColor.vue'- 1
- 2
- 3
二、使用图片作为背景
样式
代码
<template> <view> <view class="content" :class="[positionClass]"> <block v-if="positionClass == 'rightPosition'"> <image src="/static/images/index/pinkImg.png" mode="aspectFit" class="signImg" v-if="itemClass == 'pinkBg'">image> <image src="/static/images/index/blueImg.png" mode="aspectFit" class="signImg" v-if="itemClass == 'blueBg'">image> <image src="/static/images/index/greyImg.png" mode="aspectFit" class="signImg" v-if="itemClass == 'greyBg'">image> block> <block v-if="positionClass == 'leftPosition'"> <image src="/static/images/index/pinkImg2.png" mode="aspectFit" class="signImg" v-if="itemClass == 'pinkBg'">image> <image src="/static/images/index/blueImg2.png" mode="aspectFit" class="signImg" v-if="itemClass == 'blueBg'">image> <image src="/static/images/index/greyImg2.png" mode="aspectFit" class="signImg" v-if="itemClass == 'greyBg'">image> block> <view class="coverStatus"> {{title}} view> view> view> template> <script> export default { name: "cardTypeCard", props: { title: { type: String, default: '进行中', }, cardType: { type: String, default: 'progress', }, position: { type: String, default: 'right', // 默认值为 'right' }, }, computed: { //定位 positionClass() { return this.position === 'left' ? 'leftPosition' : 'rightPosition'; }, // 背景颜色 itemClass() { let className; switch (this.cardType) { case 'progress': className = 'blueBg' break; case 'finish': className = 'greyBg' break; case 'enroll': className = 'pinkBg' break; case 'wait_upload': className = 'pinkBg' break; case 'wait_examine': className = 'greyBg' break; case 'passed': className = 'greyBg' break; case 'fail': className = 'redBg' break; } return className; }, }, } script> <style lang="scss" scoped> .content { position: absolute; top: 0; width: 50rpx; height: 32rpx; .signImg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .coverStatus { position: absolute; left: 1rpx; top: 2rpx; z-index: 4; width: 100%; height: 100%; color: #FFFFFF; } } // 左上角定位 .leftPosition { left: 0; } // 右上角定位 .rightPosition { right: 0; } style>- 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
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
使用
父页面：
<cardTypeColor :cardType="data.task_status" :title="data.task_status_text" position="left"> cardTypeColor> import cardTypeColor from '@/components/cardTypeColor/cardTypeColor.vue'- 1
- 2
- 3
-
相关阅读:
SketchUp Pro 2023 for Mac/Win：重塑设计，引领未来
ChatGPT聊图像超分
vue2---axios 拦截器
皮亚杰将儿童的道德发展分为四个阶段
三、多线程
SSM学习——Spring事务（9）
【QSPI】 什么是QSPI SPI和QSPI异同
华为云云耀云服务器L实例评测｜带你从0认识云服务器
【UVM基础】7、寄存器模型
神经网络的数学方法及应用,神经网络的数学理论
- 原文地址：https://blog.csdn.net/xulihua_75/article/details/137998838