diff --git a/examples/routers/color-picker.vue b/examples/routers/color-picker.vue
index 0b1199b0..589e55e6 100644
--- a/examples/routers/color-picker.vue
+++ b/examples/routers/color-picker.vue
@@ -12,7 +12,8 @@
         <Button @click="setColor">set color</Button>
 
         <br><br><br><br>
-        <ColorPicker v-model="color7" :hue="false"></ColorPicker>
+        {{openState}}
+        <ColorPicker v-model="color7" :hue="false" @on-open-change="onOpenChange"></ColorPicker>
     </div>
 </template>
 <script>
@@ -22,7 +23,8 @@
             return {
                 color: 'rgba(12,34,255,.85)',
                 color2: '',
-                color7: '#19be6b'
+                color7: '#19be6b',
+                openState: false,
             };
         },
         computed: {},
@@ -35,7 +37,10 @@
             },
             c2 (d) {
                 console.log(d);
+            },
+            onOpenChange(state){
+                this.openState = state;
             }
         }
     };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index 9eb7bfbf..34269008 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -305,6 +305,7 @@
                 } else {
                     this.$refs.drop.destroy();
                 }
+                this.$emit('on-open-change', Boolean(val));
             }
         },
         methods: {