Commit a5ac2e80 by jlc

update:在代码编辑器中添加回到首页按钮

parent cfeaa185
...@@ -13,17 +13,20 @@ ...@@ -13,17 +13,20 @@
</SandpackLayout> </SandpackLayout>
</SandpackProvider> </SandpackProvider>
</div> </div>
<div class="btn-class">
<el-button @click="indexBtn">回到首页</el-button>
</div>
</template> </template>
<script setup> <script setup>
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole, SandpackFileExplorer } from 'sandpack-vue3'; import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole, SandpackFileExplorer } from 'sandpack-vue3';
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { findVueCodeById } from '@/examples/CodeMap.js'; import { findVueCodeById } from '@/examples/CodeMap.js';
import { findFunctionCodeById } from '@/examples/FunctionMap.js'; import { findFunctionCodeById } from '@/examples/FunctionMap.js';
// import functionCode from '@/examples/point-one-function?raw'
const route = useRoute() const route = useRoute()
const router = useRouter()
const vueCode = ref() const vueCode = ref()
const functionCode = ref() const functionCode = ref()
const files = ref({ const files = ref({
...@@ -38,6 +41,11 @@ const files = ref({ ...@@ -38,6 +41,11 @@ const files = ref({
} }
}); });
// 跳转回首页
function indexBtn() {
router.push(`/`)
}
onMounted(() =>{ onMounted(() =>{
vueCode.value = findVueCodeById(route.query.id) vueCode.value = findVueCodeById(route.query.id)
functionCode.value = findFunctionCodeById(route.query.id) functionCode.value = findFunctionCodeById(route.query.id)
...@@ -45,6 +53,11 @@ onMounted(() =>{ ...@@ -45,6 +53,11 @@ onMounted(() =>{
</script> </script>
<style scoped> <style scoped>
.btn-class{
position: absolute;
left: 150px;
top: 6px;
}
.app-continer{ .app-continer{
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment