调整组件公共函数

packages/artplayer/src/contextmenu/index.js

@@ -97,8 +97,9 @@ export default class Contextmenu {
             if (callback) {
                 callback($menu);
             }
-            this[name] = $menu;
-            this.art.emit('contextmenu:add', $menu);
+            this.commonMethod(menu, $menu);
+            this[name] = menu;
+            this.art.emit('contextmenu:add', menu);
         }
     }
 
@@ -125,6 +126,26 @@ export default class Contextmenu {
         setStyle($contextmenu, 'top', `${menuTop}px`);
     }
 
+    commonMethod(menu, $menu) {
+        Object.defineProperty(menu, '$ref', {
+            get: () => $menu,
+        });
+
+        Object.defineProperty(menu, 'hide', {
+            value: () => {
+                setStyle($menu, 'display', 'none');
+                this.art.emit('menu:hide', $menu);
+            },
+        });
+
+        Object.defineProperty(menu, 'show', {
+            value: () => {
+                setStyle($menu, 'display', 'block');
+                this.art.emit('menu:show', $menu);
+            },
+        });
+    }
+
     hide() {
         const {
             refs: { $contextmenu },

packages/artplayer/src/controls/index.js

@@ -191,6 +191,10 @@ export default class Controls {
     }
 
     commonMethod(control, $control) {
+        Object.defineProperty(control, '$ref', {
+            get: () => $control,
+        });
+
         Object.defineProperty(control, 'hide', {
             value: () => {
                 setStyle($control, 'display', 'none');

packages/artplayer/src/layers.js

@@ -40,11 +40,32 @@ export default class Layers {
             if (callback) {
                 callback($layer);
             }
-            this[name] = $layer;
-            this.art.emit('layers:add', $layer);
+            this.commonMethod(layer, $layer);
+            this[name] = layer;
+            this.art.emit('layers:add', layer);
         }
     }
 
+    commonMethod(layer, $layer) {
+        Object.defineProperty(layer, '$ref', {
+            get: () => $layer,
+        });
+
+        Object.defineProperty(layer, 'hide', {
+            value: () => {
+                setStyle($layer, 'display', 'none');
+                this.art.emit('layer:hide', $layer);
+            },
+        });
+
+        Object.defineProperty(layer, 'show', {
+            value: () => {
+                setStyle($layer, 'display', 'block');
+                this.art.emit('layer:show', $layer);
+            },
+        });
+    }
+
     show() {
         const { $layers } = this.art.refs;
         setStyle($layers, 'display', 'block');

packages/artplayer/src/setting/index.js

@@ -64,11 +64,32 @@ export default class Setting {
             if (callback) {
                 callback($settingInner);
             }
-            this[name] = $setting;
-            this.art.emit('setting:add', $setting);
+            this.commonMethod(setting, $setting);
+            this[name] = setting;
+            this.art.emit('setting:add', setting);
         }
     }
 
+    commonMethod(setting, $setting) {
+        Object.defineProperty(setting, '$ref', {
+            get: () => $setting,
+        });
+
+        Object.defineProperty(setting, 'hide', {
+            value: () => {
+                setStyle($setting, 'display', 'none');
+                this.art.emit('setting:hide', $setting);
+            },
+        });
+
+        Object.defineProperty(setting, 'show', {
+            value: () => {
+                setStyle($setting, 'display', 'block');
+                this.art.emit('setting:show', $setting);
+            },
+        });
+    }
+
     show() {
         const {
             refs: { $setting },