diff --git a/packages/artplayer/src/contextmenu/index.js b/packages/artplayer/src/contextmenu/index.js
index dd9e6c4d1..e3ad91e40 100644
--- a/packages/artplayer/src/contextmenu/index.js
+++ b/packages/artplayer/src/contextmenu/index.js
@@ -41,13 +41,14 @@ export default class Contextmenu {
     });
   }
 
-  add(item) {
+  add(item, callback) {
     if (!item.disable) {
       const { refs, events: { proxy } } = this.art;
       id++;
+      const name = item.name || `menu${id}`;
       const menu = typeof item === 'function' ? item(this.art) : item;
       const $menu = document.createElement('div');
-      $menu.setAttribute('class', `art-menu art-menu-${menu.name || id}`);
+      $menu.setAttribute('class', `art-menu art-menu-${name || id}`);
       append($menu, menu.html);
       setStyles($menu, menu.style || {});
       if (menu.click) {
@@ -57,7 +58,8 @@ export default class Contextmenu {
           this.art.emit('contextmenu:click', $menu);
         });
       }
-      this[`$${menu.name || id}`] = $menu;
+      callback && callback($menu);
+      this[name] = $menu;
       insertByIndex(refs.$contextmenu, $menu, menu.index || id);
     }
   }
diff --git a/packages/artplayer/src/controls/index.js b/packages/artplayer/src/controls/index.js
index dd51b90f0..d9a31b37e 100644
--- a/packages/artplayer/src/controls/index.js
+++ b/packages/artplayer/src/controls/index.js
@@ -112,15 +112,16 @@ export default class Controls {
     });
   }
 
-  add(control) {
+  add(control, callback) {
     const { option } = control;
     if (option && !option.disable) {
       id++;
-      const name = option.name || control.constructor.name.toLowerCase() || `control${id}`;
+      const name = option.name || `control${id}`;
       const $control = document.createElement('div');
       $control.setAttribute('class', `art-control art-control-${name}`);
       this.mount(option.position, $control, option.index || id);
       control.apply && control.apply(this.art, $control);
+      callback && callback($control);
       this[name] = control;
     }
   }
diff --git a/packages/artplayer/src/setting/index.js b/packages/artplayer/src/setting/index.js
index 34c79f0e9..5ff46eb1b 100644
--- a/packages/artplayer/src/setting/index.js
+++ b/packages/artplayer/src/setting/index.js
@@ -27,19 +27,19 @@ export default class Setting {
     }));
   }
 
-  add(setting) {
-    const { refs } = this.art;
+  add(setting, callback) {
+    const { refs, i18n } = this.art;
     const { option } = setting;
     if (option && !option.disable) {
       id++;
-      const name = option.name || setting.constructor.name.toLowerCase() || `setting${id}`;
+      const name = option.name || `setting${id}`;
       const title = option.title || name;
       const $setting = document.createElement('div');
       $setting.setAttribute('class', `art-setting art-setting-${name}`);
-      $setting.dataset.settingIndex = option.index || id;
-      append($setting, `<div class="art-setting-header">${this.art.i18n.get(title)}</div>`);
+      append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
       append($setting, '<div class="art-setting-body"></div>');
       setting.apply && setting.apply(this.art, $setting);
+      callback && callback($setting);
       this[name] = $setting;
       insertByIndex(refs.$settingBody, $setting, option.index || id);
     }