From 4a9974f631928a58415fb1413915657c65a49888 Mon Sep 17 00:00:00 2001
From: Graham Fairweather <xotic750@gmail.com>
Date: Tue, 22 May 2018 07:33:43 +0200
Subject: [PATCH] Normalise v-ckick-outside-x for Select

---
 examples/routers/select.vue      | 1166 +++++++++++++++++-------------
 src/components/select/select.vue |    5 +
 2 files changed, 682 insertions(+), 489 deletions(-)

diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index cc34197c..b3e7185b 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -1,296 +1,421 @@
 <!--<template>-->
-<!--<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>-->
-<!--<Select v-model="model11" style="width:260px">-->
-<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
-<!--</Select>-->
-<!--</div>-->
+    <!--<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>-->
+        <!--<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>-->
 <!--<script>-->
 <!--export default {-->
-<!--data () {-->
-<!--return {-->
-<!--cityList: [],-->
-<!--model10: '',-->
-<!--model11: '',-->
-<!--model12: ''-->
-<!--}-->
-<!--},-->
-<!--mounted () {-->
-<!--setTimeout(() => {-->
-<!--this.cityList = [-->
-<!--{-->
-<!--value: 'beijing',-->
-<!--label: '北京市'-->
-<!--},-->
-<!--{-->
-<!--value: 'shanghai',-->
-<!--label: '上海市'-->
-<!--},-->
-<!--{-->
-<!--value: 'shenzhen',-->
-<!--label: '深圳市'-->
-<!--},-->
-<!--{-->
-<!--value: 'hangzhou',-->
-<!--label: '杭州市'-->
-<!--},-->
-<!--{-->
-<!--value: 'nanjing',-->
-<!--label: '南京市'-->
-<!--},-->
-<!--{-->
-<!--value: 'chongqing',-->
-<!--label: '重庆市'-->
-<!--}-->
-<!--];-->
-<!--}, 1000);-->
-<!--}-->
-<!--}-->
+    <!--data() {-->
+        <!--return {-->
+            <!--cityList: [],-->
+            <!--model10: '',-->
+            <!--model11: '',-->
+            <!--model12: '',-->
+        <!--};-->
+    <!--},-->
+    <!--mounted() {-->
+        <!--setTimeout(() => {-->
+            <!--this.cityList = [-->
+                <!--{-->
+                    <!--value: 'beijing',-->
+                    <!--label: '北京市',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'shanghai',-->
+                    <!--label: '上海市',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'shenzhen',-->
+                    <!--label: '深圳市',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'hangzhou',-->
+                    <!--label: '杭州市',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'nanjing',-->
+                    <!--label: '南京市',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'chongqing',-->
+                    <!--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>-->
-<!--</Select>-->
-<!--<Button @click="setList">set list</Button>-->
-<!--</div>-->
+    <!--<div>-->
+        <!--<Select v-model="value">-->
+            <!--<Option -->
+                <!--v-for="item in list" -->
+                <!--:value="item.value" -->
+                <!--:label="item.label" -->
+                <!--:key="item.value"></Option>-->
+        <!--</Select>-->
+        <!--<Button @click="setList">set list</Button>-->
+    <!--</div>-->
 <!--</template>-->
 <!--<script>-->
 <!--export default {-->
-<!--data () {-->
-<!--return {-->
-<!--value: '',-->
-<!--list: []-->
-<!--}-->
-<!--},-->
-<!--methods: {-->
-<!--setList () {-->
-<!--let list = [];-->
-<!--for (let i = 0; i < 400; i++) {-->
-<!--list.push({-->
-<!--value: 'value' + i,-->
-<!--label: 'label' + i-->
-<!--});-->
-<!--}-->
-<!--this.list = list;-->
-<!--}-->
-<!--}-->
-<!--}-->
+    <!--data() {-->
+        <!--return {-->
+            <!--value: '',-->
+            <!--list: [],-->
+        <!--};-->
+    <!--},-->
+    <!--methods: {-->
+        <!--setList() {-->
+            <!--const list = [];-->
+            <!--for (let i = 0; i < 400; i++) {-->
+                <!--list.push({-->
+                    <!--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">-->
-<!--<Select-->
-<!--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>-->
-<!--</Select>-->
+    <!--<div style="width: 400px;margin: 50px;">-->
+        <!--<div>data: {{model13}}</div>-->
+        <!--<Row>-->
+            <!--<Col -->
+                <!--span="12" -->
+                <!--style="padding-right:10px">-->
+            <!--<Select-->
+                <!--v-model="model13"-->
+                <!--:remote-method="remoteMethod1"-->
+                <!--:loading="loading1"-->
+                <!--size="small"-->
+                <!--placeholder="提示提示"-->
+                <!--filterable-->
+                <!--remote-->
+                <!--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"-->
-<!--multiple-->
-<!--filterable-->
-<!--remote-->
-<!--:remote-method="remoteMethod2"-->
-<!--:loading="loading2">-->
-<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
-<!--</Select>-->
+            <!--<Col span="12">-->
+            <!--<Select-->
+                <!--v-model="model14"-->
+                <!--:remote-method="remoteMethod2"-->
+                <!--:loading="loading2"-->
+                <!--multiple-->
+                <!--filterable-->
+                <!--remote>-->
+                <!--<Option -->
+                    <!--v-for="(option, index) in options2" -->
+                    <!--:value="option.value" -->
+                    <!--:key="index">{{option.label}}</Option>-->
+            <!--</Select>-->
 <!--</Col>-->
-<!--</Row>-->
-<!--</div>-->
+        <!--</Row>-->
+    <!--</div>-->
 <!--</template>-->
 <!--<script>-->
 <!--export default {-->
-<!--data () {-->
-<!--return {-->
-<!--model13: '',-->
-<!--loading1: false,-->
-<!--options1: [],-->
-<!--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']-->
-<!--}-->
-<!--},-->
-<!--methods: {-->
-<!--remoteMethod1 (query) {-->
-<!--if (query !== '') {-->
-<!--this.loading1 = true;-->
-<!--setTimeout(() => {-->
-<!--this.loading1 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
-<!--value: item,-->
-<!--label: item-->
+    <!--data() {-->
+        <!--return {-->
+            <!--model13: '',-->
+            <!--loading1: false,-->
+            <!--options1: [],-->
+            <!--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',-->
+            <!--],-->
+        <!--};-->
+    <!--},-->
+    <!--methods: {-->
+        <!--remoteMethod1(query) {-->
+            <!--if (query !== '') {-->
+                <!--this.loading1 = true;-->
+                <!--setTimeout(() => {-->
+                    <!--this.loading1 = false;-->
+                    <!--const list = this.list.map((item) => ({-->
+                        <!--value: item,-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                <!--}, 200);-->
+            <!--} else {-->
+                <!--this.options1 = [];-->
+            <!--}-->
+        <!--},-->
+        <!--remoteMethod2(query) {-->
+            <!--if (query !== '') {-->
+                <!--this.loading2 = true;-->
+                <!--setTimeout(() => {-->
+                    <!--this.loading2 = false;-->
+                    <!--const list = this.list.map((item) => ({-->
+                        <!--value: item,-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                <!--}, 200);-->
+            <!--} else {-->
+                <!--this.options2 = [];-->
+            <!--}-->
+        <!--},-->
+    <!--},-->
 <!--};-->
-<!--});-->
-<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
-<!--}, 200);-->
-<!--} else {-->
-<!--this.options1 = [];-->
-<!--}-->
-<!--},-->
-<!--remoteMethod2 (query) {-->
-<!--if (query !== '') {-->
-<!--this.loading2 = true;-->
-<!--setTimeout(() => {-->
-<!--this.loading2 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
-<!--value: item,-->
-<!--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"-->
-<!--multiple-->
-<!--filterable-->
-<!--remote-->
-<!--:remote-method="remoteMethod2"-->
-<!--:loading="loading2">-->
-<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
-<!--</Select>-->
-<!--</div>-->
+    <!--<div style="width: 300px">-->
+        <!--<Select-->
+            <!--v-model="model14"-->
+            <!--:remote-method="remoteMethod2"-->
+            <!--:loading="loading2"-->
+            <!--multiple-->
+            <!--filterable-->
+            <!--remote>-->
+            <!--<Option -->
+                <!--v-for="(option, index) in options2" -->
+                <!--:value="option.value" -->
+                <!--:key="index">{{option.label}}</Option>-->
+        <!--</Select>-->
+    <!--</div>-->
 <!--</template>-->
 <!--<script>-->
 <!--export default {-->
-<!--data () {-->
-<!--return {-->
-<!--model13: '',-->
-<!--loading1: false,-->
-<!--options1: [],-->
-<!--model14: [],-->
-<!--loading2: false,-->
-<!--options2: [],-->
-<!--list: ['a', 'b', 'c']-->
-<!--}-->
-<!--},-->
-<!--methods: {-->
-<!--remoteMethod2 (query) {-->
-<!--if (query !== '') {-->
-<!--this.loading2 = true;-->
-<!--setTimeout(() => {-->
-<!--this.loading2 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
-<!--value: item,-->
-<!--label: item-->
+    <!--data() {-->
+        <!--return {-->
+            <!--model13: '',-->
+            <!--loading1: false,-->
+            <!--options1: [],-->
+            <!--model14: [],-->
+            <!--loading2: false,-->
+            <!--options2: [],-->
+            <!--list: ['a', 'b', 'c'],-->
+        <!--};-->
+    <!--},-->
+    <!--methods: {-->
+        <!--remoteMethod2(query) {-->
+            <!--if (query !== '') {-->
+                <!--this.loading2 = true;-->
+                <!--setTimeout(() => {-->
+                    <!--this.loading2 = false;-->
+                    <!--const list = this.list.map((item) => ({-->
+                        <!--value: item,-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                <!--}, 200);-->
+            <!--} else {-->
+                <!--this.options2 = [];-->
+            <!--}-->
+        <!--},-->
+    <!--},-->
 <!--};-->
-<!--});-->
-<!--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">-->
-<!--<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>-->
-<!--</Select>-->
+    <!--<Row>-->
+        <!--<Col -->
+            <!--span="12" -->
+            <!--style="padding-right:10px">-->
+        <!--<Select-->
+            <!--v-model="model13"-->
+            <!--:remote-method="remoteMethod1"-->
+            <!--: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"-->
-<!--multiple-->
-<!--filterable-->
-<!--remote-->
-<!--:remote-method="remoteMethod2"-->
-<!--:loading="loading2">-->
-<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
-<!--</Select>-->
+        <!--<Col span="12">-->
+        <!--<Select-->
+            <!--v-model="model14"-->
+            <!--:remote-method="remoteMethod2"-->
+            <!--:loading="loading2"-->
+            <!--multiple-->
+            <!--filterable-->
+            <!--remote>-->
+            <!--<Option -->
+                <!--v-for="(option, index) in options2" -->
+                <!--:value="option.value" -->
+                <!--:key="index">{{option.label}}</Option>-->
+        <!--</Select>-->
 <!--</Col>-->
-<!--</Row>-->
+    <!--</Row>-->
 <!--</template>-->
 <!--<script>-->
 <!--export default {-->
-<!--data () {-->
-<!--return {-->
-<!--model13: '',-->
-<!--loading1: false,-->
-<!--options1: [],-->
-<!--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']-->
-<!--}-->
-<!--},-->
-<!--methods: {-->
-<!--remoteMethod1 (query) {-->
-<!--if (query !== '') {-->
-<!--this.loading1 = true;-->
-<!--setTimeout(() => {-->
-<!--this.loading1 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
-<!--value: item,-->
-<!--label: item-->
+    <!--data() {-->
+        <!--return {-->
+            <!--model13: '',-->
+            <!--loading1: false,-->
+            <!--options1: [],-->
+            <!--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',-->
+            <!--],-->
+        <!--};-->
+    <!--},-->
+    <!--methods: {-->
+        <!--remoteMethod1(query) {-->
+            <!--if (query !== '') {-->
+                <!--this.loading1 = true;-->
+                <!--setTimeout(() => {-->
+                    <!--this.loading1 = false;-->
+                    <!--const list = this.list.map((item) => ({-->
+                        <!--value: item,-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                <!--}, 200);-->
+            <!--} else {-->
+                <!--this.options1 = [];-->
+            <!--}-->
+        <!--},-->
+        <!--remoteMethod2(query) {-->
+            <!--if (query !== '') {-->
+                <!--this.loading2 = true;-->
+                <!--setTimeout(() => {-->
+                    <!--this.loading2 = false;-->
+                    <!--const list = this.list.map((item) => ({-->
+                        <!--value: item,-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                <!--}, 200);-->
+            <!--} else {-->
+                <!--this.options2 = [];-->
+            <!--}-->
+        <!--},-->
+    <!--},-->
 <!--};-->
-<!--});-->
-<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
-<!--}, 200);-->
-<!--} else {-->
-<!--this.options1 = [];-->
-<!--}-->
-<!--},-->
-<!--remoteMethod2 (query) {-->
-<!--if (query !== '') {-->
-<!--this.loading2 = true;-->
-<!--setTimeout(() => {-->
-<!--this.loading2 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
-<!--value: item,-->
-<!--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"-->
@@ -495,208 +628,251 @@
 <!--</template>-->
 
 <!--<script>-->
-    <!--export default {-->
-        <!--data(){-->
-            <!--return {-->
-                <!--cityList: [-->
-                    <!--{-->
-                        <!--value: 'New York',-->
-                        <!--label: 'New York',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'London',-->
-                        <!--label: 'London',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'Sydney',-->
-                        <!--label: 'Sydney',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'Ottawa',-->
-                        <!--label: 'Ottawa',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'Paris',-->
-                        <!--label: 'Paris',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'Canberra',-->
-                        <!--label: 'Canberra',-->
-                    <!--},-->
-                <!--],-->
-                <!--cityList1: [-->
-                    <!--{-->
-                        <!--value: 'New York',-->
-                        <!--label: 'New York',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'London',-->
-                        <!--label: 'London',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'Sydney',-->
-                        <!--label: 'Sydney',-->
-                    <!--},-->
-                <!--],-->
-                <!--cityList2: [-->
-                    <!--{-->
-                        <!--value: 'Ottawa',-->
-                        <!--label: 'Ottawa',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'Paris',-->
-                        <!--label: 'Paris',-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'Canberra',-->
-                        <!--label: 'Canberra',-->
-                    <!--},-->
-                <!--],-->
-                <!--model1: '',-->
-                <!--model2: '',-->
-                <!--model3: '',-->
-                <!--model4: '',-->
-                <!--model5: '',-->
-                <!--model6: '',-->
-                <!--model7: '',-->
-                <!--model8: '',-->
-                <!--model9: '',-->
-                <!--model10: [],-->
-                <!--model11: '',-->
-                <!--model12: [],-->
-                <!--model13: '',-->
-                <!--loading1: false,-->
-                <!--options1: [],-->
-                <!--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',-->
-                <!--],-->
-            <!--};-->
+<!--export default {-->
+    <!--data() {-->
+        <!--return {-->
+            <!--cityList: [-->
+                <!--{-->
+                    <!--value: 'New York',-->
+                    <!--label: 'New York',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'London',-->
+                    <!--label: 'London',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'Sydney',-->
+                    <!--label: 'Sydney',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'Ottawa',-->
+                    <!--label: 'Ottawa',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'Paris',-->
+                    <!--label: 'Paris',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'Canberra',-->
+                    <!--label: 'Canberra',-->
+                <!--},-->
+            <!--],-->
+            <!--cityList1: [-->
+                <!--{-->
+                    <!--value: 'New York',-->
+                    <!--label: 'New York',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'London',-->
+                    <!--label: 'London',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'Sydney',-->
+                    <!--label: 'Sydney',-->
+                <!--},-->
+            <!--],-->
+            <!--cityList2: [-->
+                <!--{-->
+                    <!--value: 'Ottawa',-->
+                    <!--label: 'Ottawa',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'Paris',-->
+                    <!--label: 'Paris',-->
+                <!--},-->
+                <!--{-->
+                    <!--value: 'Canberra',-->
+                    <!--label: 'Canberra',-->
+                <!--},-->
+            <!--],-->
+            <!--model1: '',-->
+            <!--model2: '',-->
+            <!--model3: '',-->
+            <!--model4: '',-->
+            <!--model5: '',-->
+            <!--model6: '',-->
+            <!--model7: '',-->
+            <!--model8: '',-->
+            <!--model9: '',-->
+            <!--model10: [],-->
+            <!--model11: '',-->
+            <!--model12: [],-->
+            <!--model13: '',-->
+            <!--loading1: false,-->
+            <!--options1: [],-->
+            <!--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',-->
+            <!--],-->
+        <!--};-->
+    <!--},-->
+
+    <!--methods: {-->
+        <!--remoteMethod1(query) {-->
+            <!--if (query !== '') {-->
+                <!--this.loading1 = true;-->
+
+                <!--setTimeout(() => {-->
+                    <!--this.loading1 = false;-->
+
+                    <!--const list = this.list.map((item) => ({-->
+                        <!--value: item,-->
+                        <!--label: item,-->
+                    <!--}));-->
+
+                    <!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
+                <!--}, 1500);-->
+            <!--} else {-->
+                <!--this.options1 = [];-->
+            <!--}-->
         <!--},-->
+        <!--remoteMethod2(query) {-->
+            <!--if (query !== '') {-->
+                <!--this.loading2 = true;-->
 
-        <!--methods: {-->
-            <!--remoteMethod1(query){-->
-                <!--if (query !== '') {-->
-                    <!--this.loading1 = true;-->
+                <!--setTimeout(() => {-->
+                    <!--this.loading2 = false;-->
 
-                    <!--setTimeout(() => {-->
-                        <!--this.loading1 = false;-->
+                    <!--const list = this.list.map((item) => ({-->
+                        <!--value: item,-->
+                        <!--label: item,-->
+                    <!--}));-->
 
-                        <!--const list = this.list.map(item => ({-->
-                            <!--value: item,-->
-                            <!--label: item,-->
-                        <!--}));-->
-
-                        <!--this.options1 = list-->
-                            <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
-                    <!--}, 1500);-->
-                <!--} else {-->
-                    <!--this.options1 = [];-->
-                <!--}-->
-            <!--},-->
-            <!--remoteMethod2(query){-->
-                <!--if (query !== '') {-->
-                    <!--this.loading2 = true;-->
-
-                    <!--setTimeout(() => {-->
-                        <!--this.loading2 = false;-->
-
-                        <!--const list = this.list.map(item => ({-->
-                            <!--value: item,-->
-                            <!--label: item,-->
-                        <!--}));-->
-
-                        <!--this.options2 = list-->
-                            <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
-                    <!--}, 200);-->
-                <!--} else {-->
-                    <!--this.options2 = [];-->
-                <!--}-->
-            <!--},-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
+                <!--}, 200);-->
+            <!--} else {-->
+                <!--this.options2 = [];-->
+            <!--}-->
         <!--},-->
-    <!--};-->
+    <!--},-->
+<!--};-->
 <!--</script>-->
 
 
 <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,50 +904,56 @@
         <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>
 <script>
-    export default {
-        data () {
-            return {
-                cityList: [
-                    {
-                        value: 'New York',
-                        label: 'New York'
-                    },
-                    {
-                        value: '中国',
-                        label: '中国'
-                    },
-                    {
-                        value: 'Sydney',
-                        label: 'Sydney'
-                    },
-                    {
-                        value: 'Ottawa',
-                        label: 'Ottawa'
-                    },
-                    {
-                        value: 'Paris',
-                        label: 'Paris'
-                    },
-                    {
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                model1: '',
-                model10: [],
-                model11: []
-            }
+export default {
+    data() {
+        return {
+            cityList: [
+                {
+                    value: 'New York',
+                    label: 'New York',
+                },
+                {
+                    value: '中国',
+                    label: '中国',
+                },
+                {
+                    value: 'Sydney',
+                    label: 'Sydney',
+                },
+                {
+                    value: 'Ottawa',
+                    label: 'Ottawa',
+                },
+                {
+                    value: 'Paris',
+                    label: 'Paris',
+                },
+                {
+                    value: 'Canberra',
+                    label: 'Canberra',
+                },
+            ],
+            model1: '',
+            model10: [],
+            model11: [],
+        };
+    },
+    methods: {
+        onClear() {
+            console.log('onClear');
         },
-        methods: {
-            onClear(){
-                console.log('onClear');
-            }
-        }
-    }
+    },
+};
 </script>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 6b73f5fd..89d8e658 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -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"]');