|
3 | 3 | <uni-card :is-shadow="false" is-full> |
4 | 4 | <text class="uni-h6">通过数据驱动的单选框和复选框,可直接通过连接 uniCloud 获取数据,同时可以配合表单组件 uni-forms 使用</text> |
5 | 5 | </uni-card> |
6 | | - <uni-section title="本地数据" type="line"> |
7 | | - <view class="uni-px-5 uni-pb-5"> |
8 | | - <uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select> |
9 | | - </view> |
10 | | - </uni-section> |
11 | | - <uni-section title="禁用状态" type="line"> |
12 | | - <view class="uni-px-5 uni-pb-5"> |
13 | | - <uni-data-select v-model="value" :disabled="true" :localdata="range"></uni-data-select> |
14 | | - </view> |
| 6 | + <uni-section title="本地数据 (多选)" type="line"> |
| 7 | + <view class="uni-px-5 uni-pb-5"> |
| 8 | + <uni-data-select v-model="multipleValue" mode="underline" multiple :localdata="range" @change="changeMultiple" @open="open" @close="close" @clear="clear"></uni-data-select> |
| 9 | + </view> |
| 10 | + </uni-section> |
| 11 | + <uni-section title="本地数据 (单选)" type="line"> |
| 12 | + <view class="uni-px-5 uni-pb-5"> |
| 13 | + <uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select> |
| 14 | + </view> |
| 15 | + </uni-section> |
| 16 | + <uni-section title="禁用状态" type="line"> |
| 17 | + <view class="uni-px-5 uni-pb-5"> |
| 18 | + <uni-data-select v-model="value" :disabled="true" :localdata="range"></uni-data-select> |
| 19 | + </view> |
15 | 20 | </uni-section> |
16 | 21 | <!-- <uni-section title="云端数据" subTitle="连接云服务空间, 且存在相关的数据表才能生效(此处演示, 未连接云服务空间, 故不生效, 且有报错)" type="line"> |
17 | 22 | <uni-data-select collection="opendb-app-list" field="appid as value, name as text" v-mode="value" /> |
|
28 | 33 | </uni-section> |
29 | 34 | <uni-section title="设置弹出位置" type="line"> |
30 | 35 | <view class="uni-px-5 uni-pb-5"> |
31 | | - <uni-data-select placement="top" v-model="value" :localdata="range" @change="change" label="应用选择"></uni-data-select> |
| 36 | + <uni-data-select placement="top" v-model="value" :localdata="range" @change="change" |
| 37 | + label="应用选择"></uni-data-select> |
| 38 | + </view> |
| 39 | + </uni-section> |
| 40 | + <uni-section title="设置文字出现位置(center)" type="line"> |
| 41 | + <view class="uni-px-5 uni-pb-5"> |
| 42 | + <uni-data-select align="center" v-model="value" :localdata="range" @change="change" |
| 43 | + label="应用选择"></uni-data-select> |
| 44 | + </view> |
| 45 | + </uni-section> |
| 46 | + <uni-section title="单选换行显示(wrap)" type="line"> |
| 47 | + <view class="uni-px-5 uni-pb-5"> |
| 48 | + <uni-data-select v-model="lineValue" wrap :localdata="range" @change="change" |
| 49 | + label="换行显示"></uni-data-select> |
| 50 | + </view> |
| 51 | + </uni-section> |
| 52 | + <uni-section title="多选换行显示(wrap)" type="line"> |
| 53 | + <view class="uni-px-5 uni-pb-5"> |
| 54 | + <uni-data-select v-model="multipleValue" mode="underline" multiple wrap :localdata="range" @change="changeMultiple" |
| 55 | + label="换行显示"></uni-data-select> |
| 56 | + </view> |
| 57 | + </uni-section> |
| 58 | + <uni-section title="单行显示(chips方式)" type="line"> |
| 59 | + <view class="uni-px-5 uni-pb-5"> |
| 60 | + <uni-data-select v-model="lineValue" mode="underline" hideRight align="center" wrap :localdata="range" @change="change" chips></uni-data-select> |
| 61 | + </view> |
| 62 | + </uni-section> |
| 63 | + <uni-section title="多选换行显示(chips方式)" type="line"> |
| 64 | + <view class="uni-px-5 uni-pb-5"> |
| 65 | + <uni-data-select v-model="multipleValue" mode="underline" multiple wrap chips :localdata="range" @change="changeMultiple" |
| 66 | + label="换行显示"></uni-data-select> |
32 | 67 | </view> |
33 | 68 | </uni-section> |
34 | 69 | </view> |
35 | 70 | </template> |
36 | | - |
37 | 71 | <script> |
38 | 72 | export default { |
39 | 73 | data() { |
40 | 74 | return { |
41 | 75 | value: 0, |
| 76 | + lineValue: 3, |
| 77 | + multipleValue: [1, 3, 4, 5], |
42 | 78 | range: [{ |
43 | | - "value": 0, |
44 | | - "text": "篮球", |
45 | | - "disable": true |
46 | | - }, |
47 | | - { |
48 | | - "value": 1, |
49 | | - "text": "足球" |
50 | | - }, |
51 | | - { |
52 | | - "value": 2, |
53 | | - "text": "游泳" |
| 79 | + "value": 0, |
| 80 | + "text": "篮球运动锻炼", |
| 81 | + "disable": true |
| 82 | + }, { |
| 83 | + "value": 1, |
| 84 | + "text": "足球", |
| 85 | + "chipsCustomStyle":{ |
| 86 | + "background-color": "red", |
| 87 | + "border-radius": '5px' |
54 | 88 | } |
55 | | - ] |
| 89 | + }, { |
| 90 | + "value": 2, |
| 91 | + "text": "游泳健身" |
| 92 | + }, { |
| 93 | + "value": 3, |
| 94 | + "text": "跑步有氧运动", |
| 95 | + "chipsCustomStyle":{ |
| 96 | + "background-color": "green", |
| 97 | + "border-radius": '5px' |
| 98 | + } |
| 99 | + }, { |
| 100 | + "value": 4, |
| 101 | + "text": "网球" |
| 102 | + }, { |
| 103 | + "value": 5, |
| 104 | + "text": "羽毛球运动" |
| 105 | + }, { |
| 106 | + "value": 6, |
| 107 | + "text": "乒乓球运动" |
| 108 | + }] |
56 | 109 | } |
57 | 110 | }, |
58 | 111 | methods: { |
59 | 112 | change(e) { |
60 | | - console.log('e:', e); |
61 | | - } |
| 113 | + console.log('单选值:', e); |
| 114 | + }, |
| 115 | + changeMultiple(e) { |
| 116 | + console.log('多选值:', e); |
| 117 | + }, |
| 118 | + open(){ |
| 119 | + console.log("打开选择框") |
| 120 | + }, |
| 121 | + close(){ |
| 122 | + console.log("关闭选择框") |
| 123 | + }, |
| 124 | + clear(){ |
| 125 | + console.log("清除选择框") |
| 126 | + }, |
62 | 127 | } |
63 | 128 | } |
64 | 129 | </script> |
65 | | - |
66 | 130 | <style lang="scss"> |
67 | 131 | .text { |
68 | 132 | font-size: 12px; |
|
78 | 142 | .uni-pb-5 { |
79 | 143 | padding-bottom: 10px; |
80 | 144 | } |
81 | | -</style> |
| 145 | +</style> |
0 commit comments