moyin/fzu-product
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: 给notebook加载加了提示

Browse Source 
但是依托答辩 我不知道能不能跑
This commit is contained in:
camera-2018
2023-04-25 00:50:15 +08:00
parent 4145e94932
commit 62b6b7877c
3 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/RenderJupyterNotebook.vue
View File

@@ -1,19 +1,48 @@
<template>
<div ref="NotebookFragment" class="notebook-fragment" />
<div ref="NotebookFragment" class="notebook-fragment">
<div ref="loading" id="loading">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
<path stroke-dasharray="2 4" stroke-dashoffset="6"
d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3">
<animate attributeName="stroke-dashoffset" dur="0.6s" repeatCount="indefinite" values="6;0" />
</path>
<path stroke-dasharray="30" stroke-dashoffset="30"
d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.1s" dur="0.3s" values="30;0" />
</path>
<path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="10;0" />
</path>
<path stroke-dasharray="6" stroke-dashoffset="6" d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="6;0" />
</path>
</g>
</svg>
本页面包含 Jupyter NoteBook , 正在渲染中... ...
</div>
</div>
</template>
<script>
<script setup>
import { Notebook } from "../utils/index";
export default {
name: "RenderJupyterNotebook",
props: {
notebook: { required: true, type: Object },
},
async mounted() {
const notebook = new Notebook(this.notebook, false);
const fragment = await notebook.render();
this.$refs.NotebookFragment.appendChild(fragment);
},
};
import { defineProps, onMounted, ref } from "vue";
const props = defineProps({
notebook: { required: true, type: Object },
});
const NotebookFragment = ref(null);
const loading = ref(null);
onMounted(async () => {
const notebook = new Notebook(props.notebook, false);
const fragment = await notebook.render();
NotebookFragment.value.removeChild(loading.value);
NotebookFragment.value.appendChild(fragment);
});
</script>
<style scoped>
#loading {
font-size: 1.5rem;
text-align: center;
}
</style>