1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <template>
| <div ref="ggbContainer" class="ggb-container"></div>
| </template>
|
| <script lang="ts">
|
| export default {
| mounted() {
| if (!window.GGBApplet) {
| const script = document.createElement("script");
| script.src = "https://www.geogebra.org/apps/deployggb.js";
| script.onload = () => {
| this.initGeoGebra();
| };
| document.body.appendChild(script);
| } else {
| this.initGeoGebra();
| }
| },
| methods:{
| initGeoGebra() {
| var params = {
| id: "ggbApplet",
| appName: "scientific",
| width: 600,
| height: 600,
| showToolBar: true,
| borderColor: null,
| showMenuBar: true,
| allowStyleBar: true,
| showAlgebraInput: true,
| enableLabelDrags: false,
| enableShiftDragZoom: true,
| capturingThreshold: null,
| showToolBarHelp: false,
| errorDialogsActive: true,
| showTutorialLink: true,
| showLogging: true,
| useBrowserForJS: false,
| };
|
| if (this.$refs.ggbContainer) {
| const applet = new GGBApplet(params, true);
| applet.inject(this.$refs.ggbContainer);
| }
| }
| }
| }
|
| </script>
|
| <style scoped>
| .ggb-container {
| width: 100%;
| height: 100%;
| /* 其他样式 */
| }
| </style>
|
|
