fix: excel autoFouce=false

This commit is contained in:
liyulin 2023-03-16 22:39:24 +08:00
parent 6f823c64ad
commit 6c288ea6e8
4 changed files with 65 additions and 61 deletions

File diff suppressed because one or more lines are too long

View File

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>Vite + Vue</title>
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-8dfd4953.js"></script> <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-772f353d.js"></script>
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-3a74d980.css"> <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-3a74d980.css">
</head> </head>
<body> <body>

View File

@ -1,11 +1,12 @@
export function readOnlyInput(mutationsList, observer){ export function readOnlyInput(ref){
console.log(mutationsList, observer); let root = ref.value;
for(let mutation of mutationsList) { if(root){
if(mutation.target.className === 'hide-input'){
let input = mutation.target.childNodes[0]; let nodes = root.querySelectorAll('.hide-input');
if(input){ console.log(nodes);
input.readOnly = true; for(let node of nodes){
} let input = node.childNodes[0];
input && (input.readOnly = true);
} }
} }
} }

View File

@ -4,6 +4,7 @@ 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';
import {readOnlyInput} from './hack'; import {readOnlyInput} from './hack';
import {debounce} from 'lodash';
export default defineComponent({ export default defineComponent({
name: 'VueOfficeExcel', name: 'VueOfficeExcel',
@ -60,10 +61,12 @@ export default defineComponent({
emit('error', e); emit('error', e);
}); });
} }
const observer = new MutationObserver(readOnlyInput); const observerCallback = debounce(readOnlyInput, 20).bind(this,rootRef);
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); 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,