ORB-SLAM3 bool Tracking::TrackWithMotionModel()
2026/9/25 20:37:01
• Prism官网：https://prismjs.com/
• vue-prism-component主页：https://github.com/egoist/vue-prism-component
1、安装 prismjs、vue-prism-component
yarnaddprismjs vue-prism-component2、封装组件
<!-- src/components/CodeBlock.vue --><template><divclass="code_block"><divclass="code_header"><!-- 语言 --><spanclass="code_lang">{{ lang }}</span><!-- 复制按钮 --><el-buttontype="primary"link@click="copyClipboard":disabled="!code"><CopyDocument/>复制</el-button></div><!-- 代码 --><prism:language="lang"line-numbersclass="code_content">{{ code }}</prism></div></template><script>import'prismjs'importPrismfrom'vue-prism-component'//引入默认主题import'prismjs/themes/prism.css'//按需引入语言模块import'prismjs/components/prism-bash'import'prismjs/components/prism-markup'exportdefault{components:{Prism,},props:{lang:String,//代码语言（必填）code:String,//代码内容（必填）},data(){return{}},methods:{//复制到剪贴板asynccopyClipboard(){try{awaitnavigator.clipboard.writeText(this.code);this.$message.success("已复制到剪贴板");}catch(err){// 降级方案：兼容旧浏览器或权限受限环境consttextarea=document.createElement("textarea");textarea.value=this.code;textarea.style.position="fixed";textarea.style.opacity="0";document.body.appendChild(textarea);textarea.select();constsuccess=document.execCommand("copy");document.body.removeChild(textarea);if(success){this.$message.success("已复制到剪贴板");}else{this.$message.warning("复制失败，请手动选择并复制");}}},},}</script><stylelang="scss">.code_block{width:100%;.code_header{background-color:#F5F6F9;height:32px;line-height:32px;padding:0 12px;border-radius:.3rem .3rem 0 0;color:#A8ABB2;width:calc(100% - 24px);display:flex;align-items:center;justify-content:space-between;}.code_content{margin:0;border-radius:0 0 .3rem .3rem;background-color:#FAFAFC;}}</style>• 更多主题风格：https://github.com/PrismJS/prism-themes#how-to-use-a-theme
• 支持高亮的语言模块：https://prismjs.com/#supported-languages
• 关于ElementPlus和SCSS请参考：vue3+elementplus+sass/scss安装配置教程：使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等
3、全局注册组件（也可在应用时按需引入）
/* src/main.js */import{createApp}from"vue";importAppfrom"./App.vue";//导入组件importCodeBlockfrom"./components/CodeBlock.vue";//import MoreComponent from "./components/MoreComponent.vue";constapp=createApp(App);//注册组件app.component("CodeBlock",CodeBlock);//app.component("MoreComponent", MoreComponent)app.mount('#app')4、应用组件
<!-- Example.vue --><template><!-- 全局注册后可直接使用 <CodeBlock /> --><!-- 单行代码示例 --><CodeBlocklang="bash":code="singleLine"/><!-- 多行代码示例 --><CodeBlocklang="xml":code="multipleLines"/></template><script>//或按需引入组件（仅此页面生效）importCodeBlockfrom'@/components/CodeBlock.vue'exportdefault{components:{CodeBlock,//注册组件（仅此页面生效）},data(){return{singleLine:'yarn add prismjs vue-prism-component',}},computed:{multipleLines(){return`<?xml version="1.0" encoding="UTF-8"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>`},},}</script>