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
| <template>
| <view class="">
| <view>
| <input maxlength="500" style="height: 40px;" v-model="cartnme" placeholder-class="input-placeholder"
| placeholder="请选择名称" @click="dropdownOpen = true" />
| <u-popup v-model="dropdownOpen" mode="left" style="width: 40%;">
| <view>
| <scroll-view scroll-y="true" style="width: 100%;margin: 0px auto;">
| <!-- 使用 v-for 循环来渲染每个标签 -->
| <view v-for="(item, index) in tagItems" :key="index" class="tag" @click="toggleSelection(item)"
| :style="{ backgroundColor: selectedItems.includes(item) ? '#63f004' : '#999999', width: '96%',margin:'10px auto', }">
| {{ item }}
| </view>
| </scroll-view>
| </view>
| </u-popup>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| data() {
| return {
| dropdownOpen: false,
| cartnme: "",
| tagItems: [
|
| '别是一般滋味在心头'
| ],
| selectedItems: [],
| };
| },
| methods: {
| handleOpen(index) {
| console.log('Dropdown opened at index:', index);
| },
| handleClose(index) {
| console.log('Dropdown closed at index:', index);
| },
| toggleSelection(item) {
| const index = this.selectedItems.indexOf(item);
| if (index === -1) {
| // 如果该项未选择，加入选择列表
| this.selectedItems.push(item);
| } else {
| // 如果该项已选择，移除它
| this.selectedItems.splice(index, 1);
| }
| this.cartnme = this.selectedItems.join(', ');
| }
| }
| }
| </script>
|
| <style scoped>
| /* 标签样式 */
| .tag {
| display: inline-block;
| padding: 10rpx 20rpx;
| margin: 5rpx;
| background-color: #f0f0f0;
| border-radius: 15rpx;
| font-size: 14px;
| color: #333;
| cursor: pointer;
| transition: background-color 0.3s ease;
| }
|
| .tag:hover {
| background-color: #000;
| }
| </style>
|
|
