第一次上传

src/directive/el-drag-dialog/drag.js

@@ -0,0 +1,126 @@
+/* eslint-disable no-unused-vars */
+export default {
+  bind(el, binding, vnode) {
+    // 弹框可拉伸最小宽高
+    const minWidth = 400
+    const minHeight = 300
+    // 初始非全屏
+    let isFullScreen = false
+    // 当前宽高
+    let nowWidth = 0
+    let nowHight = 0
+    // 当前顶部高度
+    let nowMarginTop = 0
+    // 获取弹框头部（这部分可双击全屏）
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    // 弹窗
+    const dragDom = el.querySelector('.el-dialog')
+    // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
+    dragDom.style.overflow = 'auto'
+    // 清除选择头部文字效果
+    dialogHeaderEl.onselectstart = new Function('return false')
+    // 头部加上可拖动cursor
+    dialogHeaderEl.style.cursor = 'move'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    const moveDown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+    dialogHeaderEl.onmousedown = moveDown
+    // 双击头部效果
+    dialogHeaderEl.ondblclick = (e) => {
+      if (isFullScreen === false) {
+        nowHight = dragDom.clientHeight
+        nowWidth = dragDom.clientWidth
+        nowMarginTop = dragDom.style.marginTop
+        dragDom.style.left = 0
+        dragDom.style.top = 0
+        dragDom.style.height = '100VH'
+        dragDom.style.width = '100VW'
+        dragDom.style.marginTop = 0
+        isFullScreen = true
+        dialogHeaderEl.style.cursor = 'initial'
+        dialogHeaderEl.onmousedown = null
+      } else {
+        dragDom.style.height = 'auto'
+        dragDom.style.width = nowWidth + 'px'
+        dragDom.style.marginTop = nowMarginTop
+        isFullScreen = false
+        dialogHeaderEl.style.cursor = 'move'
+        dialogHeaderEl.onmousedown = moveDown
+      }
+    }
+
+    // 拉伸
+    const resizeEl = document.createElement('div')
+    dragDom.appendChild(resizeEl)
+    // 在弹窗右下角加上一个10-10px的控制块
+    resizeEl.style.cursor = 'se-resize'
+    resizeEl.style.position = 'absolute'
+    resizeEl.style.height = '10px'
+    resizeEl.style.width = '10px'
+    resizeEl.style.right = '0px'
+    resizeEl.style.bottom = '0px'
+    resizeEl.style.borderBottom = '10px solid black'
+    resizeEl.style.borderLeft = '10px solid transparent'
+    resizeEl.style.bottom = '0px'
+    // 鼠标拉伸弹窗
+    resizeEl.onmousedown = (e) => {
+      // 记录初始x位置
+      const clientX = e.clientX
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - resizeEl.offsetLeft
+      const disY = e.clientY - resizeEl.offsetTop
+
+      document.onmousemove = function(e) {
+        e.preventDefault() // 移动时禁用默认事件
+
+        // 通过事件委托，计算移动的距离
+        const x = e.clientX - disX + (e.clientX - clientX) + 10 // 这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
+        const y = e.clientY - disY + 10
+        // 比较是否小于最小宽高
+        dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
+        dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
+      }
+      // 拉伸结束
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

src/directive/el-drag-dialog/index.js

@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag

src/directive/el-drag-drawer/drag.js

@@ -0,0 +1,180 @@
+/* eslint-disable no-unused-vars */
+export default {
+  bind(el, binding, vnode) {
+    // 弹框可拉伸最小宽高
+    const minWidth = 400
+    const minHeight = 300
+    // 初始非全屏
+    let isFullScreen = false
+    // 获取弹框头部（这部分可双击全屏）
+    const dialogHeaderEl = el.querySelector('.drawer-header')
+    // const dialogHeaderEl = el.querySelector('.el-drawer__header')
+    const dragDom = el.querySelector('.drawer-content')
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+    dragDom.style.cssText += ';top:0px;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = (function() {
+      if (document.body.currentStyle) {
+        // 在ie下兼容写法
+        return (dom, attr) => dom.currentStyle[attr]
+      } else {
+        return (dom, attr) => getComputedStyle(dom, false)[attr]
+      }
+    })()
+
+    const moveDown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      const screenWidth = document.body.clientWidth // body当前宽度
+      const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
+
+      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
+      const dragDomheight = dragDom.offsetHeight // 对话框高度
+
+      const minDragDomLeft = dragDom.offsetLeft
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+      const minDragDomTop = dragDom.offsetTop
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
+
+      // 获取到的值带px 正则匹配替换
+      let styL = sty(dragDom, 'left')
+      // 为兼容ie
+      if (styL === 'auto') styL = '0px'
+      let styT = sty(dragDom, 'top')
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (styL.includes('%')) {
+        styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
+        styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/px/g, '')
+        styT = +styT.replace(/px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+        // 边界处理
+        // 左
+        if (-(left) > minDragDomLeft) {
+          left = -(minDragDomLeft)
+        } else if (left > maxDragDomLeft) {
+          // 右
+          left = maxDragDomLeft
+        }
+        if (-(top) > minDragDomTop) {
+          top = -(minDragDomTop)
+        }
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+      }
+
+      document.onmouseup = function(e) {
+        // 通过事件委托，计算移动的距离
+        const left = e.clientX - disX
+        // 边界处理
+        // 左
+        if (!isFullScreen) {
+          if (-(left) > minDragDomLeft) {
+            blclick(e)
+          } else if (left > maxDragDomLeft) {
+            // 右
+            blclick(e)
+          }
+        }
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+      return false
+    }
+    dialogHeaderEl.onmousedown = moveDown
+
+    // 记录旧的width、height、left、top
+    let oldWidth = 0
+    let oldHeight = 0
+    let oldTop = 0
+    let oldLeft = 0
+    // 默认宽度
+    const defaultWidth = dragDom.style.width
+    // 双击头部效果
+    const blclick = (e) => {
+      const screenWidth = document.body.clientWidth // body当前宽度
+      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
+      let left = dragDom.style.left
+      if (left.includes('px')) {
+        left = left.replace('px', '')
+      }
+      const right = screenWidth - Number(left) - dragDomWidth
+      if (isFullScreen === false) {
+        oldHeight = dragDom.style.height
+        oldTop = dragDom.style.top
+        oldLeft = dragDom.style.left
+        oldWidth = dragDom.style.width
+        // 判断left和right谁小，谁小就浮动到哪边
+        if (!left || left >= right) {
+          dragDom.style.left = null
+        } else {
+          dragDom.style.left = 0
+        }
+        dragDom.style.width = defaultWidth
+        dragDom.style.top = 0
+        dragDom.style.height = '100VH'
+        isFullScreen = true
+        dialogHeaderEl.style.cursor = 'initial'
+        dialogHeaderEl.onmousedown = null
+      } else {
+        dragDom.style.height = oldHeight
+        dragDom.style.width = oldWidth
+        dragDom.style.top = oldTop
+        dragDom.style.left = oldLeft
+        isFullScreen = false
+        dialogHeaderEl.style.cursor = 'move'
+        dialogHeaderEl.onmousedown = moveDown
+      }
+    }
+    dialogHeaderEl.ondblclick = blclick
+
+    // 拉伸
+    const resizeEl = document.createElement('div')
+    dragDom.appendChild(resizeEl)
+    // 在弹窗右下角加上一个10-10px的控制块
+    resizeEl.style.cursor = 'se-resize'
+    resizeEl.style.position = 'absolute'
+    resizeEl.style.height = '10px'
+    resizeEl.style.width = '10px'
+    resizeEl.style.right = '0px'
+    resizeEl.style.bottom = '0px'
+    resizeEl.style.borderBottom = '10px solid black'
+    resizeEl.style.borderLeft = '10px solid transparent'
+    resizeEl.style.bottom = '0px'
+    // 鼠标拉伸弹窗
+    resizeEl.onmousedown = (e) => {
+      // 记录初始x位置
+      const clientX = e.clientX
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - resizeEl.offsetLeft
+      const disY = e.clientY - resizeEl.offsetTop
+
+      document.onmousemove = function(e) {
+        e.preventDefault() // 移动时禁用默认事件
+
+        // 通过事件委托，计算移动的距离
+        const x = e.clientX - disX + (e.clientX - clientX) + 10 // 这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
+        const y = e.clientY - disY + 10
+        // 比较是否小于最小宽高
+        dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
+        dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
+      }
+      // 拉伸结束
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

src/directive/el-drag-drawer/index.js

@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-drawer', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-drawer'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag

src/directive/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+
+const handle = (e, vNode) => {
+  let val = e.target.value
+  let qualifiedNum = val
+    .replace(/[^\d.]/g, '')
+    .replace(/^\./g, '')
+    .replace(/\.{2,}/g, '.')
+    .replace(/^0{2,}/g, '0')
+    .replace('.', '$#$')
+    .replace(/\./g, '')
+    .replace('$#$', '.')
+    console.log('qualifiedNum',qualifiedNum)
+  vNode.componentInstance.$emit('input', qualifiedNum)
+}
+
+
+Vue.directive('checkNum', {
+  bind(el, binding, vNode) {
+      console.log('el',binding.arg)
+    if (!el.children.length) {
+      return
+    }
+    let index = binding.arg ? binding.arg : 0
+    el.children[index].addEventListener('keyup', e => {
+      handle(e, vNode)
+    })
+  },
+  unbind(el) {}
+})

src/directive/permission/index.js

@@ -0,0 +1,13 @@
+import permission from './permission'
+
+const install = function(Vue) {
+  Vue.directive('permission', permission)
+}
+
+if (window.Vue) {
+  window['permission'] = permission
+  Vue.use(install); // eslint-disable-line
+}
+
+permission.install = install
+export default permission

src/directive/permission/permission.js

@@ -0,0 +1,22 @@
+import store from '@/store'
+
+export default {
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const auths = store.getters && store.getters.auths
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionRoles = value
+
+      const hasPermission = auths.some(role => {
+        return permissionRoles.includes(role)
+      })
+
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`need auths! Like v-permission="['admin','editor']"`)
+    }
+  }
+}

src/directive/sticky.js

@@ -0,0 +1,91 @@
+const vueSticky = {}
+let listenAction
+vueSticky.install = Vue => {
+  Vue.directive('sticky', {
+    inserted(el, binding) {
+      const params = binding.value || {}
+      const stickyTop = params.stickyTop || 0
+      const zIndex = params.zIndex || 1000
+      const elStyle = el.style
+
+      elStyle.position = '-webkit-sticky'
+      elStyle.position = 'sticky'
+      // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
+      // if (~elStyle.position.indexOf('sticky')) {
+      //     elStyle.top = `${stickyTop}px`;
+      //     elStyle.zIndex = zIndex;
+      //     return
+      // }
+      const elHeight = el.getBoundingClientRect().height
+      const elWidth = el.getBoundingClientRect().width
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
+
+      const parentElm = el.parentNode || document.documentElement
+      const placeholder = document.createElement('div')
+      placeholder.style.display = 'none'
+      placeholder.style.width = `${elWidth}px`
+      placeholder.style.height = `${elHeight}px`
+      parentElm.insertBefore(placeholder, el)
+
+      let active = false
+
+      const getScroll = (target, top) => {
+        const prop = top ? 'pageYOffset' : 'pageXOffset'
+        const method = top ? 'scrollTop' : 'scrollLeft'
+        let ret = target[prop]
+        if (typeof ret !== 'number') {
+          ret = window.document.documentElement[method]
+        }
+        return ret
+      }
+
+      const sticky = () => {
+        if (active) {
+          return
+        }
+        if (!elStyle.height) {
+          elStyle.height = `${el.offsetHeight}px`
+        }
+
+        elStyle.position = 'fixed'
+        elStyle.width = `${elWidth}px`
+        placeholder.style.display = 'inline-block'
+        active = true
+      }
+
+      const reset = () => {
+        if (!active) {
+          return
+        }
+
+        elStyle.position = ''
+        placeholder.style.display = 'none'
+        active = false
+      }
+
+      const check = () => {
+        const scrollTop = getScroll(window, true)
+        const offsetTop = el.getBoundingClientRect().top
+        if (offsetTop < stickyTop) {
+          sticky()
+        } else {
+          if (scrollTop < elHeight + stickyTop) {
+            reset()
+          }
+        }
+      }
+      listenAction = () => {
+        check()
+      }
+
+      window.addEventListener('scroll', listenAction)
+    },
+
+    unbind() {
+      window.removeEventListener('scroll', listenAction)
+    }
+  })
+}
+
+export default vueSticky
+