原生html封装组件,手把手教你用原生Javascript封装一个Dialog组件

下来玩玩

分析

对外暴露的方法

show(options) 显示dialog

options 参数

title 标题，默认为“”，不显示标题

content 主内容，默认为"兄弟，你好像忘记传content的值了"

skin 皮肤，默认为""，其实就是给dialog添加一个你的类名，方便重置样式

btns 按钮组，默认为[‘确认’]，可选[‘xx’，‘xx’]，只取前两个作为有效值，第一个为confirm，第二个为cancel

confirm 点击confirm按钮的回调，如确认

cancel 点击cancel按钮的回调，如取消

shadeClose 是否开启点击遮罩关闭，默认true

animation 过渡动画，默认为1，可选0和2，注意这里的动画是指内容区的动画，最外层是固定为0

hide() 关闭dialog

过渡动画

用css3的animation，具体看下面的css

先写好布局、样式(后面会移植到Javascript生成DOM)

html

消息提示

兄弟，你好像忘记传content的值了

取消

确认

css

body,

html {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.dialog-wrapper {

position: fixed;

display: flex;

justify-content: center;

align-items: center;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

background-color: rgba(49, 49, 49, 0.5);

color: #313131;

font-size: 10px;

-webkit-tap-highlight-color: transparent;

}

.dialog-wrapper.fadeIn {

animation: fadeIn .2s ease;

}

.dialog-wrapper.fadeOut {

animation: fadeOut .2s ease forwards;

}

.dialog-wrapper .dialog {

position: relative;

width: 85vw;

max-width: 30em;

border-radius: .4em;

background-color: #