bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
历届学生/fontendsix/项目练习/上课项目/dialog/css/clear.css Normal file
View File

@@ -0,0 +1,11 @@
body,
html,
h2,
h3,
h4,
h5,
h6,
h6,
p {
margin: 0;
}

55
历届学生/fontendsix/项目练习/上课项目/dialog/css/dialog.css Normal file
View File

@@ -0,0 +1,55 @@
.bmy_dialog {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
}
.bmy_dialog_content {
background: #fff;
font-size: 16px;
border-radius: 16px;
margin-top: -5%;
}
.bmy_dialog_title {
padding-top: 26px;
font-weight: 500;
line-height: 24px;
text-align: center;
}
.bmy_dialog_message {
color: #646566;
padding: 26px 24px;
padding-top: 8px;
text-align: center;
word-wrap: break-word;
max-height: 60vh;
overflow-y: scroll;
}
.bmy_dialog_button{
display: flex;
align-items: center;
height: 48px;
}
.bmy_dialog_cancel {
border-bottom-left-radius: 16px;
}
.bmy_dialog_confirm {
border-bottom-right-radius: 16px;
}
.button {
flex: 1;
height: 100%;
text-align: center;
line-height: 48px;
user-select: none;
}
.button:active {
background: #e6e6e6;
}

29
历届学生/fontendsix/项目练习/上课项目/dialog/demo.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="test">
<button class="ddd">点我</button>
</div>
</body>
<script>
document.querySelector(".test").onclick = function () {
alert(1)
}
document.querySelector(".ddd").onclick = function (e) {
console.log(e);
e.stopPropagation()
alert(2)
}
</script>
</html>

95
历届学生/fontendsix/项目练习/上课项目/dialog/index.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出层</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/dialog.css">
</head>
<body>
<button>登录</button>
</body>
<script src="./js/dialog.js"></script>
<script>
// 初始化插件，并传入配置参数
// 配置参数
// 插件内部默认的参数
// 使用者自定义传入的参数
// 可选参数 必填参数
var dia = new Dialog({
title: '标题222',
message: '哈哈哈哈',
confirmButtonText: 'OK',
showConfirmButton: true,
cancelButtonText: '取消2',
cancelButtonColor: '',
});
document.querySelector("button").onclick = () => {
dia.open();
// dia.oncancel( function () {
// console.log("你点击取消2");
// } );
dia.onconfirm( function () {
console.log("你点击确定按钮2");
} );
}
// var name = "里斯"
// var test = {
// name: '张三',
// getName: () => {
// console.log("1: ",this);
// var a = {
// id: 1,
// name: '哈哈哈哈',
// getId: () => {
// console.log("2: ",this);
// console.log(this.name); //
// }
// }
// a.getId()
// console.log(this.name);
// }
// }
// test.getName()
// this 墙头草
// this 在定义的时候无法确定指向谁，this会在被调用的时候确定执行
// 箭头函数 解绑this作用域
// 定义一个变量，保存this指向
// function demo() {
// var c = 1;
// var test = function () {
// c += 1;
// return c
// }
// return test;
// }
// var a = demo()
// console.log( a() ); // 2
// console.log( a() ); // 2
// // 闭包 方法内部的方法，内部方法访问外部变量，外部变量会被缓存的过程
// // 场景：为了避免重复计算，缓存常用的数据
// // 缺点：导致内存泄漏
</script>
</html>

160
历届学生/fontendsix/项目练习/上课项目/dialog/js/dialog.js Normal file
View File

@@ -0,0 +1,160 @@
// 语法糖
class Dialog {
// 默认参数
defaultOption = {
title: '标题1',
message: '内容1',
showConfirmButton: false,
confirmButtonText: '确认',
confirmButtonColor: '#ee0a24',
showCancelButton: true,
cancelButtonText: '取消',
cancelButtonColor: 'black',
className: '',
width: 320,
overlay: true,
closeOnPopstate: true, // 是否在页面回退时自动关闭
closeOnClickOverlay: true, // 是否在点击遮罩层后关闭弹窗
lockScroll: false,
allowHtml: true,
confirm: () => { }, // 确认按钮的回调
cancel: () => { }, // 点击取消按钮时触发
oncancel: () => { }, // 打开弹出
onconfirm: () => { } // 关闭弹窗
}
// 构造函数
constructor(option) {
if (option.hasOwnProperty("title") && option.hasOwnProperty("message")) {
this.defaultOption.title = option.title || this.defaultOption.title
this.defaultOption.message = option.message || this.defaultOption.message
option.hasOwnProperty("showConfirmButton") ? this.defaultOption.showConfirmButton = option.showConfirmButton : ''
option.hasOwnProperty("showCancelButton") ? this.defaultOption.showCancelButton = option.showCancelButton : ''
option.hasOwnProperty("overlay") ? this.defaultOption.overlay = option.overlay : ''
option.hasOwnProperty("closeOnPopstate") ? this.defaultOption.closeOnPopstate = option.closeOnPopstate : ''
option.hasOwnProperty("closeOnClickOverlay") ? this.defaultOption.closeOnClickOverlay = option.closeOnClickOverlay : ''
option.hasOwnProperty("lockScroll") ? this.defaultOption.lockScroll = option.lockScroll : ''
option.hasOwnProperty("allowHtml") ? this.defaultOption.allowHtml = option.allowHtml : ''
this.defaultOption.confirmButtonText = option.confirmButtonText || this.defaultOption.confirmButtonText
this.defaultOption.cancelButtonText = option.cancelButtonText || this.defaultOption.cancelButtonText
this.defaultOption.className = option.className || this.defaultOption.className
this.defaultOption.width = option.width || this.defaultOption.width
this.defaultOption.confirmButtonColor = option.confirmButtonColor || this.defaultOption.confirmButtonColor
this.defaultOption.cancelButtonColor = option.cancelButtonColor || this.defaultOption.cancelButtonColor
this.defaultOption.confirm = option.confirm || this.defaultOption.confirm
this.defaultOption.cancel = option.cancel || this.defaultOption.cancel
this.defaultOption.open = option.open || this.defaultOption.open
this.defaultOption.close = option.close || this.defaultOption.close
} else {
throw new Error("抱歉，缺少必填的title，message参数，请传入！")
}
}
initHTML() {
$("body").insertAdjacentHTML("beforeend", `
<div class="bmy_dialog ${this.defaultOption.className}">
<div class="bmy_dialog_content" style="width:${this.defaultOption.width}px">
<div class="bmy_dialog_title">${this.defaultOption.title}</div>
<div class="bmy_dialog_message"></div>
<div class="bmy_dialog_button">
${this.defaultOption.showCancelButton
? `<div style="color:${this.defaultOption.cancelButtonColor}" class="button bmy_dialog_cancel">${this.defaultOption.cancelButtonText}</div>`
: ''
}
${this.defaultOption.showConfirmButton
? `<div style="color:${this.defaultOption.confirmButtonColor}" class="button bmy_dialog_confirm">${this.defaultOption.confirmButtonText}</div>`
: ''
}
</div>
</div>
</div>`);
this.initConfig();
}
initConfig() {
// 是否监听页面返回
if (this.defaultOption.closeOnPopstate) {
window.addEventListener("popstate", (e) => {
this.close();
}, false);
}
// 是否显示背景层
this.defaultOption.overlay
? ''
: $(".bmy_dialog ").style.backgroundColor = "rgba(0, 0, 0, 0)"
// message 是否支持渲染html
this.defaultOption.allowHtml
? $(".bmy_dialog_message").innerHTML = this.defaultOption.message
: $(".bmy_dialog_message").innerText = this.defaultOption.message
// 是否锁住背景层
this.defaultOption.lockScroll
? $("body").style.overflow = "hidden"
: $("body").style.overflow = "auto"
$(".bmy_dialog_cancel").onclick = (e) => {
e.stopPropagation()
this.close();
}
$(".bmy_dialog_confirm").onclick = (e) => {
e.stopPropagation()
this.defaultOption.confirm()
this.defaultOption.onconfirm()
this.close();
}
if (this.defaultOption.closeOnClickOverlay) {
$(".bmy_dialog").onclick = () => {
this.close();
}
}
}
open () {
this.initHTML()
}
close () {
$("body").removeChild($(".bmy_dialog"))
this.defaultOption.cancel()
this.defaultOption.oncancel()
}
oncancel(callback) {
this.defaultOption.oncancel = callback
}
onconfirm(callback) {
this.defaultOption.onconfirm = callback
}
}
function open () {
}
function $(className) {
return document.querySelector(className)
}

1
历届学生/fontendsix/项目练习/上课项目/dialog/笔记.txt Normal file
View File

@@ -0,0 +1 @@
webpack