-
vue创建色带组件。
如图所示：
<template> <div class="colour"> <div class="border" @click.stop="choose" :style="{cursor: disabled ? 'no-drop' : 'pointer'}"> <ul class="color-item"> <li v-for="(itemc, index) in showFirst" :key="index" :style="{ background: '#' + itemc }" ></li> </ul> </div> <div class="choose" v-show="visible"> <ul v-for="(item, index) in colorList" :key="index" class="color-item" @click.stop="getColor(item.color, index)" > <li v-for="(itemc, index) in item.color" :key="index" :style="{ background: '#' + itemc }" ></li> </ul> </div> </div> </template> <script> import color from "./colors.js"; export default { name: "colour-bar", data() { return { visible: false, showFirst: [], colorList: [], } }, mounted() { this.colorList = color.data.items.item; this.showFirst = color.data.items.item[0].color; }, methods: { getColor(color) { this.showFirst = color; this.visible = false; }, choose() { this.visible = !this.visible; }, }, </script> <style lang="scss"> .colour { display: block; background: transparent; .border .color-item{ position: absolute; margin-left: 3px; } .el-input__inner { width: 260px !important; } } .border { width: 295px; height: 28px; background: transparent; border: 1px solid #d9d9d9; border-radius: 4px; padding: 3px; box-sizing: border-box; .color-item { list-style: none; display: flex; li { width: 30px; height: 20px; } } } .choose { background: transparent; border: 1px solid #d9d9d9; border-radius: 4px; padding: 3px; border-top: 0px; position: fixed; z-index: 1002; .color-item { list-style: none; display: flex; padding: 0 3px; li { width: 30px; height: 20px; } } } </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
//colors.js export default { data: { items: { density: [ { name: 'BuGn', num: '7', type: 'seq', color: ['DFF7D5', 'CFF3BD', 'C1EFA9', 'B1EB93', 'A1E97C', '89E35C', '60D926'], }, { name: 'Blues', num: '7', type: 'seq', color: ['FEE0D2', 'FCBBA1', 'FC9272', 'FB6A4A', 'EF3B2C', 'CB181D', '99000D'], }, { name: 'Blues', num: '7', type: 'seq', color: ['FBEAD7', 'F9DBC3', 'F7D4AF', 'F5C399', 'F5B785', 'F1A566', 'ED8734'], }, { name: 'Reds', num: '7', type: 'seq', color: ['FBEAD7', 'F8E6C4', 'F7D4AF', 'F3D49B', 'F5C785', 'F1B966', 'EDA134'], }, { name: 'Oranges', num: '7', type: 'seq', color: ['F9F1D9', 'F8E6C4', 'F5E1B1', 'F3D49B', 'EFD18B', 'EBC56C', 'E3B33C'], }, { name: 'YlGn', num: '7', type: 'seq', color: ['F9F5D9', 'F7EFC5', 'F5E9B1', 'F1E59D', 'EFDF8B', 'EBD76C', 'E3C93C'], }, { name: 'YlGnBu', num: '7', type: 'seq', color: ['F0F8D5', 'EBF4BE', 'E5F5A9', 'DFF193', 'D7EF7C', 'CFEB5C', 'BDE324'], }, { name: 'BuGn', num: '7', type: 'seq', color: ['F0F8D5', 'EBF4BE', 'DEEDA9', 'DDE993', 'D7E37C', 'CDDD5C', 'BBD126'], }, { name: 'PuBuGn', num: '7', type: 'seq', color: ['F0F8D5', 'E1F1BF', 'DEEDA9', 'CDE993', 'C3E37C', 'B5DD5C', '9BD126'], }, { name: 'PuBu', num: '7', type: 'seq', color: ['D7F5DF', 'C1F1CF', 'ADEBBF', '97E7AF', '83E1A1', '64DB89', '30CD60'], }, { name: 'BuPu', num: '7', type: 'seq', color: ['D3F2EC', 'BCEAE3', 'ABE5D3', '95DFC9', '81D7BF', '6AD1B3', '2ABD93'], }, { name: 'RdPu', num: '7', type: 'seq', color: ['D3F2EC', 'BCEAE3', 'A3E3DF', '8BDBD7', '74D5CF', '52C9C3', '18B7AF'], }, { name: 'PuRd', num: '7', type: 'seq', color: ['CFF3F5', 'BAE9F2', 'A3E1EE', '87DFE7', '70D9E3', '56D3DD', '10BFCF'], }, { name: 'OrRd', num: '7', type: 'seq', color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FDBEB', '77CFE5', '61C7E0', '1CB5D7'], }, { name: 'YlOrRd', num: '7', type: 'seq', color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FD3E7', '77CFE5', '61C7E0', '1EA9CF'], }, { name: 'YlOrBr', num: '7', type: 'seq', color: ['D1E9F5', 'B9DDEF', 'A1D1E9', '8BC5E3', '6EB7DD', '50A7D5', '148BC7'], }, { name: 'Purples', num: '7', type: 'seq', color: ['D1E3F3', 'B9D3ED', 'A1C5E5', '89B5DF', '6CA5D7', '4E91CF', '126CBF'], }, ], item: [ { name: 'Blues', num: '7', type: 'seq', color: ['FEE0D2', 'FCBBA1', 'FC9272', 'FB6A4A', 'EF3B2C', 'CB181D', '99000D'], }, { name: 'Blues', num: '7', type: 'seq', color: ['FBEAD7', 'F9DBC3', 'F7D4AF', 'F5C399', 'F5B785', 'F1A566', 'ED8734'], }, { name: 'Reds', num: '7', type: 'seq', color: ['FBEAD7', 'F8E6C4', 'F7D4AF', 'F3D49B', 'F5C785', 'F1B966', 'EDA134'], }, { name: 'Oranges', num: '7', type: 'seq', color: ['F9F1D9', 'F8E6C4', 'F5E1B1', 'F3D49B', 'EFD18B', 'EBC56C', 'E3B33C'], }, { name: 'YlGn', num: '7', type: 'seq', color: ['F9F5D9', 'F7EFC5', 'F5E9B1', 'F1E59D', 'EFDF8B', 'EBD76C', 'E3C93C'], }, { name: 'YlGnBu', num: '7', type: 'seq', color: ['F0F8D5', 'EBF4BE', 'E5F5A9', 'DFF193', 'D7EF7C', 'CFEB5C', 'BDE324'], }, { name: 'BuGn', num: '7', type: 'seq', color: ['F0F8D5', 'EBF4BE', 'DEEDA9', 'DDE993', 'D7E37C', 'CDDD5C', 'BBD126'], }, { name: 'PuBuGn', num: '7', type: 'seq', color: ['F0F8D5', 'E1F1BF', 'DEEDA9', 'CDE993', 'C3E37C', 'B5DD5C', '9BD126'], }, { name: 'BuGn', num: '7', type: 'seq', color: ['DFF7D5', 'CFF3BD', 'C1EFA9', 'B1EB93', 'A1E97C', '89E35C', '60D926'], }, { name: 'PuBu', num: '7', type: 'seq', color: ['D7F5DF', 'C1F1CF', 'ADEBBF', '97E7AF', '83E1A1', '64DB89', '30CD60'], }, { name: 'BuPu', num: '7', type: 'seq', color: ['D3F2EC', 'BCEAE3', 'ABE5D3', '95DFC9', '81D7BF', '6AD1B3', '2ABD93'], }, { name: 'RdPu', num: '7', type: 'seq', color: ['D3F2EC', 'BCEAE3', 'A3E3DF', '8BDBD7', '74D5CF', '52C9C3', '18B7AF'], }, { name: 'PuRd', num: '7', type: 'seq', color: ['CFF3F5', 'BAE9F2', 'A3E1EE', '87DFE7', '70D9E3', '56D3DD', '10BFCF'], }, { name: 'OrRd', num: '7', type: 'seq', color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FDBEB', '77CFE5', '61C7E0', '1CB5D7'], }, { name: 'YlOrRd', num: '7', type: 'seq', color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FD3E7', '77CFE5', '61C7E0', '1EA9CF'], }, { name: 'YlOrBr', num: '7', type: 'seq', color: ['D1E9F5', 'B9DDEF', 'A1D1E9', '8BC5E3', '6EB7DD', '50A7D5', '148BC7'], }, { name: 'Purples', num: '7', type: 'seq', color: ['D1E3F3', 'B9D3ED', 'A1C5E5', '89B5DF', '6CA5D7', '4E91CF', '126CBF'], }, ], }, }, };- 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
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
-
相关阅读:
IDEA 生成 javadoc
Spring5学习笔记05--BeanFactory后处理器
Norgen提取试剂盒丨血浆/血清循环和核外RNA提取试剂盒
【新书推荐】MongoDB Performance Tuning
第03章 Xpath 入门
台式电脑电源功率越大越费电吗？装机选购多少W电源
Qt自定义QSlider（支持水平垂直）
在全链路追踪中加入对方法(Method)追踪
微机原理_12
err = nil,但是被判断为false
- 原文地址：https://blog.csdn.net/weixin_43787651/article/details/123873382
