当前位置: 首页 > article >正文

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

http://www.kler.cn/a/287235.html

相关文章:

  • R语言 | 宽数据变成一列,保留对应的行名和列名
  • Linux网络——套接字编程
  • 【动手学深度学习Pytorch】6. LeNet实现代码
  • C++AVL平衡树
  • 系统掌握大语言模型提示词 - 从理论到实践
  • java基础知识全集(一篇看到爽)(持续更新中)
  • 如何在 PostgreSQL 中安装和配置空间数据支持
  • Linux Kernel 6.12版预计将支持在崩溃后显示二维码 后续可以解码排查错误
  • docker导出导入镜像
  • golang并发编程—— 并发模式
  • 收纳程序 源码
  • 小程序中使用page-container来做弹窗
  • 数据库表的分类
  • Redis与SpringMVC的整合与最佳实践
  • LDR6023:革新手机转接器体验,快充与OTG并存的科技杰作
  • 【mysql】03通过命令行快速导出带字段名的csv格式数据
  • QT Quick QML 添加海康威视SDK云台控制模块
  • java操作日期时间类
  • v-bind,v-on与简写:和@有什么区别?
  • [Linux网络]TCP三次握手和四次挥手的连接建立和断开
  • win10环境下gvim离线配置插件的一些补充
  • 8.22
  • javascript指什么
  • blender4.2中安装插件的方式
  • 国密起步5:GmSSL3交叉编译arm64
  • Qt/QML学习-Dialog