12.31开源admin代码更新

admin/src/directive/clipboard/clipboard.js

@@ -1,49 +0,0 @@
-// Inspired by https://github.com/Inndy/vue-clipboard2
-const Clipboard = require('clipboard')
-if (!Clipboard) {
-  throw new Error('you should npm install `clipboard` --save at first ')
-}
-
-export default {
-  bind(el, binding) {
-    if (binding.arg === 'success') {
-      el._v_clipboard_success = binding.value
-    } else if (binding.arg === 'error') {
-      el._v_clipboard_error = binding.value
-    } else {
-      const clipboard = new Clipboard(el, {
-        text() { return binding.value },
-        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
-      })
-      clipboard.on('success', e => {
-        const callback = el._v_clipboard_success
-        callback && callback(e) // eslint-disable-line
-      })
-      clipboard.on('error', e => {
-        const callback = el._v_clipboard_error
-        callback && callback(e) // eslint-disable-line
-      })
-      el._v_clipboard = clipboard
-    }
-  },
-  update(el, binding) {
-    if (binding.arg === 'success') {
-      el._v_clipboard_success = binding.value
-    } else if (binding.arg === 'error') {
-      el._v_clipboard_error = binding.value
-    } else {
-      el._v_clipboard.text = function() { return binding.value }
-      el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
-    }
-  },
-  unbind(el, binding) {
-    if (binding.arg === 'success') {
-      delete el._v_clipboard_success
-    } else if (binding.arg === 'error') {
-      delete el._v_clipboard_error
-    } else {
-      el._v_clipboard.destroy()
-      delete el._v_clipboard
-    }
-  }
-}

admin/src/directive/clipboard/index.js

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

admin/src/directive/copy/copy.js

@@ -0,0 +1,74 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+
+import { Message } from 'element-ui';
+ 
+const vCopy = { // 名字爱取啥取啥
+  /*
+    bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
+    el: 作用的 dom 对象
+    value: 传给指令的值，也就是我们要 copy 的值
+  */
+  bind(el, { value }) {
+    el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
+    el.handler = () => {
+      if (!el.$value) {
+      // 值为空的时候，给出提示，我这里的提示是用的 element-ui 的提示，你们随意
+        Message.warning('无复制内容');
+        return;
+      }
+      // 动态创建 textarea 标签
+      const textarea = document.createElement('textarea');
+      // 将该 textarea 设为只读，同时将 textarea 移出可视区域
+      textarea.readOnly = 'readonly';
+      textarea.style.position = 'absolute';
+      textarea.style.left = '-9999px';
+      // 将要 copy 的值赋给 textarea 标签的 value 属性
+      textarea.value = el.$value;
+      // 将 textarea 插入到 body 中
+      document.body.appendChild(textarea);
+      // 选中值并复制
+      textarea.select();
+      textarea.setSelectionRange(0, textarea.value.length);
+      //就是可以通过设置起始于终止位置，来选中一段文本中的一部分,这里其实就是全选
+      const result = document.execCommand('Copy');
+      //html原生的复制功能
+      /**
+       * 拓展
+       * :document.execCommand(”selectAll”) 全选
+       * :document.execCommand(open) 打开
+       * :document.execCommand(saveAs) 另存为
+       */
+      if (result) {
+        Message.success('复制成功');
+      }
+      document.body.removeChild(textarea);
+      //复制成功然后删除textarea标签
+    };
+    // 绑定点击事件，就是所谓的一键 copy 啦
+    el.addEventListener('click', el.handler);
+  },
+  // 当传进来的值更新的时候触发
+  componentUpdated(el, { value }) {
+    el.$value = value;
+  },
+  // 指令与元素解绑的时候，移除事件绑定
+  unbind(el) {
+    el.removeEventListener('click', el.handler);
+  },
+};
+
+//使用示例 <el-button v-copy="info">复制</el-button>
+//data() {
+// return {
+//    info:'要复制的内容'
+// }
+
+export default vCopy;

admin/src/directive/dialog/drag.js

@@ -0,0 +1,64 @@
+/**
+* v-dialogDrag 弹窗拖拽
+* Copyright (c) 2019 ruoyi
+*/
+
+export default {
+  bind(el, binding, vnode, oldVnode) {
+    const value = binding.value
+    if (value == false) return
+    // 获取拖拽内容头部
+    const dialogHeaderEl = el.querySelector('.el-dialog__header');
+    const dragDom = el.querySelector('.el-dialog');
+    dialogHeaderEl.style.cursor = 'move';
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+    dragDom.style.position = 'absolute';
+    dragDom.style.marginTop = 0;
+    let width = dragDom.style.width;
+    if (width.includes('%')) {
+      width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
+    } else {
+      width = +width.replace(/\px/g, '');
+    }
+    dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
+    // 鼠标按下事件
+    dialogHeaderEl.onmousedown = (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;
+
+        let finallyL = l + styL
+        let finallyT = t + styT
+
+        // 移动当前元素
+        dragDom.style.left = `${finallyL}px`;
+        dragDom.style.top = `${finallyT}px`;
+
+      };
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    }
+  }
+};

admin/src/directive/dialog/dragHeight.js

@@ -0,0 +1,34 @@
+/**
+* v-dialogDragWidth 可拖动弹窗高度（右下角）
+* Copyright (c) 2019 ruoyi
+*/
+
+export default {
+    bind(el) {
+        const dragDom = el.querySelector('.el-dialog');
+        const lineEl = document.createElement('div');
+        lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
+        lineEl.addEventListener('mousedown',
+            function(e) {
+                // 鼠标按下，计算当前元素距离可视区的距离
+                const disX = e.clientX - el.offsetLeft;
+                const disY = e.clientY - el.offsetTop;
+                // 当前宽度 高度
+                const curWidth = dragDom.offsetWidth;
+                const curHeight = dragDom.offsetHeight;
+                document.onmousemove = function(e) {
+                    e.preventDefault(); // 移动时禁用默认事件
+                    // 通过事件委托，计算移动的距离
+                    const xl = e.clientX - disX;
+                    const yl = e.clientY - disY
+                    dragDom.style.width = `${curWidth + xl}px`;
+                    dragDom.style.height = `${curHeight + yl}px`;
+                };
+                document.onmouseup = function(e) {
+                    document.onmousemove = null;
+                    document.onmouseup = null;
+                };
+            }, false);
+        dragDom.appendChild(lineEl);
+    }
+}

admin/src/directive/dialog/dragWidth.js

@@ -0,0 +1,30 @@
+/**
+* v-dialogDragWidth 可拖动弹窗宽度（右侧边）
+* Copyright (c) 2019 ruoyi
+*/
+
+export default {
+    bind(el) {
+        const dragDom = el.querySelector('.el-dialog');
+        const lineEl = document.createElement('div');
+        lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
+        lineEl.addEventListener('mousedown',
+            function (e) {
+                // 鼠标按下，计算当前元素距离可视区的距离
+                const disX = e.clientX - el.offsetLeft;
+                // 当前宽度
+                const curWidth = dragDom.offsetWidth;
+                document.onmousemove = function (e) {
+                    e.preventDefault(); // 移动时禁用默认事件
+                    // 通过事件委托，计算移动的距离
+                    const l = e.clientX - disX;
+                    dragDom.style.width = `${curWidth + l}px`;
+                };
+                document.onmouseup = function (e) {
+                    document.onmousemove = null;
+                    document.onmouseup = null;
+                };
+            }, false);
+        dragDom.appendChild(lineEl);
+    }
+}

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

@@ -1,77 +0,0 @@
-export default {
-  bind(el, binding, vnode) {
-    const dialogHeaderEl = el.querySelector('.el-dialog__header')
-    const dragDom = el.querySelector('.el-dialog')
-    dialogHeaderEl.style.cssText += ';cursor:move;'
-    dragDom.style.cssText += ';top:0px;'
-
-    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
-    const getStyle = (function() {
-      if (window.document.currentStyle) {
-        return (dom, attr) => dom.currentStyle[attr]
-      } else {
-        return (dom, attr) => getComputedStyle(dom, false)[attr]
-      }
-    })()
-
-    dialogHeaderEl.onmousedown = (e) => {
-      // 鼠标按下，计算当前元素距离可视区的距离
-      const disX = e.clientX - dialogHeaderEl.offsetLeft
-      const disY = e.clientY - dialogHeaderEl.offsetTop
-
-      const dragDomWidth = dragDom.offsetWidth
-      const dragDomHeight = dragDom.offsetHeight
-
-      const screenWidth = document.body.clientWidth
-      const screenHeight = document.body.clientHeight
-
-      const minDragDomLeft = dragDom.offsetLeft
-      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
-
-      const minDragDomTop = dragDom.offsetTop
-      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
-
-      // 获取到的值带px 正则匹配替换
-      let styL = getStyle(dragDom, 'left')
-      let styT = getStyle(dragDom, 'top')
-
-      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
-        } else if (top > maxDragDomTop) {
-          top = maxDragDomTop
-        }
-
-        // 移动当前元素
-        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
-
-        // emit onDrag event
-        vnode.child.$emit('dragDialog')
-      }
-
-      document.onmouseup = function(e) {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-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

admin/src/directive/el-table/adaptive.js

@@ -1,41 +0,0 @@
-import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
-
-/**
- * How to use
- * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
- * el-table height is must be set
- * bottomOffset: 30(default)   // The height of the table from the bottom of the page.
- */
-
-const doResize = (el, binding, vnode) => {
-  const { componentInstance: $table } = vnode
-
-  const { value } = binding
-
-  if (!$table.height) {
-    throw new Error(`el-$table must set the height. Such as height='100px'`)
-  }
-  const bottomOffset = (value && value.bottomOffset) || 30
-
-  if (!$table) return
-
-  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
-  $table.layout.setHeight(height)
-  $table.doLayout()
-}
-
-export default {
-  bind(el, binding, vnode) {
-    el.resizeListener = () => {
-      doResize(el, binding, vnode)
-    }
-    // parameter 1 is must be "Element" type
-    addResizeListener(window.document.body, el.resizeListener)
-  },
-  inserted(el, binding, vnode) {
-    doResize(el, binding, vnode)
-  },
-  unbind(el) {
-    removeResizeListener(window.document.body, el.resizeListener)
-  }
-}

admin/src/directive/el-table/index.js

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

admin/src/directive/index.js

@@ -0,0 +1,33 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+
+import hasRole from './permission/hasRole'
+import hasPermi from './permission/hasPermi'
+import dialogDrag from './dialog/drag'
+import dialogDragWidth from './dialog/dragWidth'
+import dialogDragHeight from './dialog/dragHeight'
+import copy from './copy/copy'
+
+const install = function(Vue) {
+  Vue.directive('hasRole', hasRole)
+  Vue.directive('hasPermi', hasPermi)
+  Vue.directive('dialogDrag', dialogDrag)
+  Vue.directive('dialogDragWidth', dialogDragWidth)
+  Vue.directive('dialogDragHeight', dialogDragHeight)
+  Vue.directive('copy', copy)
+}
+
+if (window.Vue) {
+  window['hasRole'] = hasRole
+  window['hasPermi'] = hasPermi
+  Vue.use(install); // eslint-disable-line
+}
+
+export default install

admin/src/directive/permission/hasPermi.js

@@ -0,0 +1,41 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+ 
+import store from '@/store'
+
+export default {
+  inserted(el, binding, vnode) {
+    // 当被绑定的元素插入到 DOM 中时……
+    const { value } = binding
+    const all_permission = "*:*:*";
+    //超管标识
+    const permissions = store.getters && store.getters.permissions
+    //从getters中取出从接口请求到的权限标识数组
+    if (value && value instanceof Array && value.length > 0) {
+      //value为指令的绑定值，并且要求是一个非空数组
+      const permissionFlag = value
+      
+      const hasPermissions = permissions.some(permission => {
+        //some() 方法用于检测数组中的元素是否满足指定条件（函数提供）
+        //如果是超管或者其他管理员有对应的权限标识
+        return all_permission === permission || permissionFlag.includes(permission) 
+        //检测数组 permissionFlag 是否包含 permission 
+      })
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+        //否则就删除该节点，体现在页面上就是没有按钮对应的权限标识就不显示该按钮
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`)
+    //页面上使用v-hasPermi没有传值的情况下给的提示 
+    }
+  }
+}

admin/src/directive/permission/hasRole.js

@@ -0,0 +1,33 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+ 
+import store from '@/store'
+
+export default {
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const super_admin = "admin";
+    const roles = store.state.user.name
+
+    if (value && value instanceof Array && value.length > 0) {
+      const roleFlag = value
+
+      const hasRole = roles.some(role => {
+        return super_admin === role || roleFlag.includes(role)
+      })
+
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置角色权限标签值"`)
+    }
+  }
+}

admin/src/directive/permission/index.js

@@ -1,13 +0,0 @@
-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

admin/src/directive/permission/permission.js

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

admin/src/directive/sticky.js

@@ -1,91 +0,0 @@
-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
-

admin/src/directive/waves/index.js

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

admin/src/directive/waves/waves.css

@@ -1,26 +0,0 @@
-.waves-ripple {
-    position: absolute;
-    border-radius: 100%;
-    background-color: rgba(0, 0, 0, 0.15);
-    background-clip: padding-box;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
-    opacity: 1;
-}
-
-.waves-ripple.z-active {
-    opacity: 0;
-    -webkit-transform: scale(2);
-    -ms-transform: scale(2);
-    transform: scale(2);
-    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-}

admin/src/directive/waves/waves.js

@@ -1,72 +0,0 @@
-import './waves.css'
-
-const context = '@@wavesContext'
-
-function handleClick(el, binding) {
-  function handle(e) {
-    const customOpts = Object.assign({}, binding.value)
-    const opts = Object.assign({
-      ele: el, // 波纹作用元素
-      type: 'hit', // hit 点击位置扩散 center中心点扩展
-      color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-    },
-    customOpts
-    )
-    const target = opts.ele
-    if (target) {
-      target.style.position = 'relative'
-      target.style.overflow = 'hidden'
-      const rect = target.getBoundingClientRect()
-      let ripple = target.querySelector('.waves-ripple')
-      if (!ripple) {
-        ripple = document.createElement('span')
-        ripple.className = 'waves-ripple'
-        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
-        target.appendChild(ripple)
-      } else {
-        ripple.className = 'waves-ripple'
-      }
-      switch (opts.type) {
-        case 'center':
-          ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
-          ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
-          break
-        default:
-          ripple.style.top =
-            (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
-              document.body.scrollTop) + 'px'
-          ripple.style.left =
-            (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
-              document.body.scrollLeft) + 'px'
-      }
-      ripple.style.backgroundColor = opts.color
-      ripple.className = 'waves-ripple z-active'
-      return false
-    }
-  }
-
-  if (!el[context]) {
-    el[context] = {
-      removeHandle: handle
-    }
-  } else {
-    el[context].removeHandle = handle
-  }
-
-  return handle
-}
-
-export default {
-  bind(el, binding) {
-    el.addEventListener('click', handleClick(el, binding), false)
-  },
-  update(el, binding) {
-    el.removeEventListener('click', el[context].removeHandle, false)
-    el.addEventListener('click', handleClick(el, binding), false)
-  },
-  unbind(el) {
-    el.removeEventListener('click', el[context].removeHandle, false)
-    el[context] = null
-    delete el[context]
-  }
-}