Vue SFC格式化工具

输入Vue单文件组件代码，自动分离template/script/style区块并分别格式化。

输入Vue SFC代码

模式：

格式化结果

完整SFC代码

Template区块

Script区块

Style区块

\n\n'; if(formatted.style) sfc+='\n'+formatted.style+'\n\n'; fullText.value=sfc.trim(); }); document.getElementById('btn-copy-all').addEventListener('click',function(){ fullText.select(); document.execCommand('copy'); var btn=document.getElementById('btn-copy-all'); btn.textContent='已复制!'; setTimeout(function(){btn.textContent='复制完整SFC'},1500); }); document.getElementById('btn-download').addEventListener('click',function(){ var content=fullText.value; if(!content){alert('请先格式化代码');return;} var blob=new Blob([content],{type:'text/plain'}); var a=document.createElement('a'); a.download='component.vue'; a.href=URL.createObjectURL(blob); a.click(); URL.revokeObjectURL(a.href); }); document.getElementById('btn-clear').addEventListener('click',function(){ inputCode.value='';fullText.value='';tplText.value='';scriptText.value='';styleText.value=''; inputCode.focus(); }); })();