other / mew-iview

Commit 4a9974f631928a58415fb1413915657c65a49888

Authored by Graham Fairweather
1 parent d552ad18

Normalise v-ckick-outside-x for Select

Showing 2 changed files with 679 additions and 486 deletions   Show diff stats
Inline Side-by-side
examples/routers/select.vue
  Show/Hide comments   View file @4a9974f
1 <!--<template>--> 1 <!--<template>-->
2 -<!--<div>-->  
3 -<!--{{ model10 }} - -->  
4 -<!--{{ model11 }}-->  
5 -<!--<Select v-model="model10" style="width:260px">-->  
6 -<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->  
7 -<!--</Select>-->  
8 -<!--<Select v-model="model11" style="width:260px">-->  
9 -<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->  
10 -<!--</Select>-->  
11 -<!--</div>--> 2 + <!--<div>-->
  3 + <!--{{model10}} - -->
  4 + <!--{{model11}}-->
  5 + <!--<Select -->
  6 + <!--v-model="model10" -->
  7 + <!--style="width:260px">-->
  8 + <!--<Option -->
  9 + <!--v-for="(item, index) in cityList" -->
  10 + <!--:value="item.value" -->
  11 + <!--:key="index">{{item.label}}</Option>-->
  12 + <!--</Select>-->
  13 + <!--<Select -->
  14 + <!--v-model="model11" -->
  15 + <!--style="width:260px">-->
  16 + <!--<Option -->
  17 + <!--v-for="(item, index) in cityList" -->
  18 + <!--:value="item.value" -->
  19 + <!--:key="index">{{item.label}}</Option>-->
  20 + <!--</Select>-->
  21 + <!--</div>-->
12 <!--</template>--> 22 <!--</template>-->
13 <!--<script>--> 23 <!--<script>-->
14 <!--export default {--> 24 <!--export default {-->
15 -<!--data () {-->  
16 -<!--return {-->  
17 -<!--cityList: [],-->  
18 -<!--model10: '',-->  
19 -<!--model11: '',-->  
20 -<!--model12: ''-->  
21 -<!--}-->  
22 -<!--},-->  
23 -<!--mounted () {-->  
24 -<!--setTimeout(() => {-->  
25 -<!--this.cityList = [-->  
26 -<!--{-->  
27 -<!--value: 'beijing',-->  
28 -<!--label: '北京市'-->  
29 -<!--},-->  
30 -<!--{-->  
31 -<!--value: 'shanghai',-->  
32 -<!--label: '上海市'-->  
33 -<!--},-->  
34 -<!--{-->  
35 -<!--value: 'shenzhen',-->  
36 -<!--label: '深圳市'-->  
37 -<!--},-->  
38 -<!--{-->  
39 -<!--value: 'hangzhou',-->  
40 -<!--label: '杭州市'-->  
41 -<!--},-->  
42 -<!--{-->  
43 -<!--value: 'nanjing',-->  
44 -<!--label: '南京市'-->  
45 -<!--},-->  
46 -<!--{-->  
47 -<!--value: 'chongqing',-->  
48 -<!--label: '重庆市'-->  
49 -<!--}-->  
50 -<!--];-->  
51 -<!--}, 1000);-->  
52 -<!--}-->  
53 -<!--}--> 25 + <!--data() {-->
  26 + <!--return {-->
  27 + <!--cityList: [],-->
  28 + <!--model10: '',-->
  29 + <!--model11: '',-->
  30 + <!--model12: '',-->
  31 + <!--};-->
  32 + <!--},-->
  33 + <!--mounted() {-->
  34 + <!--setTimeout(() => {-->
  35 + <!--this.cityList = [-->
  36 + <!--{-->
  37 + <!--value: 'beijing',-->
  38 + <!--label: '北京市',-->
  39 + <!--},-->
  40 + <!--{-->
  41 + <!--value: 'shanghai',-->
  42 + <!--label: '上海市',-->
  43 + <!--},-->
  44 + <!--{-->
  45 + <!--value: 'shenzhen',-->
  46 + <!--label: '深圳市',-->
  47 + <!--},-->
  48 + <!--{-->
  49 + <!--value: 'hangzhou',-->
  50 + <!--label: '杭州市',-->
  51 + <!--},-->
  52 + <!--{-->
  53 + <!--value: 'nanjing',-->
  54 + <!--label: '南京市',-->
  55 + <!--},-->
  56 + <!--{-->
  57 + <!--value: 'chongqing',-->
  58 + <!--label: '重庆市',-->
  59 + <!--},-->
  60 + <!--];-->
  61 + <!--}, 1000);-->
  62 + <!--},-->
  63 +<!--};-->
54 <!--</script>--> 64 <!--</script>-->
55 65
56 <!--<template>--> 66 <!--<template>-->
57 -<!--<div>-->  
58 -<!--<Select v-model="value">-->  
59 -<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->  
60 -<!--</Select>-->  
61 -<!--<Button @click="setList">set list</Button>-->  
62 -<!--</div>--> 67 + <!--<div>-->
  68 + <!--<Select v-model="value">-->
  69 + <!--<Option -->
  70 + <!--v-for="item in list" -->
  71 + <!--:value="item.value" -->
  72 + <!--:label="item.label" -->
  73 + <!--:key="item.value"></Option>-->
  74 + <!--</Select>-->
  75 + <!--<Button @click="setList">set list</Button>-->
  76 + <!--</div>-->
63 <!--</template>--> 77 <!--</template>-->
64 <!--<script>--> 78 <!--<script>-->
65 <!--export default {--> 79 <!--export default {-->
66 -<!--data () {-->  
67 -<!--return {-->  
68 -<!--value: '',-->  
69 -<!--list: []-->  
70 -<!--}-->  
71 -<!--},-->  
72 -<!--methods: {-->  
73 -<!--setList () {-->  
74 -<!--let list = [];-->  
75 -<!--for (let i = 0; i < 400; i++) {-->  
76 -<!--list.push({-->  
77 -<!--value: 'value' + i,-->  
78 -<!--label: 'label' + i-->  
79 -<!--});-->  
80 -<!--}-->  
81 -<!--this.list = list;-->  
82 -<!--}-->  
83 -<!--}-->  
84 -<!--}--> 80 + <!--data() {-->
  81 + <!--return {-->
  82 + <!--value: '',-->
  83 + <!--list: [],-->
  84 + <!--};-->
  85 + <!--},-->
  86 + <!--methods: {-->
  87 + <!--setList() {-->
  88 + <!--const list = [];-->
  89 + <!--for (let i = 0; i < 400; i++) {-->
  90 + <!--list.push({-->
  91 + <!--value: `value${i}`,-->
  92 + <!--label: `label${i}`,-->
  93 + <!--});-->
  94 + <!--}-->
  95 + <!--this.list = list;-->
  96 + <!--},-->
  97 + <!--},-->
  98 +<!--};-->
85 <!--</script>--> 99 <!--</script>-->
86 100
87 <!--<template>--> 101 <!--<template>-->
88 -<!--<div style="width: 400px;margin: 50px;">-->  
89 -<!--<div>data: {{ model13 }}</div>-->  
90 -<!--<Row>-->  
91 -<!--<Col span="12" style="padding-right:10px">-->  
92 -<!--<Select-->  
93 -<!--size="small"-->  
94 -<!--placeholder="提示提示"-->  
95 -<!--v-model="model13"-->  
96 -<!--filterable-->  
97 -<!--remote-->  
98 -<!--transfer-->  
99 -<!--:remote-method="remoteMethod1"-->  
100 -<!--:loading="loading1">-->  
101 -<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->  
102 -<!--</Select>--> 102 + <!--<div style="width: 400px;margin: 50px;">-->
  103 + <!--<div>data: {{model13}}</div>-->
  104 + <!--<Row>-->
  105 + <!--<Col -->
  106 + <!--span="12" -->
  107 + <!--style="padding-right:10px">-->
  108 + <!--<Select-->
  109 + <!--v-model="model13"-->
  110 + <!--:remote-method="remoteMethod1"-->
  111 + <!--:loading="loading1"-->
  112 + <!--size="small"-->
  113 + <!--placeholder="提示提示"-->
  114 + <!--filterable-->
  115 + <!--remote-->
  116 + <!--transfer>-->
  117 + <!--<Option -->
  118 + <!--v-for="(option, index) in options1" -->
  119 + <!--:value="option.value" -->
  120 + <!--:key="index">{{option.label}}</Option>-->
  121 + <!--</Select>-->
103 <!--</Col>--> 122 <!--</Col>-->
104 -<!--<Col span="12">-->  
105 -<!--<Select-->  
106 -<!--v-model="model14"-->  
107 -<!--multiple-->  
108 -<!--filterable-->  
109 -<!--remote-->  
110 -<!--:remote-method="remoteMethod2"-->  
111 -<!--:loading="loading2">-->  
112 -<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->  
113 -<!--</Select>--> 123 + <!--<Col span="12">-->
  124 + <!--<Select-->
  125 + <!--v-model="model14"-->
  126 + <!--:remote-method="remoteMethod2"-->
  127 + <!--:loading="loading2"-->
  128 + <!--multiple-->
  129 + <!--filterable-->
  130 + <!--remote>-->
  131 + <!--<Option -->
  132 + <!--v-for="(option, index) in options2" -->
  133 + <!--:value="option.value" -->
  134 + <!--:key="index">{{option.label}}</Option>-->
  135 + <!--</Select>-->
114 <!--</Col>--> 136 <!--</Col>-->
115 -<!--</Row>-->  
116 -<!--</div>--> 137 + <!--</Row>-->
  138 + <!--</div>-->
117 <!--</template>--> 139 <!--</template>-->
118 <!--<script>--> 140 <!--<script>-->
119 <!--export default {--> 141 <!--export default {-->
120 -<!--data () {-->  
121 -<!--return {-->  
122 -<!--model13: '',-->  
123 -<!--loading1: false,-->  
124 -<!--options1: [],-->  
125 -<!--model14: [],-->  
126 -<!--loading2: false,-->  
127 -<!--options2: [],-->  
128 -<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']-->  
129 -<!--}-->  
130 -<!--},-->  
131 -<!--methods: {-->  
132 -<!--remoteMethod1 (query) {-->  
133 -<!--if (query !== '') {-->  
134 -<!--this.loading1 = true;-->  
135 -<!--setTimeout(() => {-->  
136 -<!--this.loading1 = false;-->  
137 -<!--const list = this.list.map(item => {-->  
138 -<!--return {-->  
139 -<!--value: item,-->  
140 -<!--label: item-->  
141 -<!--};-->  
142 -<!--});-->  
143 -<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->  
144 -<!--}, 200);-->  
145 -<!--} else {-->  
146 -<!--this.options1 = [];-->  
147 -<!--}-->  
148 -<!--},-->  
149 -<!--remoteMethod2 (query) {-->  
150 -<!--if (query !== '') {-->  
151 -<!--this.loading2 = true;-->  
152 -<!--setTimeout(() => {-->  
153 -<!--this.loading2 = false;-->  
154 -<!--const list = this.list.map(item => {-->  
155 -<!--return {-->  
156 -<!--value: item,-->  
157 -<!--label: item--> 142 + <!--data() {-->
  143 + <!--return {-->
  144 + <!--model13: '',-->
  145 + <!--loading1: false,-->
  146 + <!--options1: [],-->
  147 + <!--model14: [],-->
  148 + <!--loading2: false,-->
  149 + <!--options2: [],-->
  150 + <!--list: [-->
  151 + <!--'Alabama',-->
  152 + <!--'Alaska',-->
  153 + <!--'Arizona',-->
  154 + <!--'Arkansas',-->
  155 + <!--'California',-->
  156 + <!--'Colorado',-->
  157 + <!--'Connecticut',-->
  158 + <!--'Delaware',-->
  159 + <!--'Florida',-->
  160 + <!--'Georgia',-->
  161 + <!--'Hawaii',-->
  162 + <!--'Idaho',-->
  163 + <!--'Illinois',-->
  164 + <!--'Indiana',-->
  165 + <!--'Iowa',-->
  166 + <!--'Kansas',-->
  167 + <!--'Kentucky',-->
  168 + <!--'Louisiana',-->
  169 + <!--'Maine',-->
  170 + <!--'Maryland',-->
  171 + <!--'Massachusetts',-->
  172 + <!--'Michigan',-->
  173 + <!--'Minnesota',-->
  174 + <!--'Mississippi',-->
  175 + <!--'Missouri',-->
  176 + <!--'Montana',-->
  177 + <!--'Nebraska',-->
  178 + <!--'Nevada',-->
  179 + <!--'New hampshire',-->
  180 + <!--'New jersey',-->
  181 + <!--'New mexico',-->
  182 + <!--'New york',-->
  183 + <!--'North carolina',-->
  184 + <!--'North dakota',-->
  185 + <!--'Ohio',-->
  186 + <!--'Oklahoma',-->
  187 + <!--'Oregon',-->
  188 + <!--'Pennsylvania',-->
  189 + <!--'Rhode island',-->
  190 + <!--'South carolina',-->
  191 + <!--'South dakota',-->
  192 + <!--'Tennessee',-->
  193 + <!--'Texas',-->
  194 + <!--'Utah',-->
  195 + <!--'Vermont',-->
  196 + <!--'Virginia',-->
  197 + <!--'Washington',-->
  198 + <!--'West virginia',-->
  199 + <!--'Wisconsin',-->
  200 + <!--'Wyoming',-->
  201 + <!--],-->
  202 + <!--};-->
  203 + <!--},-->
  204 + <!--methods: {-->
  205 + <!--remoteMethod1(query) {-->
  206 + <!--if (query !== '') {-->
  207 + <!--this.loading1 = true;-->
  208 + <!--setTimeout(() => {-->
  209 + <!--this.loading1 = false;-->
  210 + <!--const list = this.list.map((item) => ({-->
  211 + <!--value: item,-->
  212 + <!--label: item,-->
  213 + <!--}));-->
  214 + <!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
  215 + <!--}, 200);-->
  216 + <!--} else {-->
  217 + <!--this.options1 = [];-->
  218 + <!--}-->
  219 + <!--},-->
  220 + <!--remoteMethod2(query) {-->
  221 + <!--if (query !== '') {-->
  222 + <!--this.loading2 = true;-->
  223 + <!--setTimeout(() => {-->
  224 + <!--this.loading2 = false;-->
  225 + <!--const list = this.list.map((item) => ({-->
  226 + <!--value: item,-->
  227 + <!--label: item,-->
  228 + <!--}));-->
  229 + <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
  230 + <!--}, 200);-->
  231 + <!--} else {-->
  232 + <!--this.options2 = [];-->
  233 + <!--}-->
  234 + <!--},-->
  235 + <!--},-->
158 <!--};--> 236 <!--};-->
159 -<!--});-->  
160 -<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->  
161 -<!--}, 200);-->  
162 -<!--} else {-->  
163 -<!--this.options2 = [];-->  
164 -<!--}-->  
165 -<!--}-->  
166 -<!--}-->  
167 -<!--}-->  
168 <!--</script>--> 237 <!--</script>-->
169 238
170 <!--<template>--> 239 <!--<template>-->
171 -<!--<div style="width: 300px">-->  
172 -<!--<Select-->  
173 -<!--v-model="model14"-->  
174 -<!--multiple-->  
175 -<!--filterable-->  
176 -<!--remote-->  
177 -<!--:remote-method="remoteMethod2"-->  
178 -<!--:loading="loading2">-->  
179 -<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->  
180 -<!--</Select>-->  
181 -<!--</div>--> 240 + <!--<div style="width: 300px">-->
  241 + <!--<Select-->
  242 + <!--v-model="model14"-->
  243 + <!--:remote-method="remoteMethod2"-->
  244 + <!--:loading="loading2"-->
  245 + <!--multiple-->
  246 + <!--filterable-->
  247 + <!--remote>-->
  248 + <!--<Option -->
  249 + <!--v-for="(option, index) in options2" -->
  250 + <!--:value="option.value" -->
  251 + <!--:key="index">{{option.label}}</Option>-->
  252 + <!--</Select>-->
  253 + <!--</div>-->
182 <!--</template>--> 254 <!--</template>-->
183 <!--<script>--> 255 <!--<script>-->
184 <!--export default {--> 256 <!--export default {-->
185 -<!--data () {-->  
186 -<!--return {-->  
187 -<!--model13: '',-->  
188 -<!--loading1: false,-->  
189 -<!--options1: [],-->  
190 -<!--model14: [],-->  
191 -<!--loading2: false,-->  
192 -<!--options2: [],-->  
193 -<!--list: ['a', 'b', 'c']-->  
194 -<!--}-->  
195 -<!--},-->  
196 -<!--methods: {-->  
197 -<!--remoteMethod2 (query) {-->  
198 -<!--if (query !== '') {-->  
199 -<!--this.loading2 = true;-->  
200 -<!--setTimeout(() => {-->  
201 -<!--this.loading2 = false;-->  
202 -<!--const list = this.list.map(item => {-->  
203 -<!--return {-->  
204 -<!--value: item,-->  
205 -<!--label: item--> 257 + <!--data() {-->
  258 + <!--return {-->
  259 + <!--model13: '',-->
  260 + <!--loading1: false,-->
  261 + <!--options1: [],-->
  262 + <!--model14: [],-->
  263 + <!--loading2: false,-->
  264 + <!--options2: [],-->
  265 + <!--list: ['a', 'b', 'c'],-->
  266 + <!--};-->
  267 + <!--},-->
  268 + <!--methods: {-->
  269 + <!--remoteMethod2(query) {-->
  270 + <!--if (query !== '') {-->
  271 + <!--this.loading2 = true;-->
  272 + <!--setTimeout(() => {-->
  273 + <!--this.loading2 = false;-->
  274 + <!--const list = this.list.map((item) => ({-->
  275 + <!--value: item,-->
  276 + <!--label: item,-->
  277 + <!--}));-->
  278 + <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
  279 + <!--}, 200);-->
  280 + <!--} else {-->
  281 + <!--this.options2 = [];-->
  282 + <!--}-->
  283 + <!--},-->
  284 + <!--},-->
206 <!--};--> 285 <!--};-->
207 -<!--});-->  
208 -<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->  
209 -<!--}, 200);-->  
210 -<!--} else {-->  
211 -<!--this.options2 = [];-->  
212 -<!--}-->  
213 -<!--}-->  
214 -<!--}-->  
215 -<!--}-->  
216 <!--</script>--> 286 <!--</script>-->
217 287
218 288
219 <!--<template>--> 289 <!--<template>-->
220 -<!--<Row>-->  
221 -<!--<Col span="12" style="padding-right:10px">-->  
222 -<!--<Select-->  
223 -<!--v-model="model13"-->  
224 -<!--filterable-->  
225 -<!--remote-->  
226 -<!--:remote-method="remoteMethod1"-->  
227 -<!--:loading="loading1">-->  
228 -<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->  
229 -<!--</Select>--> 290 + <!--<Row>-->
  291 + <!--<Col -->
  292 + <!--span="12" -->
  293 + <!--style="padding-right:10px">-->
  294 + <!--<Select-->
  295 + <!--v-model="model13"-->
  296 + <!--:remote-method="remoteMethod1"-->
  297 + <!--:loading="loading1"-->
  298 + <!--filterable-->
  299 + <!--remote>-->
  300 + <!--<Option -->
  301 + <!--v-for="(option, index) in options1" -->
  302 + <!--:value="option.value" -->
  303 + <!--:key="index">{{option.label}}</Option>-->
  304 + <!--</Select>-->
230 <!--</Col>--> 305 <!--</Col>-->
231 -<!--<Col span="12">-->  
232 -<!--<Select-->  
233 -<!--v-model="model14"-->  
234 -<!--multiple-->  
235 -<!--filterable-->  
236 -<!--remote-->  
237 -<!--:remote-method="remoteMethod2"-->  
238 -<!--:loading="loading2">-->  
239 -<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->  
240 -<!--</Select>--> 306 + <!--<Col span="12">-->
  307 + <!--<Select-->
  308 + <!--v-model="model14"-->
  309 + <!--:remote-method="remoteMethod2"-->
  310 + <!--:loading="loading2"-->
  311 + <!--multiple-->
  312 + <!--filterable-->
  313 + <!--remote>-->
  314 + <!--<Option -->
  315 + <!--v-for="(option, index) in options2" -->
  316 + <!--:value="option.value" -->
  317 + <!--:key="index">{{option.label}}</Option>-->
  318 + <!--</Select>-->
241 <!--</Col>--> 319 <!--</Col>-->
242 -<!--</Row>--> 320 + <!--</Row>-->
243 <!--</template>--> 321 <!--</template>-->
244 <!--<script>--> 322 <!--<script>-->
245 <!--export default {--> 323 <!--export default {-->
246 -<!--data () {-->  
247 -<!--return {-->  
248 -<!--model13: '',-->  
249 -<!--loading1: false,-->  
250 -<!--options1: [],-->  
251 -<!--model14: [],-->  
252 -<!--loading2: false,-->  
253 -<!--options2: [],-->  
254 -<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']-->  
255 -<!--}-->  
256 -<!--},-->  
257 -<!--methods: {-->  
258 -<!--remoteMethod1 (query) {-->  
259 -<!--if (query !== '') {-->  
260 -<!--this.loading1 = true;-->  
261 -<!--setTimeout(() => {-->  
262 -<!--this.loading1 = false;-->  
263 -<!--const list = this.list.map(item => {-->  
264 -<!--return {-->  
265 -<!--value: item,-->  
266 -<!--label: item-->  
267 -<!--};-->  
268 -<!--});-->  
269 -<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->  
270 -<!--}, 200);-->  
271 -<!--} else {-->  
272 -<!--this.options1 = [];-->  
273 -<!--}-->  
274 -<!--},-->  
275 -<!--remoteMethod2 (query) {-->  
276 -<!--if (query !== '') {-->  
277 -<!--this.loading2 = true;-->  
278 -<!--setTimeout(() => {-->  
279 -<!--this.loading2 = false;-->  
280 -<!--const list = this.list.map(item => {-->  
281 -<!--return {-->  
282 -<!--value: item,-->  
283 -<!--label: item--> 324 + <!--data() {-->
  325 + <!--return {-->
  326 + <!--model13: '',-->
  327 + <!--loading1: false,-->
  328 + <!--options1: [],-->
  329 + <!--model14: [],-->
  330 + <!--loading2: false,-->
  331 + <!--options2: [],-->
  332 + <!--list: [-->
  333 + <!--'Alabama',-->
  334 + <!--'Alaska',-->
  335 + <!--'Arizona',-->
  336 + <!--'Arkansas',-->
  337 + <!--'California',-->
  338 + <!--'Colorado',-->
  339 + <!--'Connecticut',-->
  340 + <!--'Delaware',-->
  341 + <!--'Florida',-->
  342 + <!--'Georgia',-->
  343 + <!--'Hawaii',-->
  344 + <!--'Idaho',-->
  345 + <!--'Illinois',-->
  346 + <!--'Indiana',-->
  347 + <!--'Iowa',-->
  348 + <!--'Kansas',-->
  349 + <!--'Kentucky',-->
  350 + <!--'Louisiana',-->
  351 + <!--'Maine',-->
  352 + <!--'Maryland',-->
  353 + <!--'Massachusetts',-->
  354 + <!--'Michigan',-->
  355 + <!--'Minnesota',-->
  356 + <!--'Mississippi',-->
  357 + <!--'Missouri',-->
  358 + <!--'Montana',-->
  359 + <!--'Nebraska',-->
  360 + <!--'Nevada',-->
  361 + <!--'New hampshire',-->
  362 + <!--'New jersey',-->
  363 + <!--'New mexico',-->
  364 + <!--'New york',-->
  365 + <!--'North carolina',-->
  366 + <!--'North dakota',-->
  367 + <!--'Ohio',-->
  368 + <!--'Oklahoma',-->
  369 + <!--'Oregon',-->
  370 + <!--'Pennsylvania',-->
  371 + <!--'Rhode island',-->
  372 + <!--'South carolina',-->
  373 + <!--'South dakota',-->
  374 + <!--'Tennessee',-->
  375 + <!--'Texas',-->
  376 + <!--'Utah',-->
  377 + <!--'Vermont',-->
  378 + <!--'Virginia',-->
  379 + <!--'Washington',-->
  380 + <!--'West virginia',-->
  381 + <!--'Wisconsin',-->
  382 + <!--'Wyoming',-->
  383 + <!--],-->
  384 + <!--};-->
  385 + <!--},-->
  386 + <!--methods: {-->
  387 + <!--remoteMethod1(query) {-->
  388 + <!--if (query !== '') {-->
  389 + <!--this.loading1 = true;-->
  390 + <!--setTimeout(() => {-->
  391 + <!--this.loading1 = false;-->
  392 + <!--const list = this.list.map((item) => ({-->
  393 + <!--value: item,-->
  394 + <!--label: item,-->
  395 + <!--}));-->
  396 + <!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
  397 + <!--}, 200);-->
  398 + <!--} else {-->
  399 + <!--this.options1 = [];-->
  400 + <!--}-->
  401 + <!--},-->
  402 + <!--remoteMethod2(query) {-->
  403 + <!--if (query !== '') {-->
  404 + <!--this.loading2 = true;-->
  405 + <!--setTimeout(() => {-->
  406 + <!--this.loading2 = false;-->
  407 + <!--const list = this.list.map((item) => ({-->
  408 + <!--value: item,-->
  409 + <!--label: item,-->
  410 + <!--}));-->
  411 + <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
  412 + <!--}, 200);-->
  413 + <!--} else {-->
  414 + <!--this.options2 = [];-->
  415 + <!--}-->
  416 + <!--},-->
  417 + <!--},-->
284 <!--};--> 418 <!--};-->
285 -<!--});-->  
286 -<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->  
287 -<!--}, 200);-->  
288 -<!--} else {-->  
289 -<!--this.options2 = [];-->  
290 -<!--}-->  
291 -<!--}-->  
292 -<!--}-->  
293 -<!--}-->  
294 <!--</script>--> 419 <!--</script>-->
295 420
296 <!--<template>--> 421 <!--<template>-->
@@ -356,7 +481,9 @@ @@ -356,7 +481,9 @@
356 <!--style="width:200px"--> 481 <!--style="width:200px"-->
357 <!--&gt;--> 482 <!--&gt;-->
358 <!--<i-option value="beijing">New York</i-option>--> 483 <!--<i-option value="beijing">New York</i-option>-->
359 - <!--<i-option value="shanghai" disabled>London</i-option>--> 484 + <!--<i-option -->
  485 + <!--value="shanghai" -->
  486 + <!--disabled>London</i-option>-->
360 <!--<i-option value="shenzhen">Sydney</i-option>--> 487 <!--<i-option value="shenzhen">Sydney</i-option>-->
361 <!--</i-select>--> 488 <!--</i-select>-->
362 <!--<br>--> 489 <!--<br>-->
@@ -396,15 +523,21 @@ @@ -396,15 +523,21 @@
396 <!--v-model="model9"--> 523 <!--v-model="model9"-->
397 <!--style="width:200px"--> 524 <!--style="width:200px"-->
398 <!--&gt;--> 525 <!--&gt;-->
399 - <!--<i-option value="New York" label="New York">--> 526 + <!--<i-option -->
  527 + <!--value="New York" -->
  528 + <!--label="New York">-->
400 <!--<span>New York</span>--> 529 <!--<span>New York</span>-->
401 <!--<span style="float:right;color:#ccc">America</span>--> 530 <!--<span style="float:right;color:#ccc">America</span>-->
402 <!--</i-option>--> 531 <!--</i-option>-->
403 - <!--<i-option value="London" label="London">--> 532 + <!--<i-option -->
  533 + <!--value="London" -->
  534 + <!--label="London">-->
404 <!--<span>London</span>--> 535 <!--<span>London</span>-->
405 <!--<span style="float:right;color:#ccc">U.K.</span>--> 536 <!--<span style="float:right;color:#ccc">U.K.</span>-->
406 <!--</i-option>--> 537 <!--</i-option>-->
407 - <!--<i-option value="Sydney" label="Sydney">--> 538 + <!--<i-option -->
  539 + <!--value="Sydney" -->
  540 + <!--label="Sydney">-->
408 <!--<span>Sydney</span>--> 541 <!--<span>Sydney</span>-->
409 <!--<span style="float:right;color:#ccc">Australian</span>--> 542 <!--<span style="float:right;color:#ccc">Australian</span>-->
410 <!--</i-option>--> 543 <!--</i-option>-->
@@ -461,11 +594,11 @@ @@ -461,11 +594,11 @@
461 <!--&gt;--> 594 <!--&gt;-->
462 <!--<i-select--> 595 <!--<i-select-->
463 <!--v-model="model13"--> 596 <!--v-model="model13"-->
  597 + <!--:remote-method="remoteMethod1"-->
  598 + <!--:loading="loading1"-->
464 <!--filterable--> 599 <!--filterable-->
465 <!--remote--> 600 <!--remote-->
466 <!--clearable--> 601 <!--clearable-->
467 - <!--:remote-method="remoteMethod1"-->  
468 - <!--:loading="loading1"-->  
469 <!--&gt;--> 602 <!--&gt;-->
470 <!--<i-option--> 603 <!--<i-option-->
471 <!--v-for="(option, index) in options1"--> 604 <!--v-for="(option, index) in options1"-->
@@ -477,12 +610,12 @@ @@ -477,12 +610,12 @@
477 <!--<i-col span="12">--> 610 <!--<i-col span="12">-->
478 <!--<i-select--> 611 <!--<i-select-->
479 <!--v-model="model14"--> 612 <!--v-model="model14"-->
  613 + <!--:remote-method="remoteMethod2"-->
  614 + <!--:loading="loading2"-->
480 <!--multiple--> 615 <!--multiple-->
481 <!--filterable--> 616 <!--filterable-->
482 <!--remote--> 617 <!--remote-->
483 - <!--clearable-->  
484 - <!--:remote-method="remoteMethod2"-->  
485 - <!--:loading="loading2">--> 618 + <!--clearable>-->
486 <!--<i-option--> 619 <!--<i-option-->
487 <!--v-for="(option, index) in options2"--> 620 <!--v-for="(option, index) in options2"-->
488 <!--:value="option.value"--> 621 <!--:value="option.value"-->
@@ -495,208 +628,251 @@ @@ -495,208 +628,251 @@
495 <!--</template>--> 628 <!--</template>-->
496 629
497 <!--<script>--> 630 <!--<script>-->
498 - <!--export default {-->  
499 - <!--data(){-->  
500 - <!--return {-->  
501 - <!--cityList: [-->  
502 - <!--{-->  
503 - <!--value: 'New York',-->  
504 - <!--label: 'New York',-->  
505 - <!--},-->  
506 - <!--{-->  
507 - <!--value: 'London',-->  
508 - <!--label: 'London',-->  
509 - <!--},-->  
510 - <!--{-->  
511 - <!--value: 'Sydney',-->  
512 - <!--label: 'Sydney',-->  
513 - <!--},-->  
514 - <!--{-->  
515 - <!--value: 'Ottawa',-->  
516 - <!--label: 'Ottawa',-->  
517 - <!--},-->  
518 - <!--{-->  
519 - <!--value: 'Paris',-->  
520 - <!--label: 'Paris',-->  
521 - <!--},-->  
522 - <!--{-->  
523 - <!--value: 'Canberra',-->  
524 - <!--label: 'Canberra',-->  
525 - <!--},-->  
526 - <!--],-->  
527 - <!--cityList1: [-->  
528 - <!--{-->  
529 - <!--value: 'New York',-->  
530 - <!--label: 'New York',-->  
531 - <!--},-->  
532 - <!--{-->  
533 - <!--value: 'London',-->  
534 - <!--label: 'London',-->  
535 - <!--},-->  
536 - <!--{-->  
537 - <!--value: 'Sydney',-->  
538 - <!--label: 'Sydney',-->  
539 - <!--},-->  
540 - <!--],-->  
541 - <!--cityList2: [-->  
542 - <!--{-->  
543 - <!--value: 'Ottawa',-->  
544 - <!--label: 'Ottawa',-->  
545 - <!--},-->  
546 - <!--{-->  
547 - <!--value: 'Paris',-->  
548 - <!--label: 'Paris',-->  
549 - <!--},-->  
550 - <!--{-->  
551 - <!--value: 'Canberra',-->  
552 - <!--label: 'Canberra',-->  
553 - <!--},-->  
554 - <!--],-->  
555 - <!--model1: '',-->  
556 - <!--model2: '',-->  
557 - <!--model3: '',-->  
558 - <!--model4: '',-->  
559 - <!--model5: '',-->  
560 - <!--model6: '',-->  
561 - <!--model7: '',-->  
562 - <!--model8: '',-->  
563 - <!--model9: '',-->  
564 - <!--model10: [],-->  
565 - <!--model11: '',-->  
566 - <!--model12: [],-->  
567 - <!--model13: '',-->  
568 - <!--loading1: false,-->  
569 - <!--options1: [],-->  
570 - <!--model14: [],-->  
571 - <!--loading2: false,-->  
572 - <!--options2: [],-->  
573 - <!--list: [-->  
574 - <!--'Alabama',-->  
575 - <!--'Alaska',-->  
576 - <!--'Arizona',-->  
577 - <!--'Arkansas',-->  
578 - <!--'California',-->  
579 - <!--'Colorado',-->  
580 - <!--'Connecticut',-->  
581 - <!--'Delaware',-->  
582 - <!--'Florida',-->  
583 - <!--'Georgia',-->  
584 - <!--'Hawaii',-->  
585 - <!--'Idaho',-->  
586 - <!--'Illinois',-->  
587 - <!--'Indiana',-->  
588 - <!--'Iowa',-->  
589 - <!--'Kansas',-->  
590 - <!--'Kentucky',-->  
591 - <!--'Louisiana',-->  
592 - <!--'Maine',-->  
593 - <!--'Maryland',-->  
594 - <!--'Massachusetts',-->  
595 - <!--'Michigan',-->  
596 - <!--'Minnesota',-->  
597 - <!--'Mississippi',-->  
598 - <!--'Missouri',-->  
599 - <!--'Montana',-->  
600 - <!--'Nebraska',-->  
601 - <!--'Nevada',-->  
602 - <!--'New hampshire',-->  
603 - <!--'New jersey',-->  
604 - <!--'New mexico',-->  
605 - <!--'New york',-->  
606 - <!--'North carolina',-->  
607 - <!--'North dakota',-->  
608 - <!--'Ohio',-->  
609 - <!--'Oklahoma',-->  
610 - <!--'Oregon',-->  
611 - <!--'Pennsylvania',-->  
612 - <!--'Rhode island',-->  
613 - <!--'South carolina',-->  
614 - <!--'South dakota',-->  
615 - <!--'Tennessee',-->  
616 - <!--'Texas',-->  
617 - <!--'Utah',-->  
618 - <!--'Vermont',-->  
619 - <!--'Virginia',-->  
620 - <!--'Washington',-->  
621 - <!--'West virginia',-->  
622 - <!--'Wisconsin',-->  
623 - <!--'Wyoming',-->  
624 - <!--],-->  
625 - <!--};-->  
626 - <!--},--> 631 +<!--export default {-->
  632 + <!--data() {-->
  633 + <!--return {-->
  634 + <!--cityList: [-->
  635 + <!--{-->
  636 + <!--value: 'New York',-->
  637 + <!--label: 'New York',-->
  638 + <!--},-->
  639 + <!--{-->
  640 + <!--value: 'London',-->
  641 + <!--label: 'London',-->
  642 + <!--},-->
  643 + <!--{-->
  644 + <!--value: 'Sydney',-->
  645 + <!--label: 'Sydney',-->
  646 + <!--},-->
  647 + <!--{-->
  648 + <!--value: 'Ottawa',-->
  649 + <!--label: 'Ottawa',-->
  650 + <!--},-->
  651 + <!--{-->
  652 + <!--value: 'Paris',-->
  653 + <!--label: 'Paris',-->
  654 + <!--},-->
  655 + <!--{-->
  656 + <!--value: 'Canberra',-->
  657 + <!--label: 'Canberra',-->
  658 + <!--},-->
  659 + <!--],-->
  660 + <!--cityList1: [-->
  661 + <!--{-->
  662 + <!--value: 'New York',-->
  663 + <!--label: 'New York',-->
  664 + <!--},-->
  665 + <!--{-->
  666 + <!--value: 'London',-->
  667 + <!--label: 'London',-->
  668 + <!--},-->
  669 + <!--{-->
  670 + <!--value: 'Sydney',-->
  671 + <!--label: 'Sydney',-->
  672 + <!--},-->
  673 + <!--],-->
  674 + <!--cityList2: [-->
  675 + <!--{-->
  676 + <!--value: 'Ottawa',-->
  677 + <!--label: 'Ottawa',-->
  678 + <!--},-->
  679 + <!--{-->
  680 + <!--value: 'Paris',-->
  681 + <!--label: 'Paris',-->
  682 + <!--},-->
  683 + <!--{-->
  684 + <!--value: 'Canberra',-->
  685 + <!--label: 'Canberra',-->
  686 + <!--},-->
  687 + <!--],-->
  688 + <!--model1: '',-->
  689 + <!--model2: '',-->
  690 + <!--model3: '',-->
  691 + <!--model4: '',-->
  692 + <!--model5: '',-->
  693 + <!--model6: '',-->
  694 + <!--model7: '',-->
  695 + <!--model8: '',-->
  696 + <!--model9: '',-->
  697 + <!--model10: [],-->
  698 + <!--model11: '',-->
  699 + <!--model12: [],-->
  700 + <!--model13: '',-->
  701 + <!--loading1: false,-->
  702 + <!--options1: [],-->
  703 + <!--model14: [],-->
  704 + <!--loading2: false,-->
  705 + <!--options2: [],-->
  706 + <!--list: [-->
  707 + <!--'Alabama',-->
  708 + <!--'Alaska',-->
  709 + <!--'Arizona',-->
  710 + <!--'Arkansas',-->
  711 + <!--'California',-->
  712 + <!--'Colorado',-->
  713 + <!--'Connecticut',-->
  714 + <!--'Delaware',-->
  715 + <!--'Florida',-->
  716 + <!--'Georgia',-->
  717 + <!--'Hawaii',-->
  718 + <!--'Idaho',-->
  719 + <!--'Illinois',-->
  720 + <!--'Indiana',-->
  721 + <!--'Iowa',-->
  722 + <!--'Kansas',-->
  723 + <!--'Kentucky',-->
  724 + <!--'Louisiana',-->
  725 + <!--'Maine',-->
  726 + <!--'Maryland',-->
  727 + <!--'Massachusetts',-->
  728 + <!--'Michigan',-->
  729 + <!--'Minnesota',-->
  730 + <!--'Mississippi',-->
  731 + <!--'Missouri',-->
  732 + <!--'Montana',-->
  733 + <!--'Nebraska',-->
  734 + <!--'Nevada',-->
  735 + <!--'New hampshire',-->
  736 + <!--'New jersey',-->
  737 + <!--'New mexico',-->
  738 + <!--'New york',-->
  739 + <!--'North carolina',-->
  740 + <!--'North dakota',-->
  741 + <!--'Ohio',-->
  742 + <!--'Oklahoma',-->
  743 + <!--'Oregon',-->
  744 + <!--'Pennsylvania',-->
  745 + <!--'Rhode island',-->
  746 + <!--'South carolina',-->
  747 + <!--'South dakota',-->
  748 + <!--'Tennessee',-->
  749 + <!--'Texas',-->
  750 + <!--'Utah',-->
  751 + <!--'Vermont',-->
  752 + <!--'Virginia',-->
  753 + <!--'Washington',-->
  754 + <!--'West virginia',-->
  755 + <!--'Wisconsin',-->
  756 + <!--'Wyoming',-->
  757 + <!--],-->
  758 + <!--};-->
  759 + <!--},-->
627 760
628 - <!--methods: {-->  
629 - <!--remoteMethod1(query){-->  
630 - <!--if (query !== '') {-->  
631 - <!--this.loading1 = true;--> 761 + <!--methods: {-->
  762 + <!--remoteMethod1(query) {-->
  763 + <!--if (query !== '') {-->
  764 + <!--this.loading1 = true;-->
632 765
633 - <!--setTimeout(() => {-->  
634 - <!--this.loading1 = false;--> 766 + <!--setTimeout(() => {-->
  767 + <!--this.loading1 = false;-->
635 768
636 - <!--const list = this.list.map(item => ({-->  
637 - <!--value: item,-->  
638 - <!--label: item,-->  
639 - <!--}));--> 769 + <!--const list = this.list.map((item) => ({-->
  770 + <!--value: item,-->
  771 + <!--label: item,-->
  772 + <!--}));-->
640 773
641 - <!--this.options1 = list-->  
642 - <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->  
643 - <!--}, 1500);-->  
644 - <!--} else {-->  
645 - <!--this.options1 = [];-->  
646 - <!--}-->  
647 - <!--},-->  
648 - <!--remoteMethod2(query){-->  
649 - <!--if (query !== '') {-->  
650 - <!--this.loading2 = true;--> 774 + <!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
  775 + <!--}, 1500);-->
  776 + <!--} else {-->
  777 + <!--this.options1 = [];-->
  778 + <!--}-->
  779 + <!--},-->
  780 + <!--remoteMethod2(query) {-->
  781 + <!--if (query !== '') {-->
  782 + <!--this.loading2 = true;-->
651 783
652 - <!--setTimeout(() => {-->  
653 - <!--this.loading2 = false;--> 784 + <!--setTimeout(() => {-->
  785 + <!--this.loading2 = false;-->
654 786
655 - <!--const list = this.list.map(item => ({-->  
656 - <!--value: item,-->  
657 - <!--label: item,-->  
658 - <!--}));--> 787 + <!--const list = this.list.map((item) => ({-->
  788 + <!--value: item,-->
  789 + <!--label: item,-->
  790 + <!--}));-->
659 791
660 - <!--this.options2 = list-->  
661 - <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->  
662 - <!--}, 200);-->  
663 - <!--} else {-->  
664 - <!--this.options2 = [];-->  
665 - <!--}-->  
666 - <!--},--> 792 + <!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
  793 + <!--}, 200);-->
  794 + <!--} else {-->
  795 + <!--this.options2 = [];-->
  796 + <!--}-->
667 <!--},--> 797 <!--},-->
668 - <!--};--> 798 + <!--},-->
  799 +<!--};-->
669 <!--</script>--> 800 <!--</script>-->
670 801
671 802
672 <template> 803 <template>
673 <div> 804 <div>
674 - <Select v-model="model1" size="small" style="width:200px;" >  
675 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 805 + <Select
  806 + v-model="model1"
  807 + size="small"
  808 + style="width:200px;" >
  809 + <Option
  810 + v-for="item in cityList"
  811 + :value="item.value"
  812 + :key="item.value">{{item.label}}</Option>
676 </Select> 813 </Select>
677 - <Select v-model="model10" size="small" multiple style="width:260px" >  
678 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 814 + <Select
  815 + v-model="model10"
  816 + size="small"
  817 + multiple
  818 + style="width:260px" >
  819 + <Option
  820 + v-for="item in cityList"
  821 + :value="item.value"
  822 + :key="item.value">{{item.label}}</Option>
679 </Select> 823 </Select>
680 824
681 <br><br> 825 <br><br>
682 826
683 - <Select v-model="model1" size="large" style="width:200px" clearable @on-clear="onClear">  
684 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 827 + <Select
  828 + v-model="model1"
  829 + size="large"
  830 + style="width:200px"
  831 + clearable
  832 + @on-clear="onClear">
  833 + <Option
  834 + v-for="item in cityList"
  835 + :value="item.value"
  836 + :key="item.value">{{item.label}}</Option>
685 </Select> 837 </Select>
686 - <Select v-model="model10" size="large" multiple style="width:260px">  
687 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 838 + <Select
  839 + v-model="model10"
  840 + size="large"
  841 + multiple
  842 + style="width:260px">
  843 + <Option
  844 + v-for="item in cityList"
  845 + :value="item.value"
  846 + :key="item.value">{{item.label}}</Option>
688 </Select> 847 </Select>
689 848
690 <br><br> 849 <br><br>
691 850
692 - <Select v-model="model1" style="width:200px">  
693 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 851 + <Select
  852 + v-model="model1"
  853 + style="width:200px">
  854 + <Option
  855 + v-for="item in cityList"
  856 + :value="item.value"
  857 + :key="item.value">{{item.label}}</Option>
694 </Select> 858 </Select>
695 - <Select v-model="model11" multiple style="width:260px">  
696 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 859 + <Select
  860 + v-model="model11"
  861 + multiple
  862 + style="width:260px">
  863 + <Option
  864 + v-for="item in cityList"
  865 + :value="item.value"
  866 + :key="item.value">{{item.label}}</Option>
697 </Select> 867 </Select>
698 - <Select v-model="model10" multiple style="width:260px">  
699 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 868 + <Select
  869 + v-model="model10"
  870 + multiple
  871 + style="width:260px">
  872 + <Option
  873 + v-for="item in cityList"
  874 + :value="item.value"
  875 + :key="item.value">{{item.label}}</Option>
700 </Select> 876 </Select>
701 877
702 <br><br> 878 <br><br>
@@ -709,8 +885,14 @@ @@ -709,8 +885,14 @@
709 <br><br> 885 <br><br>
710 <br><br> 886 <br><br>
711 <br><br> 887 <br><br>
712 - <Select v-model="model10" multiple style="width:260px">  
713 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 888 + <Select
  889 + v-model="model10"
  890 + multiple
  891 + style="width:260px">
  892 + <Option
  893 + v-for="item in cityList"
  894 + :value="item.value"
  895 + :key="item.value">{{item.label}}</Option>
714 </Select> 896 </Select>
715 <br><br> 897 <br><br>
716 898
@@ -722,50 +904,56 @@ @@ -722,50 +904,56 @@
722 <br><br> 904 <br><br>
723 <br><br> 905 <br><br>
724 <br><br> 906 <br><br>
725 - <Select v-model="model10" multiple style="width:260px">  
726 - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 907 + <Select
  908 + v-model="model10"
  909 + multiple
  910 + style="width:260px">
  911 + <Option
  912 + v-for="item in cityList"
  913 + :value="item.value"
  914 + :key="item.value">{{item.label}}</Option>
727 </Select> 915 </Select>
728 </div> 916 </div>
729 </template> 917 </template>
730 <script> 918 <script>
731 - export default {  
732 - data () {  
733 - return {  
734 - cityList: [  
735 - {  
736 - value: 'New York',  
737 - label: 'New York'  
738 - },  
739 - {  
740 - value: '中国',  
741 - label: '中国'  
742 - },  
743 - {  
744 - value: 'Sydney',  
745 - label: 'Sydney'  
746 - },  
747 - {  
748 - value: 'Ottawa',  
749 - label: 'Ottawa'  
750 - },  
751 - {  
752 - value: 'Paris',  
753 - label: 'Paris'  
754 - },  
755 - {  
756 - value: 'Canberra',  
757 - label: 'Canberra'  
758 - }  
759 - ],  
760 - model1: '',  
761 - model10: [],  
762 - model11: []  
763 - } 919 +export default {
  920 + data() {
  921 + return {
  922 + cityList: [
  923 + {
  924 + value: 'New York',
  925 + label: 'New York',
  926 + },
  927 + {
  928 + value: '中国',
  929 + label: '中国',
  930 + },
  931 + {
  932 + value: 'Sydney',
  933 + label: 'Sydney',
  934 + },
  935 + {
  936 + value: 'Ottawa',
  937 + label: 'Ottawa',
  938 + },
  939 + {
  940 + value: 'Paris',
  941 + label: 'Paris',
  942 + },
  943 + {
  944 + value: 'Canberra',
  945 + label: 'Canberra',
  946 + },
  947 + ],
  948 + model1: '',
  949 + model10: [],
  950 + model11: [],
  951 + };
  952 + },
  953 + methods: {
  954 + onClear() {
  955 + console.log('onClear');
764 }, 956 },
765 - methods: {  
766 - onClear(){  
767 - console.log('onClear');  
768 - }  
769 - }  
770 - } 957 + },
  958 +};
771 </script> 959 </script>
src/components/select/select.vue
  Show/Hide comments   View file @4a9974f
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 <div 2 <div
3 :class="classes" 3 :class="classes"
4 v-click-outside.capture="onClickOutside" 4 v-click-outside.capture="onClickOutside"
  5 + v-click-outside:mousedown.capture="onClickOutside"
5 > 6 >
6 <div 7 <div
7 ref="reference" 8 ref="reference"
@@ -465,6 +466,10 @@ @@ -465,6 +466,10 @@
465 }, 466 },
466 onClickOutside(event){ 467 onClickOutside(event){
467 if (this.visible) { 468 if (this.visible) {
  469 + if (event.type === 'mousedown') {
  470 + event.preventDefault();
  471 + return;
  472 + }
468 473
469 if (this.filterable) { 474 if (this.filterable) {
470 const input = this.$el.querySelector('input[type="text"]'); 475 const input = this.$el.querySelector('input[type="text"]');