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
| <template>
| <cl-page :padding="20">
| <cl-card label="基础用法">
| <cl-select-popup v-model="v1" title="选择歌曲" :options="list" />
| </cl-card>
|
| <cl-card label="多选">
| <cl-select-popup v-model="v2" multiple title="选择歌曲" :options="list" />
| </cl-card>
|
| <cl-card label="必填">
| <cl-select-popup v-model="v3" required title="选择歌曲" :options="list" />
| </cl-card>
|
| <cl-card label="自定义">
| <cl-select-popup v-model="v4" required title="选择歌曲" :options="list">
| <template #item="{ item }">
| {{ item }}
| </template>
|
| <template #default="{ label, value }">
| <cl-select-inner round background-color="#f7f7f7">
| <cl-text value="你选择了" :size="24" color="info" />
| <cl-tag round size="small" :margin="[0, 0, 0, 20]">{{ label }}</cl-tag>
| </cl-select-inner>
| </template>
| </cl-select-popup>
| </cl-card>
| </cl-page>
| </template>
|
| <script lang="ts" setup>
| import { ref } from "vue";
|
| const v1 = ref();
| const v2 = ref([]);
| const v3 = ref();
| const v4 = ref();
|
| const list = ref([
| {
| label: "冠军相",
| value: 1,
| },
| {
| label: "鬼脸",
| value: 2,
| },
| {
| label: "说唱歌手",
| value: 3,
| },
| {
| label: "一般的一天",
| value: 4,
| },
| {
| label: "会魔法的老人",
| value: 5,
| },
| {
| label: "C级浪漫",
| value: 6,
| },
| {
| label: "我想",
| value: 7,
| },
| {
| label: "小河淌水",
| value: 8,
| },
| {
| label: "午夜派对",
| value: 9,
| },
| {
| label: "POW!!!!!!!!!!!!!引爆",
| value: 10,
| },
| {
| label: "流浪`地球",
| value: 11,
| },
| ]);
| </script>
|
|
