调整组件嵌入规则

packages/artplayer/src/setting/index.js

@@ -1,5 +1,5 @@
 import { setStyle, append, insertByIndex } from '../utils';
-import Flip from './flip';
+import flip from './flip';
 
 let id = 0;
 export default class Setting {
@@ -24,35 +24,47 @@ export default class Setting {
             this.hide();
         });
 
-        this.add(
-            new Flip({
-                name: 'flip',
-                title: 'Flip',
-                disable: false,
-                index: 10,
-            }),
-        );
+        this.add(flip({
+            disable: false,
+            title: 'Flip',
+            name: 'flip',
+            index: 10,
+        }));
     }
 
-    add(setting, callback) {
-        const { option } = setting;
-        if (option && !option.disable) {
+    add(item, callback) {
+        const setting = typeof item === 'function' ? item(this.art) : item;
+        if (!setting.disable) {
+            const {
+                i18n,
+                refs: { $settingBody },
+                events: { proxy },
+            } = this.art;
             id += 1;
-            const { refs, i18n } = this.art;
-            const name = option.name || `setting${id}`;
-            const title = option.title || name;
+            const name = setting.name || `setting${id}`;
+            const title = setting.title || name;
             const $setting = document.createElement('div');
-            $setting.setAttribute('class', `art-setting art-setting-${name}`);
+            $setting.classList.value = `art-setting art-setting-${name}`;
             append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
-            append($setting, '<div class="art-setting-body"></div>');
-            if (setting.apply) {
-                setting.apply(this.art, $setting);
+            const $settingInner = append($setting, '<div class="art-setting-body"></div>');
+            if (setting.html) {
+                append($settingInner , setting.html);
+            }
+            if ($settingInner.click) {
+                proxy($settingInner, 'click', event => {
+                    event.preventDefault();
+                    setting.click.call(this, event);
+                    this.art.emit('setting:click', $setting);
+                });
+            }
+            insertByIndex($settingBody, $setting, setting.index || id);
+            if (setting.mounted) {
+                setting.mounted($settingInner);
             }
-            insertByIndex(refs.$settingBody, $setting, option.index || id);
-            this[name] = $setting;
             if (callback) {
-                callback($setting);
+                callback($settingInner);
             }
+            this[name] = $setting;
             this.art.emit('setting:add', $setting);
         }
     }