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

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

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