美化前(都挤在一行)
image.png以下为vue3 tsx写法
import { defineComponent, watch } from 'vue';
export default defineComponent({
props: {
code: {
type: Object || Array,
required: true,
},
},
setup(props) {
// json格式美化
function prettyFormat(code: any) {
try {
for (const key in code) {
if (typeof code[key] === 'function') {
let str = code[key];
str = str.toString();
code[key] = str.replace(/\n/g, '<br/>');
}
}
// 设置缩进为2个空格
let str = JSON.stringify(code, null, 2);
str = str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
// str = str.replace(/\n/g, '/r')
return str;
} catch (e) {
console.error('异常信息:' + e);
return '';
}
}
return () => {
return <pre v-html={prettyFormat(props.code)}></pre>;
};
},
});
网友评论