Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gs_words
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
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
template admin
gs_words
Commits
cfa850bf
Commit
cfa850bf
authored
Nov 18, 2024
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
debug
parent
48cfaa5d
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
146 additions
and
3 deletions
+146
-3
index.css
form/index.css
+67
-1
index.html
form/index.html
+21
-2
index.js
form/index.js
+58
-0
No files found.
form/index.css
View file @
cfa850bf
...
@@ -9,7 +9,7 @@
...
@@ -9,7 +9,7 @@
.data-card
{
.data-card
{
position
:
relative
;
position
:
relative
;
height
:
32
0px
;
height
:
45
0px
;
width
:
300px
;
width
:
300px
;
vertical-align
:
top
;
vertical-align
:
top
;
}
}
...
@@ -103,3 +103,69 @@ audio {
...
@@ -103,3 +103,69 @@ audio {
transform
:
rotate
(
360deg
);
transform
:
rotate
(
360deg
);
}
}
}
}
/* 图片上传区域样式 */
.image-uploader
{
width
:
120px
;
height
:
120px
;
line-height
:
120px
;
border
:
1px
dashed
#d9d9d9
;
border-radius
:
6px
;
cursor
:
pointer
;
position
:
relative
;
overflow
:
hidden
;
}
.image-uploader
:hover
{
border-color
:
#409EFF
;
}
.upload-icon
{
font-size
:
28px
;
color
:
#8c939d
;
width
:
120px
;
height
:
120px
;
line-height
:
120px
;
text-align
:
center
;
}
.image-preview
{
width
:
100%
;
height
:
100%
;
position
:
relative
;
}
.uploaded-image
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
}
.image-actions
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
background
:
rgba
(
0
,
0
,
0
,
0.5
);
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
opacity
:
0
;
transition
:
opacity
0.3s
;
}
.image-preview
:hover
.image-actions
{
opacity
:
1
;
}
.image-actions
i
{
color
:
#fff
;
font-size
:
20px
;
margin
:
0
10px
;
cursor
:
pointer
;
}
.image-actions
i
:hover
{
transform
:
scale
(
1.2
);
}
\ No newline at end of file
form/index.html
View file @
cfa850bf
...
@@ -22,11 +22,30 @@
...
@@ -22,11 +22,30 @@
<el-card
v-for=
"item, index in data"
:key=
"index"
class=
"data-card"
>
<el-card
v-for=
"item, index in data"
:key=
"index"
class=
"data-card"
>
<div>
<div>
<el-form
label-width=
"40px"
>
<el-form
label-width=
"40px"
>
<el-form-item
label=
"图片"
>
<div
class=
"image-uploader"
>
<el-upload
:action=
"uploadUrl"
:data=
"uploadData"
:show-file-list=
"false"
:on-success=
"(res, file) => handleImageSuccess(res, file, index)"
:before-upload=
"beforeImageUpload"
>
<div
v-if=
"data[index].image_url"
class=
"image-preview"
>
<img
:src=
"data[index].image_url"
class=
"uploaded-image"
>
<div
class=
"image-actions"
>
<i
class=
"el-icon-zoom-in"
@
click
.
stop=
"previewImage(data[index].image_url)"
></i>
<i
class=
"el-icon-delete"
@
click
.
stop=
"removeImage(index)"
></i>
</div>
</div>
<i
v-else
class=
"el-icon-plus upload-icon"
></i>
</el-upload>
</div>
</el-form-item>
<el-form-item
label=
"英文"
>
<el-form-item
label=
"英文"
>
<el-input
v-model=
"data[index].text_en"
placeholder=
"请输入英文"
@
change=
"save"
></el-input>
<el-input
type=
"textarea"
v-model=
"data[index].text_en"
placeholder=
"请输入英文"
@
change=
"save"
></el-input>
</el-form-item>
</el-form-item>
<el-form-item
label=
"中文"
>
<el-form-item
label=
"中文"
>
<el-input
v-model=
"data[index].text_cn"
placeholder=
"请输入中文"
@
change=
"save"
></el-input>
<el-input
type=
"textarea"
v-model=
"data[index].text_cn"
placeholder=
"请输入中文"
@
change=
"save"
></el-input>
</el-form-item>
</el-form-item>
<!-- 新增音频上传和预览部分 -->
<!-- 新增音频上传和预览部分 -->
<el-form-item
label=
"音频"
>
<el-form-item
label=
"音频"
>
...
...
form/index.js
View file @
cfa850bf
...
@@ -32,6 +32,7 @@ new Vue({
...
@@ -32,6 +32,7 @@ new Vue({
},
},
methods
:
{
methods
:
{
handleAudioSuccess
(
res
,
file
,
index
)
{
handleAudioSuccess
(
res
,
file
,
index
)
{
console
.
log
(
res
,
file
,
index
);
// 假设上传接口返回的音频URL在 res.url 中
// 假设上传接口返回的音频URL在 res.url 中
this
.
data
[
index
].
audio_url
=
res
.
url
;
this
.
data
[
index
].
audio_url
=
res
.
url
;
this
.
data
[
index
].
audio_name
=
file
.
name
;
this
.
data
[
index
].
audio_name
=
file
.
name
;
...
@@ -111,6 +112,7 @@ new Vue({
...
@@ -111,6 +112,7 @@ new Vue({
text_en
:
''
,
text_en
:
''
,
text_cn
:
''
,
text_cn
:
''
,
audio_url
:
''
,
audio_url
:
''
,
image_url
:
''
,
audio_name
:
''
,
audio_name
:
''
,
audio_size
:
''
,
audio_size
:
''
,
audio_duration
:
''
,
audio_duration
:
''
,
...
@@ -118,6 +120,62 @@ new Vue({
...
@@ -118,6 +120,62 @@ new Vue({
});
});
this
.
save
();
this
.
save
();
},
},
// 图片上传成功的回调
handleImageSuccess
(
res
,
file
,
index
)
{
// 假设上传接口返回的图片URL在 res.url 中
console
.
log
(
res
,
file
,
index
);
this
.
data
[
index
].
image_url
=
res
.
url
;
this
.
save
();
},
// 图片上传前的验证
beforeImageUpload
(
file
)
{
const
isImage
=
file
.
type
.
startsWith
(
'
image/
'
);
const
isLt2M
=
file
.
size
/
1024
/
1024
<
5
;
if
(
!
isImage
)
{
this
.
$message
.
error
(
'
只能上传图片文件!
'
);
return
false
;
}
if
(
!
isLt2M
)
{
this
.
$message
.
error
(
'
图片大小不能超过 2MB!
'
);
return
false
;
}
return
true
;
},
// 预览图片
previewImage
(
url
)
{
// 使用 Element UI 的 Image 组件预览
const
h
=
this
.
$createElement
;
this
.
$msgbox
({
title
:
'
图片预览
'
,
message
:
h
(
'
img
'
,
{
attrs
:
{
src
:
url
,
style
:
'
max-width: 100%; max-height: 500px;
'
}
}),
showCancelButton
:
false
,
confirmButtonText
:
'
关闭
'
});
},
// 删除图片
removeImage
(
index
)
{
this
.
$confirm
(
'
确定要删除这张图片吗?
'
,
'
提示
'
,
{
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
,
type
:
'
warning
'
}).
then
(()
=>
{
this
.
data
[
index
].
image_url
=
''
;
this
.
save
();
this
.
$message
({
type
:
'
success
'
,
message
:
'
删除成功!
'
});
}).
catch
(()
=>
{
});
}
},
},
computed
:
{
computed
:
{
}
}
...
...
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