el-dropdown不能自己在每一项添加方法，控制台会报错

m0_52611940

于 2024-08-28 14:00:03 发布

阅读量323

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_52611940/article/details/141638729

版权

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 = "";
  }
};