1.利用html-loader讓hilo支持html（需求復(fù)雜，渲染內(nèi)容多，用hilo實(shí)現(xiàn)復(fù)雜的可以用這種方法）
2.hilo方式（全程使用坐標(biāo)，渲染內(nèi)容簡(jiǎn)單比較推薦，畢竟是hilo框架自己的方法，速度上應(yīng)該是更快的）

stage.js

import Hilo from 'Hilo';

import getDialog from './dialog'  //封裝的公共彈層
import openHtmlCon from './dialog/openHtml/index'  //彈層（內(nèi)容html文件）
import openHiloCon from './dialog/openHiloCon'   //彈層（內(nèi)容為hilo寫(xiě)的）


export default class Stage extends Hilo.Stage {  
    constructor(props) {
        super(props);
        this.init(); 

        // enableDOMEvent 允許觸發(fā)DOM事件， 即打開(kāi)事件機(jī)制
        this.enableDOMEvent([
            Hilo.event.POINTER_START,
            Hilo.event.POINTER_MOVE,
            Hilo.event.POINTER_END,
            'click'
        ])
    }

    init() {
        new Hilo.Bitmap({    
            image: 'images/html1.png',  
            y: 100,   
            x: 100,  
            scaleX: 1,   
            scaleY: 1   
        }).addTo(this)
        .on(Hilo.event.POINTER_START, ()=>{  //點(diǎn)擊彈出彈層
            openHtmlCon()
        })

        new Hilo.Bitmap({   
            image: 'images/hilo1.png',  
            y: 300,  
            x: 100,  
            scaleX: 1,   
            scaleY: 1   
        }).addTo(this)
        .on('click', ()=>{              //點(diǎn)擊彈出彈層
            getDialog(openHiloCon).addTo(this);   
        })

        var ticker = new Hilo.Ticker(60);
        ticker.addTick(this);
        ticker.start();
    }
}

openHtml

index.js文件

import tpl from "./tpl.html"

module.exports = function () {

    return new dialog(tpl, {
        STYLE_NO_CLOSEBTN: true,
        theme: 'rule_dialog_content',
        fixed: true,
    }).promise.then(() => {
    })

}

tpl.html (內(nèi)容自定義，html該怎么寫(xiě)就怎么寫(xiě))

<div style="position: absolute;top:0;left:0;z-index:900;width:100%;height:100%;color:#fff;">
    <div class="shuoming" style="margin: 100px 30px;">
        <div style="margin-top: 20px;">
            <span style="padding:0;margin: 0;background: #fff;padding: 4px 8px;font-size: 14px;color:#000;display: inline-block;margin-bottom:8px;">活動(dòng)規(guī)則</span>
            <p style="font-size: 14px;">游戲規(guī)則代替文字游戲規(guī)則代替文字游戲規(guī)則代替游戲規(guī)則代替文字游戲規(guī)則代替文字游戲規(guī)則代替文字游戲規(guī)則代替文字文字游戲規(guī)則代替文字</p>
        </div>
        <div style="margin-top: 20px;">
            <span style="padding:0;margin: 0;background: #fff;padding: 4px 8px;font-size: 14px;color:#000;display: inline-block;margin-bottom:8px;">獎(jiǎng)項(xiàng)設(shè)置</span>
            <p style="font-size: 14px;">一等獎(jiǎng)：xxx</p>
            <p style="font-size: 14px;">二等獎(jiǎng)：xxx</p>
            <p style="font-size: 14px;">三等獎(jiǎng)：xxx</p>
            <p>.................</p>
            <img src="images/html1.png" alt="一張圖片">
        </div>
    </div>
    <div class="dialog-close-btn" dialog-close-value="cancel" style="position:absolute;top:50px;right:15px;"></div>
</div>

openHiloCon

index.js

import Hilo from 'Hilo';

export default class openHiloCon extends Hilo.Container {

    constructor(props) {
        super(props);
    
        // hilo遮罩層里面的具體內(nèi)容，就是一張圖片
        new Hilo.Bitmap({
            image: 'images/hilo1.png',   
            width: 200,
            height: 80,
            x: 100,
            y: 200
        }).addTo(this);


        // 利用文字寫(xiě)關(guān)閉按鈕
        new Hilo.Text({
            font: "32px 微軟雅黑",
            text: 'X',
            x: 350,
            y: 0,
            width: 100,
            height: 100,
            color: '#fff',
        }).addTo(this).on(Hilo.event.POINTER_START, () => {
            this.parent.fire('closeDialog')   //關(guān)閉彈層
        });

    }
};