代码迁移

src/BaseDialog/index.js

@@ -0,0 +1,204 @@
+class BaseDialog {
+  constructor(container, options = {}) {
+    this.container = container
+    this.options = { ...options }
+    this.options.ismove = true
+    if(options.ismove === false) {
+      this.options.ismove = options.ismove
+    }
+    this.closeCallBack = options.closeCallBack
+    this._element = {}
+    this._element_style = undefined
+  }
+
+  async init() {
+    
+    this.closeAll()
+    DialogAll.push(this)
+    this.isDestroy = false
+    // body
+    this._element.body = document.createElement('div');
+    this._element.body.className = 'YJ-custom-base-dialog';
+    this._element.body.style.top = this.options.top
+    this._element.body.style.bottom = this.options.bottom
+    this._element.body.style.left = this.options.left
+    this._element.body.style.right = this.options.right
+    this.container.appendChild(this._element.body)
+
+    //title
+    this._element.title = document.createElement('div');
+    this._element.title.className = 'title-box';
+    this._element.title.innerHTML = `<span class="title">${(this.options.title || '')}</span>` + `<span class="close-box"><span class="close"></span><i>&#10005</i></span>`
+    this._element.body.appendChild(this._element.title)
+
+    //content
+    this._element.content = await document.createElement('div');
+    this._element.content.className = 'content';
+    this._element.body.appendChild(this._element.content)
+
+    // foot
+    this._element.foot = await document.createElement('div');
+    this._element.foot.className = 'foot';
+    // this._element.foot.innerHTML = `
+    // <button class="translational">平移</button>
+    // <button class="resetting">重置</button>
+    // <button class="delete">删除</button>
+    // <button class="close">关闭</button>
+    // `
+    this._element.foot.innerHTML = `
+    <button class="close">关闭</button>
+    `
+    this._element.body.appendChild(this._element.foot)
+
+    // 关闭
+    let closeBtnsBox = this._element.body.getElementsByClassName('close-box')[0];
+    closeBtnsBox.addEventListener('click', () => {
+      this.close()
+    });
+    let closeBtns = this._element.body.getElementsByClassName('close');
+    for (let i = 0; i < closeBtns.length; i++) {
+      closeBtns[i].addEventListener('click', () => {
+        this.close()
+      });
+    }
+
+    if(this.options.ismove) {
+      this.moveDiv()
+    }
+  }
+
+  close() {
+    let styles = document.getElementsByTagName("style")
+    for (let i = styles.length - 1; i >= 0; i--) {
+      if (styles[i].dataset) {
+        if (styles[i].dataset.name === 'YJ_style_dialog') {
+          document.getElementsByTagName('head')[0].removeChild(styles[i])
+        }
+      }
+    }
+    if (this._element.body && this._element.body.parentNode) {
+      this.container.removeChild(this._element.body)
+    }
+    this._element.body = null
+    this._element.title = null
+    this._element.content = null
+    this._element.foot = null
+    this._element_style = null
+    this.isDestroy = true
+    if (this.closeCallBack) {
+      this.closeCallBack()
+      this.closeCallBack = null
+    }
+  }
+
+  closeAll() {
+    for(let i=DialogAll.length-1;i>=0;i--) {
+      DialogAll[i].close()
+      DialogAll.splice(i, 1)
+    }
+    return
+    let styles = document.getElementsByTagName("style")
+    for (let i = styles.length - 1; i >= 0; i--) {
+      if (styles[i].dataset) {
+        if (styles[i].dataset.name === 'YJ_style_dialog') {
+          document.getElementsByTagName('head')[0].removeChild(styles[i])
+        }
+      }
+    }
+    if (this._element_style) {
+      this._element_style = null
+    }
+    let elms = this.container.getElementsByClassName('YJ-custom-base-dialog')
+    for (let i = elms.length - 1; i >= 0; i--) {
+      this.container.removeChild(elms[i])
+    }
+    this._element.body = null
+    this._element.title = null
+    this._element.content = null
+    this._element.foot = null
+  }
+
+  titleAppChild(node) {
+    this._element.title.appendChild(node)
+  }
+  contentAppChild(node) {
+    this._element.content.appendChild(node)
+  }
+  footAppChild(node, target) {
+    if (target) {
+      this._element.foot.insertBefore(node, target);
+    }
+    else {
+      this._element.foot.prepend(node)
+    }
+  }
+
+  moveDiv() {
+    let x = 0
+    let y = 0
+    let l = 0
+    let t = 0
+    let oClickDiv = this._element.body
+    let _this = this
+    oClickDiv.onmousedown = (e) => {
+      if (e.toElement.className !== 'title-box') {
+        return
+      }
+      // dialog的宽度、高度
+      // let oMoveDivHeight = that.oMoveDiv.offsetHeight
+      let oMoveDivHeight = this._element.body.offsetHeight
+      // let oMoveDivWidth = that.oMoveDiv.offsetWidth
+      let oMoveDivWidth = this._element.body.offsetWidth
+
+      x = e.clientX
+      y = e.clientY
+
+      let leftPx = window.getComputedStyle(this._element.body).left
+      let topPx = window.getComputedStyle(this._element.body).top
+
+      l = leftPx.substr(0, leftPx.indexOf('px')) * 1
+      t = topPx.substr(0, topPx.indexOf('px')) * 1
+      // 视口大小
+      let windowHeight = document.documentElement.clientHeight
+      let windowWidth = document.documentElement.clientWidth
+
+      //鼠标移动
+      window.onmousemove = function (e) {
+        e.preventDefault()
+        //获取x和y
+        let nx = e.clientX
+        let ny = e.clientY
+        //计算移动后的左偏移量和顶部的偏移量
+        let leftPx = nx - (x - l)
+        let topPx = ny - (y - t)
+        if (leftPx < 0) {
+          leftPx = 0
+        } else if (leftPx + oMoveDivWidth > windowWidth) {
+          leftPx = windowWidth - oMoveDivWidth
+        }
+
+        if (topPx <= 0) {
+          topPx = 0
+        } else if (topPx + oMoveDivHeight > windowHeight) {
+          topPx = windowHeight - oMoveDivHeight
+        }
+        _this._element.body.style.left = leftPx + 'px'
+        _this._element.body.style.top = topPx + 'px'
+        _this._element.body.style.bottom = 'unset'
+        _this._element.body.style.right = 'unset'
+      }
+    }
+
+    //鼠标抬起事件
+    document.onmouseup = function (e) {
+      window.onmousemove = null
+    }
+    window.ondragend = function (e) {
+      window.onmousemove = null
+    }
+  }
+}
+
+let DialogAll = []
+
+export default BaseDialog

src/BaseDialog/rule.js

@@ -0,0 +1,35 @@
+function check(elm, rule) {
+  let input = elm.getElementsByTagName('input')[0]
+  rules[rule.validator](input, rule.trigger, (s, error) => {
+    if (s) {
+      elm.className = 'input-box'
+      let eElm = elm.getElementsByClassName('input-error-text')[0]
+      if(eElm) {
+        elm.removeChild(eElm)
+      }
+    }
+    else {
+      elm.className = 'input-box error'
+      let e = rule.message || error
+      let eElm = document.createElement('span');
+      eElm.className = 'input-error-text'
+      eElm.innerHTML = e
+      elm.appendChild(eElm)
+    }
+  })
+}
+
+const rules = {
+  notEmpty: (input, trigger, cd) => {
+    input.addEventListener(trigger, ()=>{
+      if (input.value) {
+        cd(true)
+      }
+      else {
+        cd(false, '不能为空！')
+      }
+    })
+  }
+}
+
+export { check }