other / mew-iview

Commit 5dd7b190787ef1a19a5335da17f08bf0a3be8bff

Authored by Aresn
Committed by GitHub
2 parents d552ad18 4a9974f6

Merge pull request #3672 from Xotic750/normalise_click_outside 

Normalise v-click-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 @5dd7b19
1 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 22 <!--</template>-->
13 23 <!--<script>-->
14 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 64 <!--</script>-->
55 65  
56 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 77 <!--</template>-->
64 78 <!--<script>-->
65 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 99 <!--</script>-->
86 100  
87 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 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 136 <!--</Col>-->
115   -<!--</Row>-->
116   -<!--</div>-->
  137 + <!--</Row>-->
  138 + <!--</div>-->
117 139 <!--</template>-->
118 140 <!--<script>-->
119 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 237 <!--</script>-->
169 238  
170 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 254 <!--</template>-->
183 255 <!--<script>-->
184 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 286 <!--</script>-->
217 287  
218 288  
219 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 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 319 <!--</Col>-->
242   -<!--</Row>-->
  320 + <!--</Row>-->
243 321 <!--</template>-->
244 322 <!--<script>-->
245 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 419 <!--</script>-->
295 420  
296 421 <!--<template>-->
... ... @@ -356,7 +481,9 @@
356 481 <!--style="width:200px"-->
357 482 <!--&gt;-->
358 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 487 <!--<i-option value="shenzhen">Sydney</i-option>-->
361 488 <!--</i-select>-->
362 489 <!--<br>-->
... ... @@ -396,15 +523,21 @@
396 523 <!--v-model="model9"-->
397 524 <!--style="width:200px"-->
398 525 <!--&gt;-->
399   - <!--<i-option value="New York" label="New York">-->
  526 + <!--<i-option -->
  527 + <!--value="New York" -->
  528 + <!--label="New York">-->
400 529 <!--<span>New York</span>-->
401 530 <!--<span style="float:right;color:#ccc">America</span>-->
402 531 <!--</i-option>-->
403   - <!--<i-option value="London" label="London">-->
  532 + <!--<i-option -->
  533 + <!--value="London" -->
  534 + <!--label="London">-->
404 535 <!--<span>London</span>-->
405 536 <!--<span style="float:right;color:#ccc">U.K.</span>-->
406 537 <!--</i-option>-->
407   - <!--<i-option value="Sydney" label="Sydney">-->
  538 + <!--<i-option -->
  539 + <!--value="Sydney" -->
  540 + <!--label="Sydney">-->
408 541 <!--<span>Sydney</span>-->
409 542 <!--<span style="float:right;color:#ccc">Australian</span>-->
410 543 <!--</i-option>-->
... ... @@ -461,11 +594,11 @@
461 594 <!--&gt;-->
462 595 <!--<i-select-->
463 596 <!--v-model="model13"-->
  597 + <!--:remote-method="remoteMethod1"-->
  598 + <!--:loading="loading1"-->
464 599 <!--filterable-->
465 600 <!--remote-->
466 601 <!--clearable-->
467   - <!--:remote-method="remoteMethod1"-->
468   - <!--:loading="loading1"-->
469 602 <!--&gt;-->
470 603 <!--<i-option-->
471 604 <!--v-for="(option, index) in options1"-->
... ... @@ -477,12 +610,12 @@
477 610 <!--<i-col span="12">-->
478 611 <!--<i-select-->
479 612 <!--v-model="model14"-->
  613 + <!--:remote-method="remoteMethod2"-->
  614 + <!--:loading="loading2"-->
480 615 <!--multiple-->
481 616 <!--filterable-->
482 617 <!--remote-->
483   - <!--clearable-->
484   - <!--:remote-method="remoteMethod2"-->
485   - <!--:loading="loading2">-->
  618 + <!--clearable>-->
486 619 <!--<i-option-->
487 620 <!--v-for="(option, index) in options2"-->
488 621 <!--:value="option.value"-->
... ... @@ -495,208 +628,251 @@
495 628 <!--</template>-->
496 629  
497 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 800 <!--</script>-->
670 801  
671 802  
672 803 <template>
673 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 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 823 </Select>
680 824  
681 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 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 847 </Select>
689 848  
690 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 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 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 876 </Select>
701 877  
702 878 <br><br>
... ... @@ -709,8 +885,14 @@
709 885 <br><br>
710 886 <br><br>
711 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 896 </Select>
715 897 <br><br>
716 898  
... ... @@ -722,50 +904,56 @@
722 904 <br><br>
723 905 <br><br>
724 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 915 </Select>
728 916 </div>
729 917 </template>
730 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 959 </script>
... ...
src/components/select/select.vue
  Show/Hide comments   View file @5dd7b19
... ... @@ -2,6 +2,7 @@
2 2 <div
3 3 :class="classes"
4 4 v-click-outside.capture="onClickOutside"
  5 + v-click-outside:mousedown.capture="onClickOutside"
5 6 >
6 7 <div
7 8 ref="reference"
... ... @@ -465,6 +466,10 @@
465 466 },
466 467 onClickOutside(event){
467 468 if (this.visible) {
  469 + if (event.type === 'mousedown') {
  470 + event.preventDefault();
  471 + return;
  472 + }
468 473  
469 474 if (this.filterable) {
470 475 const input = this.$el.querySelector('input[type="text"]');
... ...