@lambo-design/shared 1.0.0-beta.38 → 1.0.0-beta.381

package/directives/module/draggable-menu.js

@@ -0,0 +1,94 @@
+import {on} from '@lambo-design/shared/utils/dom'
+import {buildMenuUri} from '@lambo-design/shared/utils/platform'
+import config from '@lambo-design/shared/config/config'
+
+export default {
+  inserted: (el, binding, vnode) => {
+    let triggerDom = document.querySelector(binding.value.trigger)
+    //triggerDom.style.cursor = 'move'
+    let bodyDom = document.querySelector(binding.value.body)
+    let pageX = 0
+    let pageY = 0
+    let transformX = 0
+    let transformY = 0
+    let canMove = false
+    let hasMove = false
+    const handleMousedown = e => {
+      let transform = /\(.*\)/.exec(bodyDom.style.transform)
+      if (transform) {
+        transform = transform[0].slice(1, transform[0].length - 1)
+        let splitxy = transform.split('px, ')
+        transformX = parseFloat(splitxy[0])
+        transformY = parseFloat(splitxy[1].split('px')[0])
+      }
+      pageX = e.pageX
+      pageY = e.pageY
+      if (!binding.value.hasOwnProperty('canMove') || binding.value.canMove) {
+        canMove = true
+      } else {
+        canMove = false
+      }
+    }
+    const handleMousemove = e => {
+      let xOffset = e.pageX - pageX + transformX
+      let yOffset = e.pageY - pageY + transformY
+      if (canMove) {
+        bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
+        //bodyDom.style.position = `absolute`
+        //bodyDom.style.zIndex = `99999`
+        if ( Math.abs(xOffset) > parseInt(config.draggableMenuConfig.xOffset)
+            || Math.abs(yOffset) > parseInt(config.draggableMenuConfig.yOffset) ) {
+          hasMove = true;
+        }
+      }
+      if (hasMove) {
+        if (binding.value.recover) {
+          let bodyDom = document.querySelector(binding.value.body)
+          bodyDom.style.transform = ''
+          canMove = false
+          hasMove = false
+        }
+        if (binding.value.item) {
+          let item = binding.value.item;
+          if (item.uri) {
+            canMove = false
+            hasMove = false
+            if (binding.value.recover) {
+              let bodyDom = document.querySelector(binding.value.body)
+              bodyDom.style.transform = ''
+            }
+            window.open(buildMenuUri(item))
+          }
+        }
+      }
+    }
+    const handleMouseup = e => {
+      if (binding.value.item && hasMove) {
+        let item = binding.value.item;
+        if (item.uri) {
+          canMove = false
+          hasMove = false
+          if (binding.value.recover) {
+            let bodyDom = document.querySelector(binding.value.body)
+            bodyDom.style.transform = ''
+          }
+          window.open(buildMenuUri(item))
+        }
+      }
+      canMove = false
+      hasMove = false
+      if (binding.value.recover) {
+        let bodyDom = document.querySelector(binding.value.body)
+        bodyDom.style.transform = ''
+      }
+    }
+    on(triggerDom, 'mousedown', handleMousedown)
+    on(triggerDom, 'mousemove', handleMousemove)
+    on(triggerDom, 'mouseup', handleMouseup)
+  },
+  update: (el, binding, vnode) => {
+    if (!binding.value.recover) return
+    let bodyDom = document.querySelector(binding.value.body)
+    bodyDom.style.transform = ''
+  }
+}

package/directives/module/print.js

@@ -0,0 +1 @@
+export { default as print } from './vue-print-nb/print.js'

package/directives/module/vue-print-nb/README.md

@@ -0,0 +1,63 @@
+# vue-print-nb打印组件
+
+这是一个简单方便的打印组件。
+
+## 用法
+HTML:
+```html
+ <div id="printMe">打印我</div>
+
+<!-- 简单用法 -->
+ <button v-print="'#printMe'">打印</button> 
+<!-- 可传参用法 -->
+ <button v-print="printObj">打印</button>
+```
+javascript:
+```javascript
+export default {
+    data() {
+        return {
+            printObj: {
+              id:'' //需要打印的元素
+              ignoreClass:'', //忽视打印的元素
+              beforeOpenCallback (vue) {
+                console.log('打开之前')
+              },
+              openCallback (vue) {
+                console.log('执行了打印')
+              },
+              closeCallback (vue) {
+                console.log('关闭了打印工具')
+              }
+            }
+        };
+    }
+}
+```
+
+## v-print API
+
+| Parame                    | Explain                                                          | Type          | OptionalValue                                     | DefaultValue |
+| ------------------------- | ---------------------------------------------------------------- | ------------- | ------------------------------------------------- | ------------ |
+| id                        | 打印元素的ID                                                     | String        | —                                                 | —            |
+| standard                  | 文档类型（仅打印本地范围）                                       | String        | html5/loose/strict                                | html5        |
+| extraHead                 | `<head></head>`在节点中添加DOM节点，并使用 `,`（仅打印本地范围） | String        | —                                                 | —            |
+| extraCss                  | `<link>` 新的CSS样式表，并使用 `,`（仅打印本地范围）             | String        | —                                                 | -            |
+| popTitle                  | `<title></title>` 标签内容 （仅打印本地范围）                    | String        | —                                                 | -            |
+| openCallback              | 调用打印工具的成功回调函数                                       | Function      | Returns the instance of `Vue` called at that time | -            |
+| closeCallback             | 关闭打印工具成功的回调函数                                       | Function      | Returns the instance of `Vue` called at that time | -            |
+| beforeOpenCallback        | 调用打印工具前的回调函数                                         | Function      | Returns the instance of `Vue` called at that time | -            |
+| url                       | 打印指定的URL。（不允许同时设置ID）                              | string        | -                                                 | -            |
+| asyncUrl                  | Return URL through 'resolve()' and Vue                           | Function      | -                                                 | -            |
+| preview                   | 预览工具                                                         | Boolean       | -                                                 | false        |
+| previewTitle              | 预览工具标题                                                     | String        | -                                                 | '打印预览'   |
+| previewPrintBtnLabel      | 预览工具按钮的名称                                               | String        | -                                                 | '打印'       |
+| zIndex                    | 预览工具的CSS:索引                                               | String,Number | -                                                 | 20002        |
+| previewBeforeOpenCallback | 启动预览工具前的回调函数                                         | Function      | Returns the instance of `Vue`                     | -            |
+| previewOpenCallback       | 完全打开预览工具后的回调函数                                     | Function      | Returns the instance of `Vue`                     | -            |
+| clickMounted              | 单击打印按钮的回调函数                                           | Function      | Returns the instance of `Vue`                     | -            |
+
+
+源码存放在components\vue-print-nb\src\packages下，如果想修改可以参考以下文章：
+
+[博客园](https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html)

package/directives/module/vue-print-nb/print.js

@@ -0,0 +1,94 @@
+/*
+ * @Author: lee
+ * @Date: 2021-05-10 11:45:50
+ * @LastEditors: lee
+ * @LastEditTime: 2021-05-20 15:39:43
+ * @Description: file content
+ */
+import Print from './printarea.js'
+/**
+ * @file 打印
+ * 指令`v-print`,默认打印整个窗口
+ * 传入参数`v-print="'#id'"` , 参数为需要打印局部的盒子标识.
+ */
+const addEvent = (element, type, callback) => {
+  if (element.addEventListener) {
+    element.addEventListener(type, callback, false)
+  } else if (element.attachEvent) {
+    element.attachEvent('on' + type, callback)
+  } else {
+    element['on' + type] = callback
+  }
+}
+export default {
+  directiveName: 'print',
+  bind(el, binding, vnode) {
+    let vue = vnode.context
+    let id = ''
+    addEvent(el, 'click', () => {
+      vue.$nextTick(() => {
+        // if (binding?.value?.clickMounted) {
+        //   binding.value.clickMounted(vue)
+        // }
+        if (binding && binding.value && typeof binding.value.clickMounted === 'function') {
+          binding.value.clickMounted(vue);
+        }
+        if (typeof binding.value === 'string') {
+          // 全局打印
+          id = binding.value
+          localPrint()
+        } else if (typeof binding.value === 'object' && !!binding.value.id) {
+          // 局部打印
+          id = binding.value.id
+          let ids = id.replace(new RegExp('#', 'g'), '')
+          let elsdom = document.getElementById(ids)
+          if (!elsdom) console.log('id in Error'), (id = '')
+          localPrint()
+        // } else if (binding?.value?.preview) {
+        } else if (binding && binding.value && binding.value.preview) {
+          localPrint()
+        } else {
+          window.print()
+          return
+        }
+      })
+    })
+
+    const localPrint = () => {
+      new Print({
+        ids: id, // * 局部打印必传入id
+        vue,
+        url: binding.value.url, // 打印指定的网址，这里不能跟id共存 如果共存id的优先级会比较高
+        standard: '', // 文档类型，默认是html5，可选 html5，loose，strict
+        extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
+        extraCss: binding.value.extraCss, // 额外的css连接，多个逗号分开
+        previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
+        zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
+        previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题
+        popTitle: binding.value.popTitle, // title的标题
+        preview: binding.value.preview || false, // 是否启动预览模式
+        asyncUrl: binding.value.asyncUrl,
+        ignoreClass: binding.value.ignoreClass, //不打印的元素
+        fontFamily: binding.value.fontFamily, // 打印字体
+        previewBeforeOpenCallback() {
+          // 预览窗口打开之前的callback
+          binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
+        },
+        previewOpenCallback() {
+          // 预览窗口打开之后的callback
+          binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
+        },
+        openCallback() {
+          // 调用打印之后的回调事件
+          binding.value.openCallback && binding.value.openCallback(vue)
+        },
+        closeCallback() {
+          binding.value.closeCallback && binding.value.closeCallback(vue)
+        },
+        beforeOpenCallback() {
+          binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)
+        },
+      })
+    }
+  },
+}