el-dropdown不能自己在每一项添加方法,控制台会报错
el-dropdown不能自己在每一项添加方法,控制台会报错
<el-dropdown style="margin-left: 103px">
<el-button type="primary" style="color: #ffffff">
<el-icon style="margin-right: 5px">
<Plus />
</el-icon>
新增素材
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="openCourse">11</el-dropdown-item>
<el-dropdown-item @click="openExam">22</el-dropdown-item>
<el-dropdown-item @click="openQuestion">33</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
改成
<el-dropdown style="margin-left: 103px" @command="choiceCourseAdd">
<el-button type="primary" style="color: #ffffff">
<el-icon style="margin-right: 5px">
<Plus />
</el-icon>
新增素材
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="11"
>課程</el-dropdown-item
>
<el-dropdown-item command="22"
>考試</el-dropdown-item
>
<el-dropdown-item command="33"
>問卷</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
方法:
const choiceCourseAdd = (command) => {
console.log(command, "command");
if (command == "11") {
console.log('11')
} else if (command == "22") {
console.log('22')
} else {
console.log('33')
}
};
调用视频,文件的案例
<el-dropdown style="margin-left: auto">
<el-button type="primary" style="color: #ffffff">
<el-icon style="margin-right: 5px">
<Plus />
</el-icon>
添加素材
</el-button>
<template #dropdown>
<el-dropdown-menu ref="dropdownRef">
<el-dropdown-item @click="uploadCourseVideo"
>视频
<input
type="file"
ref="filevideoInputRef"
@change="handleVideoChange"
accept="video/*"
style="display: none"
/>
</el-dropdown-item>
<el-dropdown-item @click="uploadCoursePaper"
>文件
<input
type="file"
ref="fileInputRef"
@change="handlefileChange"
accept=".pdf, .ppt, .doc, .docx"
style="display: none"
/>
</el-dropdown-item>
<el-dropdown-item @click="openExam"
>考試</el-dropdown-item
>
<el-dropdown-item @click="openQuestion"
>問卷</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown style="margin-left: auto" @command="choiceCourseAdd">
<el-button type="primary" style="color: #ffffff">
<el-icon style="margin-right: 5px">
<Plus />
</el-icon>
添加素材
</el-button>
<template #dropdown>
<el-dropdown-menu ref="dropdownRef">
<el-dropdown-item command="视频"
>视频
<input
type="file"
ref="filevideoInputRef"
@change="handleVideoChange"
accept="video/*"
style="display: none"
/>
</el-dropdown-item>
<el-dropdown-item command="文件"
>文件
<input
type="file"
ref="fileInputRef"
@change="handlefileChange"
accept=".pdf, .ppt, .doc, .docx"
style="display: none"
/>
</el-dropdown-item>
<el-dropdown-item command="考试"
>考試</el-dropdown-item
>
<el-dropdown-item command="问卷"
>問卷</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
const choiceCourseAdd = (command) => {
if (command == "视频") {
filevideoInputRef.value.click();
}else if(command == "文件"){
fileInputRef.value.click();
} else if (command == "考试") {
dialogExam.value = true;
getCreatdByTableListFn();
} else {
dialogQuestionnaires.value = true;
questionList();
}
}
视频的逻辑
const createVideoDuration = (file, name) => {
const video = document.createElement("video");
video.preload = "metadata";
video.onloadedmetadata = () => {
window.URL.revokeObjectURL(video.src);
const duration = formatVideoDuration(video.duration);
let url = URL.createObjectURL(file);
let videoList = dataList.value.filter((v) => v.typeName == "视频");
if (videoList?.length >= 1) {
ElMessage.error("只能上传一个视频");
} else {
dataList.value.push({
name: name,
count: duration,
data: file,
url: url,
seconds: Math.floor(video.duration),
typeName: "视频",
idhaveEdit: route.query.id ? false : true,
});
}
};
video.src = URL.createObjectURL(file);
};
const formatVideoDuration = (seconds) => {
const minutes = Math.floor(seconds / 60);
const formattedSeconds =
seconds % 60 < 10
? "0" + Math.floor(seconds % 60)
: Math.floor(seconds % 60);
return minutes + "分" + formattedSeconds + "秒";
};
// 课程内容的视频
const handleVideoChange = (e) => {
const file = e.target.files[0];
if (file) {
const fileSize = file.size; // 获取文件大小
const maxSize = 400 * 1024 * 1024; // 400MB转换为字节
if (fileSize > maxSize) {
ElMessage.error("上传的视频不能超过400MB!");
} else {
const name = e.target.files[0].name;
if (file && file.type.startsWith("video/")) {
createVideoDuration(file, name);
}
}
}
};
文件的逻辑
//课程内容的文件
const handlefileChange = (e) => {
let file = e.target.files[0];
let fileName = file.name;
var filetypes = [".doc", ".ppt", ".pdf", ".docx"];
let filextend = fileName.substring(fileName.lastIndexOf("."));
if (filetypes.indexOf(filextend) < 0) {
ElMessage({
message: "上传文件格式只能是pdf/ppt/docx/doc",
type: "warning",
});
return false;
}
let url = URL.createObjectURL(e.target.files[0]);
let isHave = dataList.value.some((v) => v.name == e.target.files[0].name);
if (isHave) {
ElMessage({
message: "文件已存在",
type: "warning",
});
return false;
} else {
dataList.value.push({
name: e.target.files[0].name,
count: "-",
data: e.target.files[0],
url: url,
idhaveEdit: route.query.id ? false : true,
});
//清空input的值
fileInputRef.value.value = "";
}
};