组件封装

html调用组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.k-dialog {width: 30%;z-index: 2001;display: block;position: absolute;background: #fff;border-radius: 2px;box-shadow: 0 1px 3px rgba(0, 0, 0, .3);margin: 0 auto;top: 15vh;left:30%;}.k-wrapper {position: fixed;left: 0px;top: 0px;bottom: 0px;right: 0px;background: black;opacity: 0.4;z-index: 2000;}.k-header {padding: 20px 20px 10px;}.k-header .k-title {line-height: 24px;font-size: 18px;color: #303133;float: left;}.k-body {padding: 30px 20px;color: #606266;font-size: 14px;}.k-footer {padding: 10px 20px 30px;text-align: right;}.k-close {color: #909399;font-weight: 400;float: right;cursor: pointer;}.k-default {color: #606266;border: 1px solid #dcdfe6;text-align: center;cursor: pointer;padding: 12px 20px;font-size: 14px;border-radius: 4px;font-weight: 500;margin-right: 10px;}.k-default:hover {color: #409eff;background: #ecf5ff;border-color: #c6e2ff;}.k-primary {border: 1px solid #dcdfe6;text-align: center;cursor: pointer;padding: 12px 20px;font-size: 14px;border-radius: 4px;font-weight: 500;background: #409eff;color: #fff;margin-left: 10px;}.k-primary:hover {background: #66b1ff;}.k-input{width: 100%;margin-left: 20px;margin-bottom: 20px;}.input-inner {-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 40px;line-height: 40px;outline: none;padding: 0 15px;transition: border-color .2s cubic-bezier(.645, .045, .355, 1);width: 100%;margin-top: 20px;}</style>
</head><body><button class="btn1">点击</button><button class="btn2">点击</button><!-- 通过标签调用组件，通过属性做配置 --><show-dialogtitle="自定义组件标题"></show-dialog>
<script type="module">
import Dialog,{InputDialog} from './dialog.js';
let dialog = new Dialog({title:"我的标题",content:"我的内容",isCancel:true ,dragable: true,success(){console.log("点击了确定");},cancel(){console.log("点击了取消");},maskable: true
})
document.querySelector(".btn1").onclick = function(){dialog.open();
}
let dialog2 = new InputDialog({title:"我的标题2",content:"我的内容2",isCancel:true ,dragable: true,success(e){console.log("点击了确定",e.detail);},cancel(){console.log("点击了取消");},maskable: true
})
document.querySelector(".btn2").onclick = function(){dialog2.open();
}// axios({})  /axios.get()...post put delete head;
// success: 点击确定之后触发自定义success 事件；
document.querySelector("show-dialog").addEventListener("success",function(){console.log("触发了组件的事件");
})
</script>
</body>
</html>

封装的弹窗

export default class Dialog extends EventTarget{constructor(options){super();// 默认配置let defalultOptions = {width: "30%",height: "250px",title: "测试标题",content: "测试内容",dragable: true, //是否可拖拽maskable: true, //是否有遮罩isCancel:false, //是否有取消success(){},cancel(){}}// 合并配置；//方法一：// this.opts = Object.assign(defalultOptions,options);//方法二:this.opts = {...defalultOptions,...options};//方法三：// this.opts = {//     width,//     height,//     title,//     content,//     dragable,//     maskable,//     isCancel,//     success,//     cancel// }// console.log(this.opts);this.init();}// 初始化组件方法init(){this.createElement();// this.addEvent("success",this.opts.success);this.addEventListener("success",this.opts.success)this.addEleEvent();if(!this.opts.maskable){this.divEles.querySelector(".k-wrapper").style.display = "none";}if(this.opts.dragable){this.drag();}}// 创建节点createElement(){// console.log(this.opts.width)let divEles = document.createElement("div"); divEles.innerHTML = `<div class="k-wrapper"></div><div class="k-dialog" style="width:${this.opts.width};height:${this.opts.height}"><div class="k-header"><span class="k-title">${this.opts.title}</span><span class="k-close">X</span></div><div class="k-body"><span>${this.opts.content}</span></div><div class="k-footer">${this.opts.isCancel?'<span class="k-default">取消</span>':''}<span class="k-primary">确定</span></div></div>`;divEles.style.display = "none";document.body.appendChild(divEles);this.divEles = divEles;}// 添加事件addEleEvent(){// let closeEle = this.divEles.querySelector(".k-close");// closeEle.addEventListener("click",()=>{//     this.close();// })// let cancelEle = this.divEles.querySelector(".k-default") ;// console.log(cancelEle)// cancelEle &&  cancelEle.addEventListener("click",()=>{//     console.log("close")// })// 事件委托let kDialog = this.divEles.querySelector(".k-dialog");kDialog.addEventListener("click",e=>{//    console.log(e.target); let className = e.target.className;//  console.log(className);switch(className){case 'k-close':this.close();break;case 'k-default':this.opts.cancel();this.close();break;case 'k-primary':// this.opts.success();// this.trigger("success");this.sure();this.close();break;default:console.log("未点中");break;}})}sure(value){let success = new CustomEvent("success",{detail:value});this.dispatchEvent(success);}// 关闭组件close(){this.divEles.style.display = "none";}// 打开组件open(){// console.log("open");this.divEles.style.display = "block";}drag(){let kDialog = this.divEles.querySelector(".k-dialog");kDialog.onmousedown = function (e) {let x = e.clientX  - this.offsetLeft;let y = e.clientY - this.offsetTop;this.onmousemove = function (e) {let xx = e.clientX;let yy = e.clientY;this.style.left = xx - x + "px";this.style.top = yy - y + "px";}}document.onmouseup = function () {kDialog.onmousemove = "";}}
}
// 通过继承扩展功能；
export class InputDialog extends Dialog{constructor(options){super(options);this.createInput();}createInput(){let myInput = document.createElement("input");myInput.classList.add("input-inner");this.divEles.querySelector(".k-body").appendChild(myInput);this.myInput = myInput;}sure(){let value = this.myInput.value;super.sure(value);}
}
class ShowDialog extends HTMLElement{constructor(){super();this.innerHTML = `<button>按钮</button>`;let dialog = new Dialog({title:this.title,success:(e)=>{// console.log("点击了确定")this.dispatchEvent(new CustomEvent("success"))}   })// this.title = this.getAttribute("title")this.onclick = function () {dialog.open();}}get title(){return this.getAttribute("title") ?? "默认标题"}}
customElements.define("show-dialog",ShowDialog);

javaScript之原生js封装组件（弹窗为例）相关推荐

原生js封装table组件
使用原生js封装自己的table组件. 思路是通过设置参数,生成对应的表格dom; 源码如下:(初步实现) var XUi = {// table组件tableDom:{common:function ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
H5移动端原生JS封装附件上传服务器
本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
原生js封装cookie插件
最近迷上了react,用react模拟之前的系统,做登录的时候,发现需要用到cookie,之前用的跟vue搭配的VueCookie,我就在想啊,react应该也会有相应的cookie插件吧!百度一下, ...
原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
用原生js封装get方法
get方法的封装首先我们看一下用原生js来发送请求的步骤: 1.创建请求对象 .var xhr=new XMLHttpRequest(); 2.创建open方法确认请求方式和地址 xhr.open( ...

javaScript之原生js封装组件（弹窗为例）

组件封装

javaScript之原生js封装组件（弹窗为例）相关推荐

最新文章

热门文章