@lambo-design/shared 1.0.0-beta.241 → 1.0.0-beta.243
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/config/config.js +51 -51
- package/config/env.js +4 -4
- package/config/index.js +7 -7
- package/config/themes/atrovirens/atrovirens.less +667 -667
- package/config/themes/atrovirens/var.less +674 -674
- package/config/themes/blue/blue.less +669 -669
- package/config/themes/blue/var.less +677 -677
- package/config/themes/blue-white/blue-white.less +669 -669
- package/config/themes/blue-white/var.less +676 -676
- package/config/themes/blue-white-tight/blue-white-tight.less +672 -672
- package/config/themes/blue-white-tight/var.less +677 -677
- package/config/themes/danqing/danqing.less +668 -668
- package/config/themes/danqing/danqing.wxss +572 -572
- package/config/themes/danqing/var.less +679 -679
- package/config/themes/deep/deep.less +669 -669
- package/config/themes/deep/var.less +677 -677
- package/config/themes/default/default.less +671 -671
- package/config/themes/default/var.less +677 -677
- package/config/themes/eap/eap.less +671 -671
- package/config/themes/eap/var.less +677 -677
- package/config/themes/gold/gold.less +671 -671
- package/config/themes/gold/var.less +677 -677
- package/config/themes/index.js +28 -28
- package/config/themes/lime/lime.less +671 -671
- package/config/themes/lime/var.less +678 -678
- package/config/themes/orange/orange.less +671 -671
- package/config/themes/orange/var.less +678 -678
- package/config/themes/red/red.less +671 -671
- package/config/themes/red/var.less +677 -677
- package/config/themes/theme-atrovirens.js +558 -558
- package/config/themes/theme-blue.js +558 -558
- package/config/themes/theme-bw.js +558 -558
- package/config/themes/theme-bwt.js +559 -559
- package/config/themes/theme-danqing.js +558 -558
- package/config/themes/theme-deep.js +558 -558
- package/config/themes/theme-default.js +558 -558
- package/config/themes/theme-eap.js +558 -558
- package/config/themes/theme-gold.js +558 -558
- package/config/themes/theme-lime.js +558 -558
- package/config/themes/theme-orange.js +559 -559
- package/config/themes/theme-red.js +558 -558
- package/config/themes/theme-white.js +557 -557
- package/config/themes/white/var.less +675 -675
- package/config/themes/white/white.less +668 -668
- package/directives/index.js +23 -23
- package/directives/module/draggable.js +56 -56
- package/directives/module/permission.js +49 -49
- package/directives/module/print.js +1 -1
- package/directives/module/vue-print-nb/README.md +63 -63
- package/directives/module/vue-print-nb/print.js +94 -94
- package/directives/module/vue-print-nb/printarea.js +532 -532
- package/index.js +10 -10
- package/nstyles/common.less +197 -197
- package/nstyles/components/404.less +46 -46
- package/nstyles/components/button.less +34 -34
- package/nstyles/components/date-picker.less +37 -37
- package/nstyles/components/drawer.less +20 -20
- package/nstyles/components/dropdown.less +18 -18
- package/nstyles/components/excel-flow.less +72 -72
- package/nstyles/components/form.less +313 -313
- package/nstyles/components/index.less +23 -23
- package/nstyles/components/layout/collect.less +10 -10
- package/nstyles/components/layout/detail-view.less +107 -107
- package/nstyles/components/layout/full-screen.less +7 -7
- package/nstyles/components/layout/index.less +7 -7
- package/nstyles/components/layout/other-menu.less +142 -142
- package/nstyles/components/layout/page-view.less +101 -101
- package/nstyles/components/layout/sider-trigger.less +41 -41
- package/nstyles/components/layout/tags-nav.less +113 -113
- package/nstyles/components/modal.less +85 -85
- package/nstyles/components/n-button.less +131 -131
- package/nstyles/components/n-image-preview.less +131 -131
- package/nstyles/components/n-model/index.less +19 -19
- package/nstyles/components/n-model/report-index.less +43 -43
- package/nstyles/components/n-panel.less +40 -40
- package/nstyles/components/n-picker.less +37 -37
- package/nstyles/components/n-sign.less +17 -17
- package/nstyles/components/n-tooltip.less +10 -10
- package/nstyles/components/panel.less +31 -31
- package/nstyles/components/select.less +3 -3
- package/nstyles/components/sign.less +27 -27
- package/nstyles/components/table.less +315 -315
- package/nstyles/components/tree.less +158 -158
- package/nstyles/components/upload.less +164 -164
- package/nstyles/index.less +5 -5
- package/nstyles/reset.less +65 -65
- package/nstyles/third/ag.less +174 -174
- package/nstyles/third/index.less +11 -11
- package/nstyles/third/view-design.less +366 -366
- package/nstyles/variables/base.less +143 -143
- package/nstyles/variables/index.less +4 -4
- package/nstyles/variables/theme/default/button.less +7 -7
- package/nstyles/variables/theme/default/common.less +57 -57
- package/nstyles/variables/theme/default/index.less +7 -7
- package/nstyles/variables/theme/default/layout.less +40 -40
- package/nstyles/variables/theme/default/table.less +37 -37
- package/nstyles/variables/theme/default/tag.less +3 -3
- package/nstyles/variables/theme/default/upload.less +3 -3
- package/nstyles/variables/theme/index.less +13 -13
- package/nstyles/variables/theme/small/button.less +7 -7
- package/nstyles/variables/theme/small/common.less +39 -39
- package/nstyles/variables/theme/small/index.less +5 -5
- package/nstyles/variables/theme/small/layout.less +21 -21
- package/nstyles/variables/theme/small/table.less +17 -17
- package/nstyles/variables/theme/small/tag.less +3 -3
- package/package.json +1 -1
- package/plugin/index.js +12 -12
- package/plugin/module/date-format.js +30 -30
- package/plugin/module/loading.js +26 -26
- package/plugin/module/warn-handler.js +11 -11
- package/styles/variables.less +21 -21
- package/utils/ajax/cacheconf.js +19 -19
- package/utils/ajax/content-type.js +30 -30
- package/utils/ajax/index.js +12 -12
- package/utils/ajax/interceptors.js +97 -97
- package/utils/assist.js +147 -147
- package/utils/base64.js +126 -126
- package/utils/blob.js +47 -47
- package/utils/bus.js +3 -3
- package/utils/crypto/index.js +48 -48
- package/utils/crypto/md5.js +152 -152
- package/utils/crypto/sm3.js +235 -235
- package/utils/date.js +381 -381
- package/utils/dict/built-in-dict.js +20 -20
- package/utils/dict/index.js +167 -167
- package/utils/dom.js +38 -38
- package/utils/event.js +72 -72
- package/utils/excel.js +655 -655
- package/utils/file.js +19 -19
- package/utils/form/validate.js +29 -29
- package/utils/half-year.js +68 -68
- package/utils/index.js +41 -41
- package/utils/json.js +29 -29
- package/utils/lodop.js +165 -165
- package/utils/menu/before-close.js +17 -17
- package/utils/menu/index.js +395 -395
- package/utils/mime_type.js +67 -67
- package/utils/modelerUtil.js +227 -227
- package/utils/n/api.js +22 -22
- package/utils/n/date.js +57 -57
- package/utils/n/index.js +9 -9
- package/utils/n/is-type.js +176 -176
- package/utils/n/number.js +144 -144
- package/utils/n/permission-cache.js +11 -11
- package/utils/n/reuqest/axiosN.js +17 -17
- package/utils/n/reuqest/content-type.js +19 -19
- package/utils/n/reuqest/interceptors.js +95 -95
- package/utils/n/reuqest/url-params.js +12 -12
- package/utils/n/storage.js +51 -51
- package/utils/n/token.js +51 -51
- package/utils/n/user-cache.js +11 -11
- package/utils/n/user.js +34 -34
- package/utils/n/uuid.js +16 -16
- package/utils/n-generator-routers.js +208 -208
- package/utils/n-router.js +205 -205
- package/utils/n-theme.js +30 -30
- package/utils/number.js +180 -180
- package/utils/oss.js +57 -57
- package/utils/platform.js +1334 -1334
- package/utils/quarter.js +58 -58
- package/utils/storage.js +198 -198
- package/utils/style.js +24 -24
- package/utils/theme.js +138 -138
- package/utils/transfer-queue.js +7 -7
- package/utils/transform.js +204 -204
- package/utils/type.js +102 -102
- package/utils/util.js +795 -795
- package/utils/validator.js +181 -181
- package/utils/vxetable/index.js +25 -25
- package/utils/zoomScroll.js +9 -9
package/directives/index.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
const importDirective = Vue => {
|
|
2
|
-
const requireDirective = require.context(
|
|
3
|
-
// 其组件目录的相对路径
|
|
4
|
-
'./module',
|
|
5
|
-
// 是否查询其子目录
|
|
6
|
-
false,
|
|
7
|
-
// 匹配基础组件文件名的正则表达式
|
|
8
|
-
/[a-zA-Z]\w+\.(vue|js)$/
|
|
9
|
-
)
|
|
10
|
-
requireDirective.keys().forEach(fileName => {
|
|
11
|
-
// 获取组件配置
|
|
12
|
-
const directiveConfig = requireDirective(fileName)
|
|
13
|
-
|
|
14
|
-
// 获取组件的 PascalCase 命名
|
|
15
|
-
const directiveName = fileName
|
|
16
|
-
.split('/')
|
|
17
|
-
.pop()
|
|
18
|
-
.replace(/\.\w+$/, '')
|
|
19
|
-
Vue.directive(directiveName.toLowerCase(), directiveConfig.default || directiveConfig);
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export default importDirective
|
|
1
|
+
const importDirective = Vue => {
|
|
2
|
+
const requireDirective = require.context(
|
|
3
|
+
// 其组件目录的相对路径
|
|
4
|
+
'./module',
|
|
5
|
+
// 是否查询其子目录
|
|
6
|
+
false,
|
|
7
|
+
// 匹配基础组件文件名的正则表达式
|
|
8
|
+
/[a-zA-Z]\w+\.(vue|js)$/
|
|
9
|
+
)
|
|
10
|
+
requireDirective.keys().forEach(fileName => {
|
|
11
|
+
// 获取组件配置
|
|
12
|
+
const directiveConfig = requireDirective(fileName)
|
|
13
|
+
|
|
14
|
+
// 获取组件的 PascalCase 命名
|
|
15
|
+
const directiveName = fileName
|
|
16
|
+
.split('/')
|
|
17
|
+
.pop()
|
|
18
|
+
.replace(/\.\w+$/, '')
|
|
19
|
+
Vue.directive(directiveName.toLowerCase(), directiveConfig.default || directiveConfig);
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default importDirective
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import {on} from '../../utils/dom'
|
|
2
|
-
/**
|
|
3
|
-
* 拖拽指令 v-draggable="options"
|
|
4
|
-
* options = {
|
|
5
|
-
* trigger: /这里传入作为拖拽触发器的CSS选择器/,
|
|
6
|
-
* body: /这里传入需要移动容器的CSS选择器/,
|
|
7
|
-
* recover: /拖动结束之后是否恢复到原来的位置/
|
|
8
|
-
* }
|
|
9
|
-
*/
|
|
10
|
-
export default {
|
|
11
|
-
inserted: (el, binding, vnode) => {
|
|
12
|
-
let triggerDom = document.querySelector(binding.value.trigger)
|
|
13
|
-
triggerDom.style.cursor = 'move'
|
|
14
|
-
let bodyDom = document.querySelector(binding.value.body)
|
|
15
|
-
let pageX = 0
|
|
16
|
-
let pageY = 0
|
|
17
|
-
let transformX = 0
|
|
18
|
-
let transformY = 0
|
|
19
|
-
let canMove = false
|
|
20
|
-
const handleMousedown = e => {
|
|
21
|
-
let transform = /\(.*\)/.exec(bodyDom.style.transform)
|
|
22
|
-
if (transform) {
|
|
23
|
-
transform = transform[0].slice(1, transform[0].length - 1)
|
|
24
|
-
let splitxy = transform.split('px, ')
|
|
25
|
-
transformX = parseFloat(splitxy[0])
|
|
26
|
-
transformY = parseFloat(splitxy[1].split('px')[0])
|
|
27
|
-
}
|
|
28
|
-
pageX = e.pageX
|
|
29
|
-
pageY = e.pageY
|
|
30
|
-
canMove = true
|
|
31
|
-
}
|
|
32
|
-
const handleMousemove = e => {
|
|
33
|
-
let xOffset = e.pageX - pageX + transformX
|
|
34
|
-
let yOffset = e.pageY - pageY + transformY
|
|
35
|
-
/*if (e.pageX <= 0) {
|
|
36
|
-
xOffset = pageX
|
|
37
|
-
}*/
|
|
38
|
-
if (e.pageY <= 0) {
|
|
39
|
-
yOffset = transformY - pageY
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
|
|
43
|
-
}
|
|
44
|
-
const handleMouseup = e => {
|
|
45
|
-
canMove = false
|
|
46
|
-
}
|
|
47
|
-
on(triggerDom, 'mousedown', handleMousedown)
|
|
48
|
-
on(document, 'mousemove', handleMousemove)
|
|
49
|
-
on(document, 'mouseup', handleMouseup)
|
|
50
|
-
},
|
|
51
|
-
update: (el, binding, vnode) => {
|
|
52
|
-
if (!binding.value.recover) return
|
|
53
|
-
let bodyDom = document.querySelector(binding.value.body)
|
|
54
|
-
bodyDom.style.transform = ''
|
|
55
|
-
}
|
|
56
|
-
}
|
|
1
|
+
import {on} from '../../utils/dom'
|
|
2
|
+
/**
|
|
3
|
+
* 拖拽指令 v-draggable="options"
|
|
4
|
+
* options = {
|
|
5
|
+
* trigger: /这里传入作为拖拽触发器的CSS选择器/,
|
|
6
|
+
* body: /这里传入需要移动容器的CSS选择器/,
|
|
7
|
+
* recover: /拖动结束之后是否恢复到原来的位置/
|
|
8
|
+
* }
|
|
9
|
+
*/
|
|
10
|
+
export default {
|
|
11
|
+
inserted: (el, binding, vnode) => {
|
|
12
|
+
let triggerDom = document.querySelector(binding.value.trigger)
|
|
13
|
+
triggerDom.style.cursor = 'move'
|
|
14
|
+
let bodyDom = document.querySelector(binding.value.body)
|
|
15
|
+
let pageX = 0
|
|
16
|
+
let pageY = 0
|
|
17
|
+
let transformX = 0
|
|
18
|
+
let transformY = 0
|
|
19
|
+
let canMove = false
|
|
20
|
+
const handleMousedown = e => {
|
|
21
|
+
let transform = /\(.*\)/.exec(bodyDom.style.transform)
|
|
22
|
+
if (transform) {
|
|
23
|
+
transform = transform[0].slice(1, transform[0].length - 1)
|
|
24
|
+
let splitxy = transform.split('px, ')
|
|
25
|
+
transformX = parseFloat(splitxy[0])
|
|
26
|
+
transformY = parseFloat(splitxy[1].split('px')[0])
|
|
27
|
+
}
|
|
28
|
+
pageX = e.pageX
|
|
29
|
+
pageY = e.pageY
|
|
30
|
+
canMove = true
|
|
31
|
+
}
|
|
32
|
+
const handleMousemove = e => {
|
|
33
|
+
let xOffset = e.pageX - pageX + transformX
|
|
34
|
+
let yOffset = e.pageY - pageY + transformY
|
|
35
|
+
/*if (e.pageX <= 0) {
|
|
36
|
+
xOffset = pageX
|
|
37
|
+
}*/
|
|
38
|
+
if (e.pageY <= 0) {
|
|
39
|
+
yOffset = transformY - pageY
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
|
|
43
|
+
}
|
|
44
|
+
const handleMouseup = e => {
|
|
45
|
+
canMove = false
|
|
46
|
+
}
|
|
47
|
+
on(triggerDom, 'mousedown', handleMousedown)
|
|
48
|
+
on(document, 'mousemove', handleMousemove)
|
|
49
|
+
on(document, 'mouseup', handleMouseup)
|
|
50
|
+
},
|
|
51
|
+
update: (el, binding, vnode) => {
|
|
52
|
+
if (!binding.value.recover) return
|
|
53
|
+
let bodyDom = document.querySelector(binding.value.body)
|
|
54
|
+
bodyDom.style.transform = ''
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import config from "../../config/config";
|
|
2
|
-
|
|
3
|
-
const checkPermission = function (el, binding) {
|
|
4
|
-
el.style.display = "none"
|
|
5
|
-
const value = binding.value
|
|
6
|
-
const permissionInStore = sessionStorage.getItem(config.routerBase + "-permission");
|
|
7
|
-
if (permissionInStore) {
|
|
8
|
-
const permissionObj = JSON.parse(permissionInStore);
|
|
9
|
-
//判断是否以'/'为开头结尾
|
|
10
|
-
if (/(^\/.*\/$)/.test(value)) {
|
|
11
|
-
//去掉开头结尾的'/'
|
|
12
|
-
let regexStr = value.replace(/(^\/)|(\/$)/g,"");
|
|
13
|
-
|
|
14
|
-
regExCheck(el, permissionObj, regexStr)
|
|
15
|
-
} else {
|
|
16
|
-
normalCheck(el, permissionObj, value)
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
const regExCheck = function (el, permissionObj, value) {
|
|
22
|
-
let regex = new RegExp(value,"i");
|
|
23
|
-
for (const item of permissionObj) {
|
|
24
|
-
if (item.permissionValue) {
|
|
25
|
-
if(regex.test(item.permissionValue)){
|
|
26
|
-
console.log(item.permissionValue)
|
|
27
|
-
el.style.display = '';
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const normalCheck = function (el, permissionObj, value) {
|
|
34
|
-
let permission = {};
|
|
35
|
-
for (const item of permissionObj) {
|
|
36
|
-
if (item.permissionValue) {
|
|
37
|
-
permission[item.permissionValue] = true;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
const have = permission[value]
|
|
41
|
-
if (have || value === "all") {
|
|
42
|
-
el.style.display = '';
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export default {
|
|
47
|
-
bind: checkPermission,
|
|
48
|
-
update: checkPermission
|
|
49
|
-
}
|
|
1
|
+
import config from "../../config/config";
|
|
2
|
+
|
|
3
|
+
const checkPermission = function (el, binding) {
|
|
4
|
+
el.style.display = "none"
|
|
5
|
+
const value = binding.value
|
|
6
|
+
const permissionInStore = sessionStorage.getItem(config.routerBase + "-permission");
|
|
7
|
+
if (permissionInStore) {
|
|
8
|
+
const permissionObj = JSON.parse(permissionInStore);
|
|
9
|
+
//判断是否以'/'为开头结尾
|
|
10
|
+
if (/(^\/.*\/$)/.test(value)) {
|
|
11
|
+
//去掉开头结尾的'/'
|
|
12
|
+
let regexStr = value.replace(/(^\/)|(\/$)/g,"");
|
|
13
|
+
|
|
14
|
+
regExCheck(el, permissionObj, regexStr)
|
|
15
|
+
} else {
|
|
16
|
+
normalCheck(el, permissionObj, value)
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const regExCheck = function (el, permissionObj, value) {
|
|
22
|
+
let regex = new RegExp(value,"i");
|
|
23
|
+
for (const item of permissionObj) {
|
|
24
|
+
if (item.permissionValue) {
|
|
25
|
+
if(regex.test(item.permissionValue)){
|
|
26
|
+
console.log(item.permissionValue)
|
|
27
|
+
el.style.display = '';
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
const normalCheck = function (el, permissionObj, value) {
|
|
34
|
+
let permission = {};
|
|
35
|
+
for (const item of permissionObj) {
|
|
36
|
+
if (item.permissionValue) {
|
|
37
|
+
permission[item.permissionValue] = true;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
const have = permission[value]
|
|
41
|
+
if (have || value === "all") {
|
|
42
|
+
el.style.display = '';
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export default {
|
|
47
|
+
bind: checkPermission,
|
|
48
|
+
update: checkPermission
|
|
49
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as print } from './vue-print-nb/print.js'
|
|
1
|
+
export { default as print } from './vue-print-nb/print.js'
|
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
# vue-print-nb打印组件
|
|
2
|
-
|
|
3
|
-
这是一个简单方便的打印组件。
|
|
4
|
-
|
|
5
|
-
## 用法
|
|
6
|
-
HTML:
|
|
7
|
-
```html
|
|
8
|
-
<div id="printMe">打印我</div>
|
|
9
|
-
|
|
10
|
-
<!-- 简单用法 -->
|
|
11
|
-
<button v-print="'#printMe'">打印</button>
|
|
12
|
-
<!-- 可传参用法 -->
|
|
13
|
-
<button v-print="printObj">打印</button>
|
|
14
|
-
```
|
|
15
|
-
javascript:
|
|
16
|
-
```javascript
|
|
17
|
-
export default {
|
|
18
|
-
data() {
|
|
19
|
-
return {
|
|
20
|
-
printObj: {
|
|
21
|
-
id:'' //需要打印的元素
|
|
22
|
-
ignoreClass:'', //忽视打印的元素
|
|
23
|
-
beforeOpenCallback (vue) {
|
|
24
|
-
console.log('打开之前')
|
|
25
|
-
},
|
|
26
|
-
openCallback (vue) {
|
|
27
|
-
console.log('执行了打印')
|
|
28
|
-
},
|
|
29
|
-
closeCallback (vue) {
|
|
30
|
-
console.log('关闭了打印工具')
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## v-print API
|
|
39
|
-
|
|
40
|
-
| Parame | Explain | Type | OptionalValue | DefaultValue |
|
|
41
|
-
| ------------------------- | ---------------------------------------------------------------- | ------------- | ------------------------------------------------- | ------------ |
|
|
42
|
-
| id | 打印元素的ID | String | — | — |
|
|
43
|
-
| standard | 文档类型(仅打印本地范围) | String | html5/loose/strict | html5 |
|
|
44
|
-
| extraHead | `<head></head>`在节点中添加DOM节点,并使用 `,`(仅打印本地范围) | String | — | — |
|
|
45
|
-
| extraCss | `<link>` 新的CSS样式表,并使用 `,`(仅打印本地范围) | String | — | - |
|
|
46
|
-
| popTitle | `<title></title>` 标签内容 (仅打印本地范围) | String | — | - |
|
|
47
|
-
| openCallback | 调用打印工具的成功回调函数 | Function | Returns the instance of `Vue` called at that time | - |
|
|
48
|
-
| closeCallback | 关闭打印工具成功的回调函数 | Function | Returns the instance of `Vue` called at that time | - |
|
|
49
|
-
| beforeOpenCallback | 调用打印工具前的回调函数 | Function | Returns the instance of `Vue` called at that time | - |
|
|
50
|
-
| url | 打印指定的URL。(不允许同时设置ID) | string | - | - |
|
|
51
|
-
| asyncUrl | Return URL through 'resolve()' and Vue | Function | - | - |
|
|
52
|
-
| preview | 预览工具 | Boolean | - | false |
|
|
53
|
-
| previewTitle | 预览工具标题 | String | - | '打印预览' |
|
|
54
|
-
| previewPrintBtnLabel | 预览工具按钮的名称 | String | - | '打印' |
|
|
55
|
-
| zIndex | 预览工具的CSS:索引 | String,Number | - | 20002 |
|
|
56
|
-
| previewBeforeOpenCallback | 启动预览工具前的回调函数 | Function | Returns the instance of `Vue` | - |
|
|
57
|
-
| previewOpenCallback | 完全打开预览工具后的回调函数 | Function | Returns the instance of `Vue` | - |
|
|
58
|
-
| clickMounted | 单击打印按钮的回调函数 | Function | Returns the instance of `Vue` | - |
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
源码存放在components\vue-print-nb\src\packages下,如果想修改可以参考以下文章:
|
|
62
|
-
|
|
63
|
-
[博客园](https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html)
|
|
1
|
+
# vue-print-nb打印组件
|
|
2
|
+
|
|
3
|
+
这是一个简单方便的打印组件。
|
|
4
|
+
|
|
5
|
+
## 用法
|
|
6
|
+
HTML:
|
|
7
|
+
```html
|
|
8
|
+
<div id="printMe">打印我</div>
|
|
9
|
+
|
|
10
|
+
<!-- 简单用法 -->
|
|
11
|
+
<button v-print="'#printMe'">打印</button>
|
|
12
|
+
<!-- 可传参用法 -->
|
|
13
|
+
<button v-print="printObj">打印</button>
|
|
14
|
+
```
|
|
15
|
+
javascript:
|
|
16
|
+
```javascript
|
|
17
|
+
export default {
|
|
18
|
+
data() {
|
|
19
|
+
return {
|
|
20
|
+
printObj: {
|
|
21
|
+
id:'' //需要打印的元素
|
|
22
|
+
ignoreClass:'', //忽视打印的元素
|
|
23
|
+
beforeOpenCallback (vue) {
|
|
24
|
+
console.log('打开之前')
|
|
25
|
+
},
|
|
26
|
+
openCallback (vue) {
|
|
27
|
+
console.log('执行了打印')
|
|
28
|
+
},
|
|
29
|
+
closeCallback (vue) {
|
|
30
|
+
console.log('关闭了打印工具')
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## v-print API
|
|
39
|
+
|
|
40
|
+
| Parame | Explain | Type | OptionalValue | DefaultValue |
|
|
41
|
+
| ------------------------- | ---------------------------------------------------------------- | ------------- | ------------------------------------------------- | ------------ |
|
|
42
|
+
| id | 打印元素的ID | String | — | — |
|
|
43
|
+
| standard | 文档类型(仅打印本地范围) | String | html5/loose/strict | html5 |
|
|
44
|
+
| extraHead | `<head></head>`在节点中添加DOM节点,并使用 `,`(仅打印本地范围) | String | — | — |
|
|
45
|
+
| extraCss | `<link>` 新的CSS样式表,并使用 `,`(仅打印本地范围) | String | — | - |
|
|
46
|
+
| popTitle | `<title></title>` 标签内容 (仅打印本地范围) | String | — | - |
|
|
47
|
+
| openCallback | 调用打印工具的成功回调函数 | Function | Returns the instance of `Vue` called at that time | - |
|
|
48
|
+
| closeCallback | 关闭打印工具成功的回调函数 | Function | Returns the instance of `Vue` called at that time | - |
|
|
49
|
+
| beforeOpenCallback | 调用打印工具前的回调函数 | Function | Returns the instance of `Vue` called at that time | - |
|
|
50
|
+
| url | 打印指定的URL。(不允许同时设置ID) | string | - | - |
|
|
51
|
+
| asyncUrl | Return URL through 'resolve()' and Vue | Function | - | - |
|
|
52
|
+
| preview | 预览工具 | Boolean | - | false |
|
|
53
|
+
| previewTitle | 预览工具标题 | String | - | '打印预览' |
|
|
54
|
+
| previewPrintBtnLabel | 预览工具按钮的名称 | String | - | '打印' |
|
|
55
|
+
| zIndex | 预览工具的CSS:索引 | String,Number | - | 20002 |
|
|
56
|
+
| previewBeforeOpenCallback | 启动预览工具前的回调函数 | Function | Returns the instance of `Vue` | - |
|
|
57
|
+
| previewOpenCallback | 完全打开预览工具后的回调函数 | Function | Returns the instance of `Vue` | - |
|
|
58
|
+
| clickMounted | 单击打印按钮的回调函数 | Function | Returns the instance of `Vue` | - |
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
源码存放在components\vue-print-nb\src\packages下,如果想修改可以参考以下文章:
|
|
62
|
+
|
|
63
|
+
[博客园](https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html)
|
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: lee
|
|
3
|
-
* @Date: 2021-05-10 11:45:50
|
|
4
|
-
* @LastEditors: lee
|
|
5
|
-
* @LastEditTime: 2021-05-20 15:39:43
|
|
6
|
-
* @Description: file content
|
|
7
|
-
*/
|
|
8
|
-
import Print from './printarea.js'
|
|
9
|
-
/**
|
|
10
|
-
* @file 打印
|
|
11
|
-
* 指令`v-print`,默认打印整个窗口
|
|
12
|
-
* 传入参数`v-print="'#id'"` , 参数为需要打印局部的盒子标识.
|
|
13
|
-
*/
|
|
14
|
-
const addEvent = (element, type, callback) => {
|
|
15
|
-
if (element.addEventListener) {
|
|
16
|
-
element.addEventListener(type, callback, false)
|
|
17
|
-
} else if (element.attachEvent) {
|
|
18
|
-
element.attachEvent('on' + type, callback)
|
|
19
|
-
} else {
|
|
20
|
-
element['on' + type] = callback
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
export default {
|
|
24
|
-
directiveName: 'print',
|
|
25
|
-
bind(el, binding, vnode) {
|
|
26
|
-
let vue = vnode.context
|
|
27
|
-
let id = ''
|
|
28
|
-
addEvent(el, 'click', () => {
|
|
29
|
-
vue.$nextTick(() => {
|
|
30
|
-
// if (binding?.value?.clickMounted) {
|
|
31
|
-
// binding.value.clickMounted(vue)
|
|
32
|
-
// }
|
|
33
|
-
if (binding && binding.value && typeof binding.value.clickMounted === 'function') {
|
|
34
|
-
binding.value.clickMounted(vue);
|
|
35
|
-
}
|
|
36
|
-
if (typeof binding.value === 'string') {
|
|
37
|
-
// 全局打印
|
|
38
|
-
id = binding.value
|
|
39
|
-
localPrint()
|
|
40
|
-
} else if (typeof binding.value === 'object' && !!binding.value.id) {
|
|
41
|
-
// 局部打印
|
|
42
|
-
id = binding.value.id
|
|
43
|
-
let ids = id.replace(new RegExp('#', 'g'), '')
|
|
44
|
-
let elsdom = document.getElementById(ids)
|
|
45
|
-
if (!elsdom) console.log('id in Error'), (id = '')
|
|
46
|
-
localPrint()
|
|
47
|
-
// } else if (binding?.value?.preview) {
|
|
48
|
-
} else if (binding && binding.value && binding.value.preview) {
|
|
49
|
-
localPrint()
|
|
50
|
-
} else {
|
|
51
|
-
window.print()
|
|
52
|
-
return
|
|
53
|
-
}
|
|
54
|
-
})
|
|
55
|
-
})
|
|
56
|
-
|
|
57
|
-
const localPrint = () => {
|
|
58
|
-
new Print({
|
|
59
|
-
ids: id, // * 局部打印必传入id
|
|
60
|
-
vue,
|
|
61
|
-
url: binding.value.url, // 打印指定的网址,这里不能跟id共存 如果共存id的优先级会比较高
|
|
62
|
-
standard: '', // 文档类型,默认是html5,可选 html5,loose,strict
|
|
63
|
-
extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
|
|
64
|
-
extraCss: binding.value.extraCss, // 额外的css连接,多个逗号分开
|
|
65
|
-
previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
|
|
66
|
-
zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
|
|
67
|
-
previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题
|
|
68
|
-
popTitle: binding.value.popTitle, // title的标题
|
|
69
|
-
preview: binding.value.preview || false, // 是否启动预览模式
|
|
70
|
-
asyncUrl: binding.value.asyncUrl,
|
|
71
|
-
ignoreClass: binding.value.ignoreClass, //不打印的元素
|
|
72
|
-
fontFamily: binding.value.fontFamily, // 打印字体
|
|
73
|
-
previewBeforeOpenCallback() {
|
|
74
|
-
// 预览窗口打开之前的callback
|
|
75
|
-
binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
|
|
76
|
-
},
|
|
77
|
-
previewOpenCallback() {
|
|
78
|
-
// 预览窗口打开之后的callback
|
|
79
|
-
binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
|
|
80
|
-
},
|
|
81
|
-
openCallback() {
|
|
82
|
-
// 调用打印之后的回调事件
|
|
83
|
-
binding.value.openCallback && binding.value.openCallback(vue)
|
|
84
|
-
},
|
|
85
|
-
closeCallback() {
|
|
86
|
-
binding.value.closeCallback && binding.value.closeCallback(vue)
|
|
87
|
-
},
|
|
88
|
-
beforeOpenCallback() {
|
|
89
|
-
binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)
|
|
90
|
-
},
|
|
91
|
-
})
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: lee
|
|
3
|
+
* @Date: 2021-05-10 11:45:50
|
|
4
|
+
* @LastEditors: lee
|
|
5
|
+
* @LastEditTime: 2021-05-20 15:39:43
|
|
6
|
+
* @Description: file content
|
|
7
|
+
*/
|
|
8
|
+
import Print from './printarea.js'
|
|
9
|
+
/**
|
|
10
|
+
* @file 打印
|
|
11
|
+
* 指令`v-print`,默认打印整个窗口
|
|
12
|
+
* 传入参数`v-print="'#id'"` , 参数为需要打印局部的盒子标识.
|
|
13
|
+
*/
|
|
14
|
+
const addEvent = (element, type, callback) => {
|
|
15
|
+
if (element.addEventListener) {
|
|
16
|
+
element.addEventListener(type, callback, false)
|
|
17
|
+
} else if (element.attachEvent) {
|
|
18
|
+
element.attachEvent('on' + type, callback)
|
|
19
|
+
} else {
|
|
20
|
+
element['on' + type] = callback
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
export default {
|
|
24
|
+
directiveName: 'print',
|
|
25
|
+
bind(el, binding, vnode) {
|
|
26
|
+
let vue = vnode.context
|
|
27
|
+
let id = ''
|
|
28
|
+
addEvent(el, 'click', () => {
|
|
29
|
+
vue.$nextTick(() => {
|
|
30
|
+
// if (binding?.value?.clickMounted) {
|
|
31
|
+
// binding.value.clickMounted(vue)
|
|
32
|
+
// }
|
|
33
|
+
if (binding && binding.value && typeof binding.value.clickMounted === 'function') {
|
|
34
|
+
binding.value.clickMounted(vue);
|
|
35
|
+
}
|
|
36
|
+
if (typeof binding.value === 'string') {
|
|
37
|
+
// 全局打印
|
|
38
|
+
id = binding.value
|
|
39
|
+
localPrint()
|
|
40
|
+
} else if (typeof binding.value === 'object' && !!binding.value.id) {
|
|
41
|
+
// 局部打印
|
|
42
|
+
id = binding.value.id
|
|
43
|
+
let ids = id.replace(new RegExp('#', 'g'), '')
|
|
44
|
+
let elsdom = document.getElementById(ids)
|
|
45
|
+
if (!elsdom) console.log('id in Error'), (id = '')
|
|
46
|
+
localPrint()
|
|
47
|
+
// } else if (binding?.value?.preview) {
|
|
48
|
+
} else if (binding && binding.value && binding.value.preview) {
|
|
49
|
+
localPrint()
|
|
50
|
+
} else {
|
|
51
|
+
window.print()
|
|
52
|
+
return
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
})
|
|
56
|
+
|
|
57
|
+
const localPrint = () => {
|
|
58
|
+
new Print({
|
|
59
|
+
ids: id, // * 局部打印必传入id
|
|
60
|
+
vue,
|
|
61
|
+
url: binding.value.url, // 打印指定的网址,这里不能跟id共存 如果共存id的优先级会比较高
|
|
62
|
+
standard: '', // 文档类型,默认是html5,可选 html5,loose,strict
|
|
63
|
+
extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
|
|
64
|
+
extraCss: binding.value.extraCss, // 额外的css连接,多个逗号分开
|
|
65
|
+
previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
|
|
66
|
+
zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
|
|
67
|
+
previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题
|
|
68
|
+
popTitle: binding.value.popTitle, // title的标题
|
|
69
|
+
preview: binding.value.preview || false, // 是否启动预览模式
|
|
70
|
+
asyncUrl: binding.value.asyncUrl,
|
|
71
|
+
ignoreClass: binding.value.ignoreClass, //不打印的元素
|
|
72
|
+
fontFamily: binding.value.fontFamily, // 打印字体
|
|
73
|
+
previewBeforeOpenCallback() {
|
|
74
|
+
// 预览窗口打开之前的callback
|
|
75
|
+
binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
|
|
76
|
+
},
|
|
77
|
+
previewOpenCallback() {
|
|
78
|
+
// 预览窗口打开之后的callback
|
|
79
|
+
binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
|
|
80
|
+
},
|
|
81
|
+
openCallback() {
|
|
82
|
+
// 调用打印之后的回调事件
|
|
83
|
+
binding.value.openCallback && binding.value.openCallback(vue)
|
|
84
|
+
},
|
|
85
|
+
closeCallback() {
|
|
86
|
+
binding.value.closeCallback && binding.value.closeCallback(vue)
|
|
87
|
+
},
|
|
88
|
+
beforeOpenCallback() {
|
|
89
|
+
binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)
|
|
90
|
+
},
|
|
91
|
+
})
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
}
|