Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
X
x-training-new
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
x-training-new
Commits
d8d5e149
提交
d8d5e149
authored
5月 07, 2022
作者:
lihuihui
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update
上级
296aaf5c
隐藏空白字符变更
内嵌
并排
正在显示
3 个修改的文件
包含
159 行增加
和
144 行删除
+159
-144
Result.vue
src/modules/product-analysis/views/Result.vue
+18
-17
Codemirror.vue
src/modules/test/views/Codemirror.vue
+137
-127
vite.config.js
vite.config.js
+4
-0
没有找到文件。
src/modules/product-analysis/views/Result.vue
浏览文件 @
d8d5e149
...
@@ -15,10 +15,11 @@
...
@@ -15,10 +15,11 @@
<div
class=
"close"
@
click=
"close"
>
×
</div>
<div
class=
"close"
@
click=
"close"
>
×
</div>
<div
class=
"tit"
>
错题解析
</div>
<div
class=
"tit"
>
错题解析
</div>
<ul>
<ul>
<li
v-for=
"(item, index) in answerList"
:key=
"index"
v-if=
"!item.is_correct"
>
<li
v-for=
"(item, index) in answerList"
:key=
"index"
>
<div
class=
"title"
>
{{
`${item.subject
}
`
}}
:(分值:
{{
parseInt
(
item
.
sum_score
)
}}
)
<
/div
>
<template
v-if=
"!item.is_correct"
>
<
div
class
=
"my"
>
我的答案:
{{
item
.
commit_answer
}}
<
/div
>
<div
class=
"title"
>
{{
`${item.subject
}
`
}}
:(分值:
{{
parseInt
(
item
.
sum_score
)
}}
)
<
/div
>
<
div
class
=
"answer"
>
正确答案:
{{
item
.
answer
}}
<
/div
>
<
div
class
=
"my"
>
我的答案:
{{
item
.
commit_answer
}}
<
/div
>
<
/template
>
<
/li
>
<
/li
>
<
/ul
>
<
/ul
>
<
/div
>
<
/div
>
...
@@ -60,27 +61,27 @@ export default {
...
@@ -60,27 +61,27 @@ export default {
<
/script
>
<
/script
>
<
style
lang
=
"scss"
scoped
>
<
style
lang
=
"scss"
scoped
>
.
analysis
-
box
{
.
analysis
-
box
{
position
:
fixed
;
position
:
fixed
;
top
:
0
;
top
:
0
;
left
:
0
;
left
:
0
;
width
:
100
%
;
width
:
100
%
;
height
:
100
%
;
height
:
100
%
;
background
:
rgba
(
0
,
0
,
0
,
0.3
);
background
:
rgba
(
0
,
0
,
0
,
0.3
);
z
-
index
:
99999
;
z
-
index
:
99999
;
.
content
{
.
content
{
position
:
absolute
;
position
:
absolute
;
top
:
50
%
;
top
:
50
%
;
left
:
50
%
;
left
:
50
%
;
transform
:
translate
(
-
50
%
,
-
50
%
);
transform
:
translate
(
-
50
%
,
-
50
%
);
width
:
824
px
;
width
:
824
px
;
padding
:
40
px
40
px
100
px
;
padding
:
40
px
40
px
100
px
;
background
:
#
FFFFFF
;
background
:
#
ffffff
;
opacity
:
1
;
opacity
:
1
;
border
-
radius
:
16
px
;
border
-
radius
:
16
px
;
max
-
height
:
500
px
;
max
-
height
:
500
px
;
overflow
-
y
:
scroll
;
overflow
-
y
:
scroll
;
.
close
{
.
close
{
position
:
absolute
;
position
:
absolute
;
top
:
10
px
;
top
:
10
px
;
right
:
28
px
;
right
:
28
px
;
...
@@ -91,30 +92,30 @@ export default {
...
@@ -91,30 +92,30 @@ export default {
line
-
height
:
100
%
;
line
-
height
:
100
%
;
cursor
:
pointer
;
cursor
:
pointer
;
}
}
.
tit
{
.
tit
{
font
-
size
:
20
px
;
font
-
size
:
20
px
;
line
-
height
:
100
%
;
line
-
height
:
100
%
;
color
:
#
333333
;
color
:
#
333333
;
}
}
ul
{
ul
{
li
{
li
{
margin
-
top
:
38
px
;
margin
-
top
:
38
px
;
div
{
div
{
line
-
height
:
100
%
;
line
-
height
:
100
%
;
}
}
.
title
{
.
title
{
font
-
size
:
16
px
;
font
-
size
:
16
px
;
color
:
#
999999
;
color
:
#
999999
;
margin
-
bottom
:
18
px
;
margin
-
bottom
:
18
px
;
}
}
.
my
{
.
my
{
font
-
size
:
16
px
;
font
-
size
:
16
px
;
color
:
#
333333
;
color
:
#
333333
;
margin
-
bottom
:
12
px
;
margin
-
bottom
:
12
px
;
}
}
.
answer
{
.
answer
{
font
-
size
:
16
px
;
font
-
size
:
16
px
;
color
:
#
4
DB
299
;
color
:
#
4
db
299
;
}
}
}
}
}
}
...
...
src/modules/test/views/Codemirror.vue
浏览文件 @
d8d5e149
<
template
>
<
template
>
<div
class=
"in-coder-panel"
>
<div
class=
"in-coder-panel"
>
<textarea
ref=
"textarea"
></textarea>
<textarea
ref=
"textarea"
></textarea>
<el-select
class=
"code-mode-select"
v-model=
"mode"
<el-select
class=
"code-mode-select"
v-model=
"mode"
@
change=
"changeMode"
>
@
change=
"changeMode"
>
<el-option
v-for=
"mode in modes"
:key=
"mode.value"
:label=
"mode.label"
:value=
"mode.value"
>
</el-option>
<el-option
v-for=
"mode in modes"
:key=
"mode.value"
:label=
"mode.label"
:value=
"mode.value"
>
</el-option>
</el-select>
</el-select>
</div>
</div>
</
template
>
</
template
>
<
script
type=
"text/ecmascript-6"
>
<
script
type=
"text/ecmascript-6"
>
// 引入全局实例
// 引入全局实例
import
_CodeMirror
from
'codemirror'
import
_CodeMirror
from
'codemirror'
// 核心样式
// 核心样式
import
'codemirror/lib/codemirror.css'
import
'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
// 引入主题后还需要在 options 中指定主题才会生效
import
'codemirror/theme/cobalt.css'
import
'codemirror/theme/cobalt.css'
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ,所以此处才把对应的 JS 提前引入
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ,所以此处才把对应的 JS 提前引入
import
'codemirror/mode/javascript/javascript.js'
import
'codemirror/mode/javascript/javascript.js'
import
'codemirror/mode/css/css.js'
import
'codemirror/mode/css/css.js'
import
'codemirror/mode/xml/xml.js'
import
'codemirror/mode/xml/xml.js'
import
'codemirror/mode/clike/clike.js'
import
'codemirror/mode/clike/clike.js'
import
'codemirror/mode/markdown/markdown.js'
import
'codemirror/mode/markdown/markdown.js'
import
'codemirror/mode/python/python.js'
import
'codemirror/mode/python/python.js'
import
'codemirror/mode/r/r.js'
import
'codemirror/mode/r/r.js'
import
'codemirror/mode/shell/shell.js'
import
'codemirror/mode/shell/shell.js'
import
'codemirror/mode/sql/sql.js'
import
'codemirror/mode/sql/sql.js'
import
'codemirror/mode/swift/swift.js'
import
'codemirror/mode/swift/swift.js'
import
'codemirror/mode/vue/vue.js'
import
'codemirror/mode/vue/vue.js'
// 尝试获取全局实例
// 尝试获取全局实例
const
CodeMirror
=
window
.
CodeMirror
||
_CodeMirror
const
CodeMirror
=
window
.
CodeMirror
||
_CodeMirror
export
default
{
export
default
{
name
:
'in-coder'
,
name
:
'in-coder'
,
props
:
{
props
:
{
// 外部传入的内容,用于实现双向绑定
// 外部传入的内容,用于实现双向绑定
value
:
String
,
value
:
String
,
// 外部传入的语法类型
// 外部传入的语法类型
language
:
{
language
:
{
type
:
String
,
type
:
String
,
default
:
null
default
:
null
}
}
},
},
data
()
{
data
()
{
return
{
return
{
// 内部真实的内容
// 内部真实的内容
code
:
''
,
code
:
''
,
// 默认的语法类型
// 默认的语法类型
mode
:
'javascript'
,
mode
:
'javascript'
,
// 编辑器实例
// 编辑器实例
coder
:
null
,
coder
:
null
,
// 默认配置
// 默认配置
options
:
{
options
:
{
// 缩进格式
// 缩进格式
tabSize
:
2
,
tabSize
:
2
,
// 主题,对应主题库 JS 需要提前引入
// 主题,对应主题库 JS 需要提前引入
theme
:
'cobalt'
,
theme
:
'cobalt'
,
// 显示行号
// 显示行号
lineNumbers
:
true
,
lineNumbers
:
true
,
line
:
true
line
:
true
},
},
// 支持切换的语法高亮类型,对应 JS 已经提前引入
// 支持切换的语法高亮类型,对应 JS 已经提前引入
// 使用的是 MIME-TYPE ,不过作为前缀的 text/ 在后面指定时写死了
// 使用的是 MIME-TYPE ,不过作为前缀的 text/ 在后面指定时写死了
modes
:
[{
modes
:
[
{
value
:
'css'
,
value
:
'css'
,
label
:
'CSS'
label
:
'CSS'
},
{
},
{
value
:
'javascript'
,
value
:
'javascript'
,
label
:
'Javascript'
label
:
'Javascript'
},
{
},
{
value
:
'html'
,
value
:
'html'
,
label
:
'XML/HTML'
label
:
'XML/HTML'
},
{
},
{
value
:
'x-java'
,
value
:
'x-java'
,
label
:
'Java'
label
:
'Java'
},
{
},
{
value
:
'x-objectivec'
,
value
:
'x-objectivec'
,
label
:
'Objective-C'
label
:
'Objective-C'
},
{
},
{
value
:
'x-python'
,
value
:
'x-python'
,
label
:
'Python'
label
:
'Python'
},
{
},
{
value
:
'x-rsrc'
,
value
:
'x-rsrc'
,
label
:
'R'
label
:
'R'
},
{
},
{
value
:
'x-sh'
,
value
:
'x-sh'
,
label
:
'Shell'
label
:
'Shell'
},
{
},
{
value
:
'x-sql'
,
value
:
'x-sql'
,
label
:
'SQL'
label
:
'SQL'
},
{
},
{
value
:
'x-swift'
,
value
:
'x-swift'
,
label
:
'Swift'
label
:
'Swift'
},
{
},
{
value
:
'x-vue'
,
value
:
'x-vue'
,
label
:
'Vue'
label
:
'Vue'
},
{
},
{
value
:
'markdown'
,
value
:
'markdown'
,
label
:
'Markdown'
label
:
'Markdown'
}]
}
}
]
},
}
mounted
()
{
},
// 初始化
mounted
()
{
this
.
_initialize
()
// 初始化
},
this
.
_initialize
()
methods
:
{
},
// 初始化
methods
:
{
_initialize
()
{
// 初始化
// 初始化编辑器实例,传入需要被实例化的文本域对象和默认配置
_initialize
()
{
this
.
coder
=
CodeMirror
.
fromTextArea
(
this
.
$refs
.
textarea
,
this
.
options
)
// 初始化编辑器实例,传入需要被实例化的文本域对象和默认配置
// 编辑器赋值
this
.
coder
=
CodeMirror
.
fromTextArea
(
this
.
$refs
.
textarea
,
this
.
options
)
this
.
coder
.
setValue
(
this
.
value
||
this
.
code
)
// 编辑器赋值
this
.
coder
.
setValue
(
this
.
value
||
this
.
code
)
// 支持双向绑定
// 支持双向绑定
this
.
coder
.
on
(
'change'
,
(
coder
)
=>
{
this
.
coder
.
on
(
'change'
,
coder
=>
{
this
.
code
=
coder
.
getValue
()
this
.
code
=
coder
.
getValue
()
if
(
this
.
$emit
)
{
if
(
this
.
$emit
)
{
this
.
$emit
(
'input'
,
this
.
code
)
this
.
$emit
(
'input'
,
this
.
code
)
}
}
})
})
// 尝试从父容器获取语法类型
// 尝试从父容器获取语法类型
if
(
this
.
language
)
{
if
(
this
.
language
)
{
// 获取具体的语法类型对象
// 获取具体的语法类型对象
le
t
modeObj
=
this
.
_getLanguage
(
this
.
language
)
cons
t
modeObj
=
this
.
_getLanguage
(
this
.
language
)
// 判断父容器传入的语法是否被支持
// 判断父容器传入的语法是否被支持
if
(
modeObj
)
{
if
(
modeObj
)
{
this
.
mode
=
modeObj
.
label
this
.
mode
=
modeObj
.
label
}
}
}
},
}
// 获取当前语法类型
},
_getLanguage
(
language
)
{
// 获取当前语法类型
// 在支持的语法类型列表中寻找传入的语法类型
_getLanguage
(
language
)
{
return
this
.
modes
.
find
((
mode
)
=>
{
// 在支持的语法类型列表中寻找传入的语法类型
// 所有的值都忽略大小写,方便比较
return
this
.
modes
.
find
(
mode
=>
{
let
currentLanguage
=
language
.
toLowerCase
()
// 所有的值都忽略大小写,方便比较
let
currentLabel
=
mode
.
label
.
toLowerCase
()
const
currentLanguage
=
language
.
toLowerCase
()
let
currentValue
=
mode
.
value
.
toLowerCase
()
const
currentLabel
=
mode
.
label
.
toLowerCase
()
const
currentValue
=
mode
.
value
.
toLowerCase
()
// 由于真实值可能不规范,例如 java 的真实值是 x-java ,所以讲 value 和 label 同时和传入语法进行比较
// 由于真实值可能不规范,例如 java 的真实值是 x-java ,所以讲 value 和 label 同时和传入语法进行比较
return
currentLabel
===
currentLanguage
||
currentValue
===
currentLanguage
return
currentLabel
===
currentLanguage
||
currentValue
===
currentLanguage
})
})
},
},
// 更改模式
// 更改模式
changeMode
(
val
)
{
changeMode
(
val
)
{
// 修改编辑器的语法配置
// 修改编辑器的语法配置
this
.
coder
.
setOption
(
'mode'
,
`text/
${
val
}
`
)
this
.
coder
.
setOption
(
'mode'
,
`text/
${
val
}
`
)
// 获取修改后的语法
// 获取修改后的语法
le
t
label
=
this
.
_getLanguage
(
val
).
label
.
toLowerCase
()
cons
t
label
=
this
.
_getLanguage
(
val
).
label
.
toLowerCase
()
// 允许父容器通过以下函数监听当前的语法值
// 允许父容器通过以下函数监听当前的语法值
this
.
$emit
(
'language-change'
,
label
)
this
.
$emit
(
'language-change'
,
label
)
}
}
}
}
}
}
</
script
>
</
script
>
<
style
>
<
style
>
.in-coder-panel
{
.in-coder-panel
{
flex-grow
:
1
;
flex-grow
:
1
;
display
:
flex
;
display
:
flex
;
position
:
relative
position
:
relative
;
}
}
.CodeMirror
{
.CodeMirror
{
flex-grow
:
1
;
flex-grow
:
1
;
z-index
:
1
z-index
:
1
;
}
}
.code-mode-select
{
.code-mode-select
{
position
:
absolute
;
position
:
absolute
;
z-index
:
2
;
z-index
:
2
;
right
:
10px
;
right
:
10px
;
...
...
vite.config.js
浏览文件 @
d8d5e149
...
@@ -24,5 +24,9 @@ export default defineConfig({
...
@@ -24,5 +24,9 @@ export default defineConfig({
replacement
:
path
.
resolve
(
__dirname
,
'src'
)
replacement
:
path
.
resolve
(
__dirname
,
'src'
)
}
}
]
]
},
css
:
{
// 禁用SASS警告提醒
preprocessorOptions
:
{
scss
:
{
quietDeps
:
true
,
charset
:
false
}
}
}
}
})
})
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论