fix: excel弹窗预览中宽度变化报错

This commit is contained in:
liyulin 2023-05-19 18:42:19 +08:00
parent de416c9671
commit 469fe837e8
2 changed files with 56 additions and 53 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@vue-office/excel", "name": "@vue-office/excel",
"version": "1.1.3", "version": "1.1.4",
"description": "", "description": "",
"main": "lib/index.js", "main": "lib/index.js",
"files": [ "files": [

View File

@ -1,5 +1,5 @@
<script> <script>
import {defineComponent, ref, onMounted, onBeforeUnmount, watch} from 'vue-demi'; import {defineComponent, ref, onMounted, onBeforeUnmount, watch, nextTick} from 'vue-demi';
import Spreadsheet from 'x-data-spreadsheet'; import Spreadsheet from 'x-data-spreadsheet';
import {getData, readExcelData, transferExcelToSpreadSheet} from './excel'; import {getData, readExcelData, transferExcelToSpreadSheet} from './excel';
import {renderImage, clearCache} from './media'; import {renderImage, clearCache} from './media';
@ -64,61 +64,64 @@ export default defineComponent({
const observerCallback = debounce(readOnlyInput, 200).bind(this,rootRef); const observerCallback = debounce(readOnlyInput, 200).bind(this,rootRef);
const observer = new MutationObserver(observerCallback); const observer = new MutationObserver(observerCallback);
const observerConfig = { attributes: true, childList: true, subtree: true }; const observerConfig = { attributes: true, childList: true, subtree: true };
onMounted(() => { onMounted(() => {
observer.observe(rootRef.value, observerConfig); nextTick(()=>{
observerCallback(rootRef); observer.observe(rootRef.value, observerConfig);
observerCallback(rootRef);
window.xs = xs = new Spreadsheet(rootRef.value, { window.xs = xs = new Spreadsheet(rootRef.value, {
mode: 'read', mode: 'read',
showToolbar: false, showToolbar: false,
view: { view: {
height: () => wrapperRef.value.clientHeight || 300, height: () => wrapperRef.value && wrapperRef.value.clientHeight || 300,
width: () => wrapperRef.value.clientWidth || 300, width: () => wrapperRef.value && wrapperRef.value.clientWidth || 300,
}, },
row: { row: {
height: 24, height: 24,
len: 100 len: 100
}, },
col: { col: {
len: 26, len: 26,
width: 80, width: 80,
indexWidth: 60, indexWidth: 60,
minWidth: 60, minWidth: 60,
}, },
autoFocus: false autoFocus: false
}).loadData({}); }).loadData({});
let swapFunc = xs.bottombar.swapFunc; let swapFunc = xs.bottombar.swapFunc;
xs.bottombar.swapFunc = function (index) { xs.bottombar.swapFunc = function (index) {
swapFunc.call(xs.bottombar, index); swapFunc.call(xs.bottombar, index);
sheetIndex = index + 1; sheetIndex = index + 1;
setTimeout(()=>{ setTimeout(()=>{
xs.reRender(); xs.reRender();
renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
});
};
let clear = xs.sheet.editor.clear;
xs.sheet.editor.clear = function (...args){
clear.apply(xs.sheet.editor, args);
setTimeout(()=>{
renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
});
};
let setOffset = xs.sheet.editor.setOffset;
xs.sheet.editor.setOffset = function (...args){
setOffset.apply(xs.sheet.editor, args);
offset = args[0];
renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset); renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
}); };
const canvas = rootRef.value.querySelector('canvas');
}; ctx = canvas.getContext('2d');
let clear = xs.sheet.editor.clear; if (props.src) {
xs.sheet.editor.clear = function (...args){ getData(props.src, props.requestOptions).then(renderExcel).catch(e => {
clear.apply(xs.sheet.editor, args); xs.loadData({});
setTimeout(()=>{ emit('error', e);
renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset); });
}); }
}; });
let setOffset = xs.sheet.editor.setOffset;
xs.sheet.editor.setOffset = function (...args){
setOffset.apply(xs.sheet.editor, args);
offset = args[0];
renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
};
const canvas = rootRef.value.querySelector('canvas');
ctx = canvas.getContext('2d');
if (props.src) {
getData(props.src, props.requestOptions).then(renderExcel).catch(e => {
xs.loadData({});
emit('error', e);
});
}
}); });
onBeforeUnmount(()=>{ onBeforeUnmount(()=>{