SweetAlert笔记-在弹窗中添加输入框图片等

也就是实现这样的效果：

原理：

①用JS创建一个div；

②将输入框、列表、图片等放到这个div中（也就是innerHTML）；

③swal的方法可以拿到用户是点了退出，还是确定。

代码如下：

function EDBtnClicked(){

    let sendMsgText = $('#EDInput').val();
    let AESType = $('#EDAESType').val();
    let RSAType = $('#EDRSAType').val();

    let div = document.createElement('div');
    let createDiv = `
    <ul class="list-group">
        <li class="list-group-item text-left">数据: <b>${sendMsgText}</b></li>
        <li class="list-group-item text-left">AES类型: <b>${AESType}</b></li>
        <li class="list-group-item text-left">RSA类型: <b>${RSAType}</b></li>
        <li class="list-group-item text-left">
            <div class="row">
	            <div class="col" style="max-width: 140px">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAx9JREFUWEfNV89rE2EQfbPpbkKjZ21JtkEk2ehFqT+qeGgvxWKr+B/0oB5ERUEPPUgqXgSLB0VBPHgSDyqUqj2IYA+KqKmgWPODCs2m6kHx4qHNJvlGNpqQpPkSN67VHDOz8973Zubtt4R//KN28OdC/vVKMX+NCDvBrIKUFIvi2ehiYcZpPccE4t3o9HdoTwnYuhJM7DHMwjMnJBwTSOjaOAExCciUYVoH/iqBlK69Y2CzDISEJxBZXPpoxxMhXwiiOAjBaVl7pAokgt5BEO8mptdGNjdVBkzqWhxAr4xAUVG7FBR9iuAxBh8p5xEwJ0gcjmYKz6ufbUhghczMM0Y2P1A6VfMW3DdMa39K124yMNqA5De/sALBRSxVEatNe7MOfq9XSwPoro4wcC5qWuMLPZ1dy1ywVaiJ27kKaCSvdMQ9Iv9ZppACOhE2c1ekBFJBdTsTvWxQYNowrX32/3MhdYuHKcbMuwiKB0BKME9sylqT70NqnyKoRuaaWoRJI2MdlBKI90Jd86WkQKjmQcaEkbXOtJrwtO7bICA+yPIYGIua1gUpgVKfe9RLxHSqqsgsFay9kU/42oqAHW82qMS8I5LNv2pK4Oewqb0AjdjTa5jWnd8BLuekerxDzHy+flvKc9RyC5yANctNBNVRezCZMA+BW8ai9bY+37ETukVO2oJkBGuNFL67DSSrV1Gg2mCY+Wo0mz/mJon5gHdj0SOOgmmQoJwMm8uP7foVAvUez0IMtPN6lZFOBrVpEIZ+xWcN09pWQ6B+dRSi4XAm99AtFZJB9QmI+kv1qqy9okAyqF0E4XSJFeFFJGP1uQVeWutARz8RxUAUZuCGbes1CpSS7NcngOjC8oKb4M1q/X9ruFonb2nFq0WkaQvswXFzFRsdSkogpXuvl65UVSvjVBV7qBUhYoLpdjSbe+SIQFLXuPxAu6ZUcdcmh5BfSnX1MoGOu6EAge6FzdwDRwqUzUM2A/Z8KIrSJwCfBxSXAbRqW9s+kNS9NwA+VO/trQDr420TqLme/8Ggtk0grXuHBdj+TPMJ4G7Z21dNAadAsvwfJ6tAMMuA+kIAAAAASUVORK5CYII=" onload="changeCaptchaImg(this)" onclick="changeCaptchaImg(this)" id="captchaImg" />
                </div>
	            <div class="col pull-left ">
	                <input type="text" autocomplete="off" placeholder="验证码" id="captcha" class="form-control" name="captcha"/>
	            </div>
            </div>

        </li>
    </ul>
    `;

    div.innerHTML = createDiv;

    swal({
        content: div,
        buttons: ["退出", "确定"]
        }).then((value) => {

        if (!value) {

            return;
        }
        //......
        //这里写你业务
        }).then((res) => {
            console.log(res.data);
        })

    })
}