@cecee/document-flip-book 1.0.18 → 1.0.19
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.
|
@@ -58,6 +58,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
|
|
|
58
58
|
(0, _react.useEffect)(function () {
|
|
59
59
|
(0, _utils.setupPdfWorker)(pdfWorkerSrc);
|
|
60
60
|
}, [pdfWorkerSrc]);
|
|
61
|
+
var isFirstLoadOfDocument = (0, _react.useRef)(true);
|
|
61
62
|
var _useState = (0, _react.useState)([]),
|
|
62
63
|
_useState2 = _slicedToArray(_useState, 2),
|
|
63
64
|
pages = _useState2[0],
|
|
@@ -82,7 +83,6 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
|
|
|
82
83
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
83
84
|
refreshKey = _useState12[0],
|
|
84
85
|
setRefreshKey = _useState12[1];
|
|
85
|
-
var isFirstLoadOfDocument = (0, _react.useRef)(true);
|
|
86
86
|
|
|
87
87
|
// 内部处理全屏切换
|
|
88
88
|
var handleRequestFullscreen = (0, _react.useCallback)(function () {
|
|
@@ -124,10 +124,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
|
|
|
124
124
|
setPages([]); // 立即清空旧页面，防止切换时闪烁旧数据
|
|
125
125
|
setCurrent(0);
|
|
126
126
|
setActiveTab('');
|
|
127
|
-
if (flipRef.current) {
|
|
127
|
+
if (flipRef !== null && flipRef !== void 0 && flipRef.current) {
|
|
128
128
|
try {
|
|
129
129
|
var _flipRef$current;
|
|
130
|
-
(_flipRef$current = flipRef.current) === null || _flipRef$current === void 0 || (_flipRef$current = _flipRef$current.pageFlip()) === null || _flipRef$current === void 0 || _flipRef$current.turnToPage(0);
|
|
130
|
+
flipRef === null || flipRef === void 0 || (_flipRef$current = flipRef.current) === null || _flipRef$current === void 0 || (_flipRef$current = _flipRef$current.pageFlip()) === null || _flipRef$current === void 0 || _flipRef$current.turnToPage(0);
|
|
131
131
|
} catch (e) {
|
|
132
132
|
console.warn('Reset flipbook failed', e);
|
|
133
133
|
}
|
|
@@ -36,8 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.book-view {
|
|
39
|
-
|
|
40
|
-
// overflow: hidden;
|
|
39
|
+
overflow: hidden;
|
|
41
40
|
position: relative;
|
|
42
41
|
z-index: 10;
|
|
43
42
|
overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
|
|
@@ -45,6 +44,7 @@
|
|
|
45
44
|
|
|
46
45
|
// 书本左侧厚度 1
|
|
47
46
|
.dfb-book-thickness-left-1 {
|
|
47
|
+
overflow: hidden;
|
|
48
48
|
position: absolute;
|
|
49
49
|
top: 0;
|
|
50
50
|
left: -4px;
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
position: relative;
|
|
125
125
|
z-index: 10;
|
|
126
126
|
overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
|
|
127
|
-
background:
|
|
127
|
+
background: #fff; // 改为透明，避免遮挡背景层或产生白色边框
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
.dfb-root {
|
|
@@ -387,6 +387,7 @@
|
|
|
387
387
|
margin: auto; // 关键：在 flex 容器中使用 margin: auto 实现完美居中且溢出时可滚动到顶部
|
|
388
388
|
position: relative;
|
|
389
389
|
min-width: 300px;
|
|
390
|
+
overflow: hidden;
|
|
390
391
|
}
|
|
391
392
|
|
|
392
393
|
// 方法三：背景层样式
|
|
@@ -50,6 +50,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
|
|
|
50
50
|
useEffect(function () {
|
|
51
51
|
setupPdfWorker(pdfWorkerSrc);
|
|
52
52
|
}, [pdfWorkerSrc]);
|
|
53
|
+
var isFirstLoadOfDocument = useRef(true);
|
|
53
54
|
var _useState = useState([]),
|
|
54
55
|
_useState2 = _slicedToArray(_useState, 2),
|
|
55
56
|
pages = _useState2[0],
|
|
@@ -74,7 +75,6 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
|
|
|
74
75
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
75
76
|
refreshKey = _useState12[0],
|
|
76
77
|
setRefreshKey = _useState12[1];
|
|
77
|
-
var isFirstLoadOfDocument = useRef(true);
|
|
78
78
|
|
|
79
79
|
// 内部处理全屏切换
|
|
80
80
|
var handleRequestFullscreen = useCallback(function () {
|
|
@@ -116,10 +116,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
|
|
|
116
116
|
setPages([]); // 立即清空旧页面，防止切换时闪烁旧数据
|
|
117
117
|
setCurrent(0);
|
|
118
118
|
setActiveTab('');
|
|
119
|
-
if (flipRef.current) {
|
|
119
|
+
if (flipRef !== null && flipRef !== void 0 && flipRef.current) {
|
|
120
120
|
try {
|
|
121
121
|
var _flipRef$current;
|
|
122
|
-
(_flipRef$current = flipRef.current) === null || _flipRef$current === void 0 || (_flipRef$current = _flipRef$current.pageFlip()) === null || _flipRef$current === void 0 || _flipRef$current.turnToPage(0);
|
|
122
|
+
flipRef === null || flipRef === void 0 || (_flipRef$current = flipRef.current) === null || _flipRef$current === void 0 || (_flipRef$current = _flipRef$current.pageFlip()) === null || _flipRef$current === void 0 || _flipRef$current.turnToPage(0);
|
|
123
123
|
} catch (e) {
|
|
124
124
|
console.warn('Reset flipbook failed', e);
|
|
125
125
|
}
|
|
@@ -36,8 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.book-view {
|
|
39
|
-
|
|
40
|
-
// overflow: hidden;
|
|
39
|
+
overflow: hidden;
|
|
41
40
|
position: relative;
|
|
42
41
|
z-index: 10;
|
|
43
42
|
overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
|
|
@@ -45,6 +44,7 @@
|
|
|
45
44
|
|
|
46
45
|
// 书本左侧厚度 1
|
|
47
46
|
.dfb-book-thickness-left-1 {
|
|
47
|
+
overflow: hidden;
|
|
48
48
|
position: absolute;
|
|
49
49
|
top: 0;
|
|
50
50
|
left: -4px;
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
position: relative;
|
|
125
125
|
z-index: 10;
|
|
126
126
|
overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
|
|
127
|
-
background:
|
|
127
|
+
background: #fff; // 改为透明，避免遮挡背景层或产生白色边框
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
.dfb-root {
|
|
@@ -387,6 +387,7 @@
|
|
|
387
387
|
margin: auto; // 关键：在 flex 容器中使用 margin: auto 实现完美居中且溢出时可滚动到顶部
|
|
388
388
|
position: relative;
|
|
389
389
|
min-width: 300px;
|
|
390
|
+
overflow: hidden;
|
|
390
391
|
}
|
|
391
392
|
|
|
392
393
|
// 方法三：背景层样式
|