ColorPicker: hide the dropdown when clicking on another colorpicker. (#2929)

packages/color-picker/src/components/alpha-slider.vue

@@ -30,9 +30,7 @@
       color: {
         required: true
       },
-      vertical: {
+      vertical: Boolean
-        type: Boolean
-      }
     },
 
     watch: {

packages/color-picker/src/components/hue-slider.vue

@@ -25,9 +25,7 @@
         required: true
       },
 
-      vertical: {
+      vertical: Boolean
-        type: Boolean
-      }
     },
 
     data() {

packages/color-picker/src/components/picker-dropdown.vue

@@ -22,7 +22,6 @@
   import HueSlider from './hue-slider';
   import AlphaSlider from './alpha-slider';
   import Popper from 'element-ui/src/utils/vue-popper';
-  import Clickoutside from 'element-ui/src/utils/clickoutside';
   import Locale from 'element-ui/src/mixins/locale';
 
   export default {
@@ -36,15 +35,11 @@
       AlphaSlider
     },
 
-    directives: { Clickoutside },
-
     props: {
       color: {
         required: true
       },
-      showAlpha: {
+      showAlpha: Boolean
-        type: Boolean
-      }
     },
 
     methods: {

packages/color-picker/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="el-color-picker" v-clickoutside="hide">
-    <div class="el-color-picker__trigger" @click.stop="showPicker = !showPicker">
+    <div class="el-color-picker__trigger" @click="showPicker = !showPicker">
       <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
         <span class="el-color-picker__color-inner"
           :style="{