Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
cesium-frame
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
jlc
cesium-frame
Commits
e37b0b85
Commit
e37b0b85
authored
Jul 18, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:添加案例和查看Api文档按钮的创建
parent
7f22c9be
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
161 additions
and
51 deletions
+161
-51
HeaderMenuBar.vue
src/components/HeaderMenuBar.vue
+62
-2
ApiDocument.vue
src/pages/ApiDocument.vue
+14
-0
CodeAndCesiumTwo.vue
src/pages/CodeAndCesiumTwo.vue
+80
-49
index.js
src/router/index.js
+5
-0
No files found.
src/components/HeaderMenuBar.vue
View file @
e37b0b85
...
@@ -8,23 +8,83 @@
...
@@ -8,23 +8,83 @@
<el-breadcrumb
separator=
"/"
>
<el-breadcrumb
separator=
"/"
>
<el-breadcrumb-item
:to=
"
{ path: '/' }" class="text-base">首页
</el-breadcrumb-item>
<el-breadcrumb-item
:to=
"
{ path: '/' }" class="text-base">首页
</el-breadcrumb-item>
</el-breadcrumb>
</el-breadcrumb>
<div
style=
"margin-left: auto;"
>
<el-button
type=
"info"
@
click=
"showAddCaseDialog"
>
添加案例
</el-button>
<el-button
type=
"info"
@
click=
"goToApiDocument"
>
查看Api文档
</el-button>
</div>
<el-dialog
v-model=
"dialogVisible"
title=
"添加案例"
width=
"500"
>
<el-row>
<el-col
:span=
"12"
>
<span>
案例名称
</span>
</el-col>
<el-col
:span=
"12"
>
<el-input
v-model=
"caseName"
placeholder=
"请输入案例名称:"
/>
</el-col>
</el-row>
<el-upload
drag
multiple
>
<el-icon
class=
"el-icon--upload"
><upload-filled
/></el-icon>
<div
class=
"el-upload__text"
>
<em>
上传案例图片
</em>
</div>
<template
#
tip
>
<div
class=
"el-upload__tip"
>
请上传jpg/png格式的文件
</div>
</
template
>
</el-upload>
<
template
#
footer
>
<div
class=
"dialog-footer"
>
<el-button
@
click=
"dialogVisible = false"
>
取消
</el-button>
<el-button
type=
"primary"
@
click=
"addCase"
>
添加
</el-button>
</div>
</
template
>
</el-dialog>
</el-header>
</el-header>
</template>
</template>
<
script
setup
>
<
script
setup
>
import
{
Expand
,
Fold
}
from
"@element-plus/icons-vue"
import
{
ref
}
from
"vue"
import
{
Expand
,
Fold
}
from
"@element-plus/icons-vue"
;
import
{
useRouter
}
from
'vue-router'
;
import
{
UploadFilled
}
from
'@element-plus/icons-vue'
;
const
props
=
defineProps
({
const
props
=
defineProps
({
isCollapse
:
{
isCollapse
:
{
type
:
Boolean
,
type
:
Boolean
,
}
}
});
});
const
emit
=
defineEmits
([
'update:isCollapse'
]);
const
emit
=
defineEmits
([
'update:isCollapse'
]);
const
dialogVisible
=
ref
(
false
)
const
caseName
=
ref
(
''
)
const
imageUrl
=
ref
(
'/src/assets/PointOne.png'
)
const
router
=
useRouter
()
function
goToApiDocument
()
{
router
.
push
(
`/ApiDocument`
)
}
const
toggleCollapse
=
()
=>
{
const
toggleCollapse
=
()
=>
{
emit
(
'update:isCollapse'
,
!
props
.
isCollapse
);
emit
(
'update:isCollapse'
,
!
props
.
isCollapse
);
};
};
// 打开添加案例对话框
function
showAddCaseDialog
(){
dialogVisible
.
value
=
true
;
caseName
.
value
=
''
;
}
// 添加案例函数
function
addCase
(){
const
newCase
=
{
title
:
caseName
.
value
,
pngUrl
:
imageUrl
.
value
};
console
.
log
(
newCase
)
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
...
...
src/pages/ApiDocument.vue
0 → 100644
View file @
e37b0b85
<
template
>
<div>
这是接口文档
</div>
</
template
>
<
script
setup
>
</
script
>
<
style
lang=
"scss"
scoped
>
</
style
>
\ No newline at end of file
src/pages/CodeAndCesiumTwo.vue
View file @
e37b0b85
<
template
>
<
template
>
<div
class=
"container"
>
<div>
<div
class=
"left"
>
<Codemirror
<el-button
@
click=
"execute"
type=
"primary"
>
运行
</el-button>
v-model:value=
"code"
<el-input
v-model=
"jsCode"
type=
"textarea"
placeholder=
"Enter your HTML code here..."
/>
:options=
"cmOptions"
</div>
border
<div
class=
"right"
>
placeholder=
"test placeholder"
<iframe
ref=
"resultFrame"
></iframe>
:height=
"200"
</div>
@
change=
"change"
/>
<iframe
ref=
"iframe"
class=
"preview"
/>
</div>
</div>
</
template
>
</
template
>
<
script
setup
>
<
script
setup
>
import
{
onMounted
,
ref
}
from
'vue'
;
import
{
ref
,
onMounted
}
from
'vue'
;
import
Codemirror
from
"codemirror-editor-vue3"
;
const
jsCode
=
ref
(
''
);
import
code
from
'@/examples/point-two.vue?raw'
;
const
resultFrame
=
ref
(
null
);
const
htmlCode
=
ref
(
''
);
// placeholder
import
"codemirror/addon/display/placeholder.js"
;
const
execute
=
()
=>
{
const
iframeData
=
resultFrame
.
value
.
contentWindow
;
// language
iframeData
.
document
.
body
.
innerHTML
=
''
;
import
"codemirror/mode/vue/vue.js"
;
iframeData
.
document
.
open
();
// placeholder
iframeData
.
document
.
write
();
import
"codemirror/addon/display/placeholder.js"
;
iframeData
.
document
.
close
();
// theme
console
.
log
(
jsCode
.
value
)
import
"codemirror/theme/dracula.css"
;
console
.
log
(
iframeData
.
document
)
const
iframe
=
ref
(
null
);
const
cmOptions
=
{
mode
:
"text/x-vue"
,
// Change mode to Vue
theme
:
"dracula"
,
// Theme
};
};
// onMounted(() => {
const
change
=
(
newCode
)
=>
{
// const iframeData = resultFrame.value.contentWindow;
code
.
value
=
newCode
;
// iframeData.document.open();
compileAndRender
(
newCode
);
// iframeData.document.write('
<
html
><
body
><
/body></
html
>
');
};
// iframeData.document.close();
// });
</
script
>
<
style
scoped
>
const
compileAndRender
=
(
codeToCompile
)
=>
{
.container
{
try
{
display
:
flex
;
// Assuming you have a Vue compiler that can compile the code
height
:
100vh
;
/* 设置容器高度为视口高度 */
const
compiledCode
=
compileVueCode
(
codeToCompile
);
}
const
iframeDoc
=
iframe
.
value
.
contentDocument
||
iframe
.
value
.
contentWindow
.
document
;
.left
{
iframeDoc
.
open
();
flex
:
1
;
/* 左边部分占一半宽度 */
iframeDoc
.
write
(
`
padding
:
10px
;
<!DOCTYPE html>
}
<html>
.right
{
<head>
flex
:
1
;
/* 右边部分占一半宽度 */
<title>Preview</title>
padding
:
10px
;
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js" />
</head>
<body>
<div id="app"></div>
<script>
${
compiledCode
}
<\/script>
</body>
</html>
`
);
iframeDoc
.
close
();
}
catch
(
error
)
{
console
.
error
(
error
);
}
}
textarea
{
};
width
:
80%
;
height
:
200px
;
margin-bottom
:
20px
;
const
compileVueCode
=
(
code
)
=>
{
}
// This is a placeholder for your actual Vue compiler logic
iframe
{
// You need to implement a Vue compiler that can compile the Vue SFC code
// For example, you can use @vue/compiler-sfc to compile the code
return
`
const { createApp } = Vue;
const App =
${
code
}
;
createApp(App).mount('#app');
`
;
};
onMounted
(()
=>
{
compileAndRender
(
code
.
value
);
});
</
script
>
<
style
>
.preview
{
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
400px
;
border
:
1px
solid
#ccc
;
}
}
</
style
>
</
style
>
\ No newline at end of file
src/router/index.js
View file @
e37b0b85
...
@@ -19,6 +19,11 @@ const routes = [
...
@@ -19,6 +19,11 @@ const routes = [
component
:
()
=>
import
(
'@/pages/CodeAndCesium.vue'
),
component
:
()
=>
import
(
'@/pages/CodeAndCesium.vue'
),
},
},
{
{
path
:
'/ApiDocument'
,
name
:
'apidocument'
,
component
:
()
=>
import
(
'@/pages/ApiDocument.vue'
),
},
{
path
:
'/:pathMatch(.*)*'
,
path
:
'/:pathMatch(.*)*'
,
name
:
'errorpage'
,
name
:
'errorpage'
,
component
:
()
=>
import
(
'@/pages/ErrorPage.vue'
),
component
:
()
=>
import
(
'@/pages/ErrorPage.vue'
),
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment