1

我正在制作一个自定义插件，但我发现如果我返回一个 html 结构来生成自定义图标，它不会解释 html。

在此处输入图像描述

class Cloud extends Plugin {
        
        constructor (uppy, opts) 
        {
            super(uppy, opts)

            this.id = opts.id || 'Cloud' 
            this.title = opts.title || 'Cloud'
            this.type = 'acquirer'
            //this.prepareUpload = this.prepareUpload.bind(this)
            this.icon = () => {
                //aria-controls="uppy-DashboardContent-panel--Cloud"
                console.log('[ pluginCloud ] icon',this);

                let html = `<div>Hola</div>`; 
             
                return html;
            }

            this.defaultLocale = {
                strings: {}
            }

            console.log('[ pluginCloud ] constructor', this);

            this.i18nInit();
            this.install = this.install.bind(this)
            //this.setPluginState = this.setPluginState.bind(this)
            this.render = this.render.bind(this)
        
        }
      
        prepareUpload (fileIDs) {
            console.log('[ pluginCloud ] prepareUpload'); 
            return Promise.resolve()
        }
      
        install () {
            console.log('[ pluginCloud ] install');
            //this.uppy.addPreProcessor(this.prepareUpload)
            const target = this.opts.target
            if (target) {
            this.mount(target, this)
            }
        }
      
        uninstall () {
            console.log('[ pluginCloud ] uninstall');
            //this.uppy.removePreProcessor(this.prepareUpload)
            this.unmount()
        }

        i18nInit () {
            console.log('[ pluginCloud ] Translate');
        }
    }

    let uppy = Uppy.Core();

    // Setting dashboard
    let dashboard = 
    {
        id:'video',
        inline: false,
        target: 'body',
        trigger: '#open_modal_video',
        locale: {strings:UploadFile.LANG_ES},
        metaFields : [ 
            { id :  'name' , name :  'Nombre' , placeholder :  'file name'  }, 
            { id :  'description' , name :  'Descripción' , placeholder :  ''  } 
        ],
        
    }
    

    // Dashboard
    uppy.use(Uppy.Dashboard, dashboard);

    //Custom plugin
    uppy.use(Cloud,{
        target: Uppy.Dashboard,
        companionUrl: 'http://cloud.localhost'
    });

我还注意到，每次单击该按钮时，它都会再次呈现。

我曾尝试直接用 JS 添加 html，但它并没有正确解决问题

4

1 回答 1

0

我已经能够通过添加额外的 CSS 来显示图标来解决它

在此处输入图像描述

[aria-controls="uppy-DashboardContent-panel--Cloud"]::before
{
  content: '';
  background: #00BCD4;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  overflow: hidden;
}

我需要在“之后”字段中添加一个图像来显示它。

于 2020-11-19T16:12:42.123 回答