drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3672 from Xotic750/normalise_click_outside

Browse source 
Normalise v-click-outside-x for Select
This commit is contained in:
Aresn 2018-05-22 14:40:05 +08:00 • committed by GitHub
commit 5dd7b19078
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 682 additions and 489 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

462
examples/routers/select.vue
View file

@ -2,11 +2,21 @@
<!--<div>-->
<!--{{model10}} - -->
<!--{{model11}}-->
<!--<Select v-model="model10" style="width:260px">-->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
<!--<Select -->
<!--v-model="model10" -->
<!--style="width:260px">-->
<!--<Option -->
<!--v-for="(item, index) in cityList" -->
<!--:value="item.value" -->
<!--:key="index">{{item.label}}</Option>-->
<!--</Select>-->
<!--<Select v-model="model11" style="width:260px">-->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
<!--<Select -->
<!--v-model="model11" -->
<!--style="width:260px">-->
<!--<Option -->
<!--v-for="(item, index) in cityList" -->
<!--:value="item.value" -->
<!--:key="index">{{item.label}}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>-->
@ -17,46 +27,50 @@
<!--cityList: [],-->
<!--model10: '',-->
<!--model11: '',-->
<!--model12: ''-->
<!--}-->
<!--model12: '',-->
<!--};-->
<!--},-->
<!--mounted() {-->
<!--setTimeout(() => {-->
<!--this.cityList = [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京市'-->
<!--label: '北京市',-->
<!--},-->
<!--{-->
<!--value: 'shanghai',-->
<!--label: '上海市'-->
<!--label: '上海市',-->
<!--},-->
<!--{-->
<!--value: 'shenzhen',-->
<!--label: '深圳市'-->
<!--label: '深圳市',-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州市'-->
<!--label: '杭州市',-->
<!--},-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京市'-->
<!--label: '南京市',-->
<!--},-->
<!--{-->
<!--value: 'chongqing',-->
<!--label: '重庆市'-->
<!--}-->
<!--label: '重庆市',-->
<!--},-->
<!--];-->
<!--}, 1000);-->
<!--}-->
<!--}-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<Select v-model="value">-->
<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
<!--<Option -->
<!--v-for="item in list" -->
<!--:value="item.value" -->
<!--:label="item.label" -->
<!--:key="item.value"></Option>-->
<!--</Select>-->
<!--<Button @click="setList">set list</Button>-->
<!--</div>-->
@ -66,50 +80,58 @@
<!--data() {-->
<!--return {-->
<!--value: '',-->
<!--list: []-->
<!--}-->
<!--list: [],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--setList() {-->
<!--let list = [];-->
<!--const list = [];-->
<!--for (let i = 0; i < 400; i++) {-->
<!--list.push({-->
<!--value: 'value' + i,-->
<!--label: 'label' + i-->
<!--value: `value${i}`,-->
<!--label: `label${i}`,-->
<!--});-->
<!--}-->
<!--this.list = list;-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<div style="width: 400px;margin: 50px;">-->
<!--<div>data: {{model13}}</div>-->
<!--<Row>-->
<!--<Col span="12" style="padding-right:10px">-->
<!--<Col -->
<!--span="12" -->
<!--style="padding-right:10px">-->
<!--<Select-->
<!--v-model="model13"-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--size="small"-->
<!--placeholder="提示提示"-->
<!--v-model="model13"-->
<!--filterable-->
<!--remote-->
<!--transfer-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1">-->
<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--transfer>-->
<!--<Option -->
<!--v-for="(option, index) in options1" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--<Col span="12">-->
<!--<Select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--</Row>-->
@ -125,8 +147,59 @@
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--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']-->
<!--}-->
<!--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',-->
<!--],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1(query) {-->
@ -134,13 +207,11 @@
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
@ -151,32 +222,33 @@
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<div style="width: 300px">-->
<!--<Select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>-->
@ -190,8 +262,8 @@
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--list: ['a', 'b', 'c']-->
<!--}-->
<!--list: ['a', 'b', 'c'],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod2(query) {-->
@ -199,44 +271,50 @@
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
<!--<Row>-->
<!--<Col span="12" style="padding-right:10px">-->
<!--<Col -->
<!--span="12" -->
<!--style="padding-right:10px">-->
<!--<Select-->
<!--v-model="model13"-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1">-->
<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--:loading="loading1"-->
<!--filterable-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options1" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--<Col span="12">-->
<!--<Select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--</Row>-->
@ -251,8 +329,59 @@
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--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']-->
<!--}-->
<!--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',-->
<!--],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1(query) {-->
@ -260,13 +389,11 @@
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
@ -277,20 +404,18 @@
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->
<!--},-->
<!--};-->
<!--</script>-->
<!--<template>-->
@ -356,7 +481,9 @@
<!--style="width:200px"-->
<!--&gt;-->
<!--<i-option value="beijing">New York</i-option>-->
<!--<i-option value="shanghai" disabled>London</i-option>-->
<!--<i-option -->
<!--value="shanghai" -->
<!--disabled>London</i-option>-->
<!--<i-option value="shenzhen">Sydney</i-option>-->
<!--</i-select>-->
<!--<br>-->
@ -396,15 +523,21 @@
<!--v-model="model9"-->
<!--style="width:200px"-->
<!--&gt;-->
<!--<i-option value="New York" label="New York">-->
<!--<i-option -->
<!--value="New York" -->
<!--label="New York">-->
<!--<span>New York</span>-->
<!--<span style="float:right;color:#ccc">America</span>-->
<!--</i-option>-->
<!--<i-option value="London" label="London">-->
<!--<i-option -->
<!--value="London" -->
<!--label="London">-->
<!--<span>London</span>-->
<!--<span style="float:right;color:#ccc">U.K.</span>-->
<!--</i-option>-->
<!--<i-option value="Sydney" label="Sydney">-->
<!--<i-option -->
<!--value="Sydney" -->
<!--label="Sydney">-->
<!--<span>Sydney</span>-->
<!--<span style="float:right;color:#ccc">Australian</span>-->
<!--</i-option>-->
@ -461,11 +594,11 @@
<!--&gt;-->
<!--<i-select-->
<!--v-model="model13"-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--filterable-->
<!--remote-->
<!--clearable-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--&gt;-->
<!--<i-option-->
<!--v-for="(option, index) in options1"-->
@ -477,12 +610,12 @@
<!--<i-col span="12">-->
<!--<i-select-->
<!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--clearable-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--clearable>-->
<!--<i-option-->
<!--v-for="(option, index) in options2"-->
<!--:value="option.value"-->
@ -633,13 +766,12 @@
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map(item => ({-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list-->
<!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--}, 1500);-->
<!--} else {-->
<!--this.options1 = [];-->
@ -652,13 +784,12 @@
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => ({-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list-->
<!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
@ -671,32 +802,77 @@
<template>
<div>
<Select v-model="model1" size="small" style="width:200px;" >
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model1"
size="small"
style="width:200px;" >
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select v-model="model10" size="small" multiple style="width:260px" >
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model10"
size="small"
multiple
style="width:260px" >
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
<Select v-model="model1" size="large" style="width:200px" clearable @on-clear="onClear">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model1"
size="large"
style="width:200px"
clearable
@on-clear="onClear">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select v-model="model10" size="large" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model10"
size="large"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model1"
style="width:200px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select v-model="model11" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model11"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<Select v-model="model10" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
@ -709,8 +885,14 @@
<br><br>
<br><br>
<br><br>
<Select v-model="model10" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
<br><br>
@ -722,8 +904,14 @@
<br><br>
<br><br>
<br><br>
<Select v-model="model10" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Select
v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select>
</div>
</template>
@ -734,38 +922,38 @@
cityList: [
{
value: 'New York',
label: 'New York'
label: 'New York',
},
{
value: '中国',
label: '中国'
label: '中国',
},
{
value: 'Sydney',
label: 'Sydney'
label: 'Sydney',
},
{
value: 'Ottawa',
label: 'Ottawa'
label: 'Ottawa',
},
{
value: 'Paris',
label: 'Paris'
label: 'Paris',
},
{
value: 'Canberra',
label: 'Canberra'
}
label: 'Canberra',
},
],
model1: '',
model10: [],
model11: []
}
model11: [],
};
},
methods: {
onClear() {
console.log('onClear');
}
}
}
},
},
};
</script>

5
src/components/select/select.vue
View file

@ -2,6 +2,7 @@
<div
:class="classes"
v-click-outside.capture="onClickOutside"
v-click-outside:mousedown.capture="onClickOutside"
>
<div
ref="reference"
@ -465,6 +466,10 @@
},
onClickOutside(event){
if (this.visible) {
if (event.type === 'mousedown') {
event.preventDefault();
return;
}
if (this.filterable) {
const input = this.$el.querySelector('input[type="text"]');