vue+elementui实现列表播放音频，弹框播放视频，轮播图片，外界地址，富文本内容

最新推荐文章于 2024-06-22 15:17:57 发布
最新推荐文章于 2024-06-22 15:17:57 发布
阅读量1.1w 收藏 40
点赞数 6
文章标签： vue.js elementui 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fairyasd/article/details/122002071
版权

vue+elementui实现列表播放音频，弹框播放视频，轮播图片，外界地址，富文本内容
实现效果：
1、音频播放：
在这里插入图片描述
2、视频播放
在这里插入图片描述
3、图片轮播
在这里插入图片描述
4、跳转外界链接
在这里插入图片描述
5、富文本
在这里插入图片描述
上代码

<template>
  <el-card class="threed_onlycss">
    <!-- 查询区域 -->
    <div :class="{ active: isActive }">
      <el-row :gutter="20">
        <el-col :span="4" class="elscol">
          <el-input
            v-model="forma.name"
            placeholder="请输入名称"
            clearable
          ></el-input>
        </el-col>

        <el-col :span="5">
          <el-button type="success" @click="searchCon" icon="el-icon-search"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 分页列表区域 -->
    <div class="paginationListArea">
      <el-table
        :data="list"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <!-- <el-table-column prop="explainUrl" label="音频" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.explainUrl">
              <div>
                <audioplay :recordFile="scope.row.explainUrl"></audioplay>
              </div>
            </div>
            <div v-else>暂无音频</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="explainUrl" label="音频" align="center">
          <template slot-scope="scope">
            <i
              style="
                cursor: pointer;
                margin-right: 10px;
                margin-top: 3px;
                font-size: 25px;
              "
              v-if="scope.row.explainUrl"
              @click="play(scope.$index, scope.row)"
              :class="
                icon == scope.row.explainUrl
                  ? 'el-icon-video-pause'
                  : 'el-icon-video-play'
              "
              :style="icon == scope.row.explainUrl ? 'color: red;' : ''"
            >
              <audio :id="scope.row.explainUrl">
                <source :src="scope.row.explainUrl" type="audio/mpeg" /></audio
            ></i>

            <div v-else>暂无音频</div>
          </template>
        </el-table-column>
        <el-table-column prop="videoURL" label="视频" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.videoURL">
              <el-button
                type="success"
                plain
                @click="playVideo(scope.row.videoURL)"
                ref="btn"
                size="mini"
              >
                播 放
              </el-button>
            </div>
            <div v-else>暂无视频</div>
          </template>
        </el-table-column>
        <el-table-column prop="imgall" label="图片" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.imgall.length != 0">
              <el-button
                type="success"
                plain
                @click="previewimg(scope.row.imgall)"
                ref="btn"
                size="mini"
              >
                预 览
              </el-button>
            </div>
            <div v-else>暂无资源</div>
          </template>
        </el-table-column>
        <el-table-column prop="urlT3D" label="3D" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.urlT3D">
              <el-button
                type="success"
                plain
                @click="preview3D(scope.row.urlT3D)"
                ref="btn"
                size="mini"
              >
                预 览
              </el-button>
            </div>
            <div v-else>暂无资源</div>
          </template>
        </el-table-column>

        <el-table-column prop="content" label="中文简介" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.content">
              <el-button
                type="success"
                plain
                @click="introduction_chinese(scope.row.content)"
                ref="btn"
                size="mini"
              >
                预 览
              </el-button>
            </div>
            <div v-else>暂无资源</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="deletUserById(scope.$index, scope.row)"
              circle
              >清 空</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-paperclip"
              @click="removeUserById(scope.$index, scope.row)"
              circle
              >编 辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        center
        background
        layout="prev, pager, next,  total, jumper"
        :page-size="limit"
        :total="this.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 视频 -->
    <el-dialog
      title="视频预览"
      :visible.sync="dialogPlay"
      width="30%"
      @close="closeDialog"
    >
      <video
        :src="videoUrl"
        controls
        autoplay
        class="video"
        ref="dialogVideo"
        width="100%"
      ></video>
    </el-dialog>
    <!-- 3d资源 -->
    <el-dialog
      title="3D展示"
      :visible.sync="dialog3d"
      width="30%"
      @close="closeDialog3d"
    >
      <iframe
        :src="src3d"
        id="mobsf"
        scrolling="no"
        frameborder="0"
        style="
          position: absolute;
          top: 50px;
          left: 0px;
          right: 0px;
          bottom: 0px;
          height: 500px;
          width: 100%;
        "
      ></iframe>
    </el-dialog>
    <!-- 图片轮播 -->
    <el-dialog
      title="图片轮播"
      :visible.sync="dialogimgs"
      width="30%"
      @close="closeDialogimgs"
    >
      <el-carousel indicator-position="outside" :interval="2000">
        <el-carousel-item v-for="(item, index) in imgUrls" :key="index">
          <img ref="img" :src="item.resourceRoute" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <!--中文简介-->
    <el-dialog
      title="中文简介"
      :visible.sync="dialogChinese"
      width="30%"
      @close="closeDialogChinese"
    >
      <quill-editor
        v-model="content_Chinese"
        ref="myQuillEditor"
        :options="editorOption"
        @change="onEditorChange($event)"
        class="editor"
      ></quill-editor>
    </el-dialog>
  </el-card>
</template>

<script>
import audioplay from "./audioplay.vue";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  //   ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  data() {
    return {
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions,
        },
        theme: "snow",
        placeholder: "请输入正文",
      },
      isActive: false,
      //搜索的条件数据
      forma: {
        name: "",
      },
      list: [], //存放列表
      page: 1,
      pages: 1, //
      limit: 8,
      total: 0,
      multipleSelection: [],
      museumId: "",
      // 视频播放
      dialogPlay: false,
      videoUrl: "",
      // 3d资源
      dialog3d: false,
      src3d: "",
      // 图片轮播
      dialogimgs: false,
      imgUrls: [],
      // 中文简介
      dialogChinese: false,
      content_Chinese: "",
      // 视频播放
      audio: "",
      icon: "el-icon-video-play",
    };
  },
  methods: {
    play(index, row) {
      if (
        this.audio !== "" &&
        this.audio !== document.getElementById(row.explainUrl)
      ) {
        this.audio.pause();
      }
      this.audio = document.getElementById(row.explainUrl);
      this.icon = row.explainUrl;
      if (this.audio.paused) {
        this.audio.play();
        this.icon= row.explainUrl
      } else {
         this.icon = ""
        this.audio.pause();
      }
    },
    // 富文本编辑器 内容改变事件
    onEditorChange() {},
    // 中文简介
    introduction_chinese(cont) {
      console.log(cont);
      this.dialogChinese = true;
      this.content_Chinese = cont;
    },
    closeDialogChinese() {},
    // 图片
    previewimg(imgs) {
      console.log(imgs);
      this.imgUrls = imgs;
      this.dialogimgs = true;
    },
    closeDialogimgs() {
      this.imgUrls = [];
    },
    // 3d
    closeDialog3d() {
      this.src3d = "";
    },
    preview3D(url) {
      this.dialog3d = true;
      this.src3d = url;
    },
    // 视频
    playVideo(url) {
      this.dialogPlay = true;
      this.videoUrl = url;
    },
    closeDialog() {
      this.videoUrl = ""; //清空数据 关闭视频播放
    },

    //获取场馆列表
    getUserList(page, limit) {
      this.axios
        .get(
          "/museum/relic_resources/list?page=" +
            page +
            "&limit=" +
            limit +
            "&museumId=" +
            this.museumId +
            "&name=" +
            this.forma.name
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.total = res.data.data.total;
            this.list = res.data.data.records;
            this.list.forEach((item) => {
              var imgall = [];
              // if (item.table_id == "relic") {
              //   item.table_id = "文物";
              // } else {
              //   item.table_id = "场馆";
              // }
              item.resources.forEach((self) => {
                if (self.typeId == "video") {
                  item.videoURL = self.resourceRoute;
                } else if (self.typeId == "3D") {
                  item.urlT3D = self.resourceRoute;
                } else if (self.typeId == "image") {
                  imgall.push(self);
                }
              });
              item.imgall = imgall;
            });
          }
        });
    },
    // ---------------

    handleCurrentChange(cpage) {
      this.page = cpage;
      this.getUserList(this.page, this.limit);
    },
    handleSizeChange(psize) {
      this.limit = psize;
    },

    //查询
    searchCon() {
      this.page = 1;
      this.getUserList(this.page, this.limit);
    },

    //编辑
    removeUserById(index, rows) {
      console.log(rows);
      this.$router.push({ path: "/museum/3Dadd", query: { id: rows.id } });
    },
    //添加
    removeUserByIdadd() {
      this.$router.push({ path: "/museum/3Dadd" });
    },
    //删除
    deletUserById(index, rows) {
      console.log(rows.id);
      this.$confirm("此操作将该数据清空, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/museum/relic_resources/remove/" + rows.id)
            .then((res) => {
              this.getUserList(this.page, this.limit);
              this.$message({
                type: "success",
                message: "清空成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空",
          });
        });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.museumId == window.sessionStorage.getItem("museumId");
    this.museumId == null ? "" : window.sessionStorage.getItem("museumId");
    //调用方法获取数据
    this.getUserList(this.page, this.limit);
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  components: {
    quillEditor,
    audioplay,
  },
};
</script>

<style scoped>
@import url("../../assets/css/index");
.el-cascader {
  width: 100%;
}
.btn {
  margin-top: 1%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.paginationListArea {
  margin-top: 1%;
}
.pagination {
  margin-top: 2%;
}

.active {
  display: none;
}
.elscol .el-input__inner {
  width: 100% !important;
}
.el-carousel__item.is-animating img {
  width: 100%;
  height: 100%;
}
</style>
<style>
.threed_onlycss .ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 400px !important;
  overflow-y: scroll;
}
</style>
Fairyasd
关注
  • 6
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
使用element走马灯 + video-player实现图片和视频混合轮播
webpanda的博客
12-21 4765
准备工作： 安装element-ui npm i element-ui -s 安装video-player npm i vue-video-player -s HTML部分： 首先判断数据是否为视频格式，如果是视频格式就使用播放器，如果是图片使用img标签 <el-carousel height="425px" :autoplay="autoplay" :interval="interval" :i.
vue+elementui实现点击table中的单元格触发事件–弹框
12-28
elementui中提供了点击行处理事件 查看位置： elementui的table事件 elementui的table中怎样点击某个单元格触发事件？ 可以先看一下官网中table的自定义列模板代码 <span st
vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）
朝阳39的博客
01-27 6727
相关技巧，详见注释 <template> <!-- 音乐播放器 --> <div class="container"> <h2>{{ musicName }}</h2> <audio ref="Ref_audioPlayer" controls :src="audioPathDic[musicName]" @ended="overAudio" @pause=.
Vue2+ElementUI实现el-table表格的自动滚动播放
最新发布
AdiligentBoy的博客
06-22 570
Vue2+ElementUI实现el-table表格的自动滚动播放
vue中使用el-carousel组件实现图片轮播效果
热门推荐
07-09 2万+
代码实现： <!--home--> <template> <div> <el-carousel trigger="click" height="250px" :interval="3000" arrow="always" style="width:800px"> <el-carousel-item v-for="item in imgList" :key="item.name"> <img :src
vue + element ui实现播放器功能以及动态传递url导致无法播放的坑
qimingzhennan_to的博客
03-14 1815
vue + element ui实现播放器功能以及动态传递url导致无法播放的坑
vue+elementui+springboot实现弹框播放视频
weixin_43242931的博客
07-05 2477
vue+elementui+springboot实现弹框播放视频
Vue + ElementUI + 播放器组件
chu_haiquan的博客
04-30 1万+
<template> <div> <el-row> <el-col :span="4"> <el-popover placement="top-start" trigger="hover"> <div style="text-align:...
vue+elementUI 实现内容区域高度自适应的示例
10-14
总结起来，Vue+Element UI实现内容区域高度自适应的方法主要有两种：一是通过Vue的动态绑定和JavaScript事件监听；二是利用CSS3的`calc()`函数。两者各有优缺点，可以根据项目的具体需求和浏览器支持情况选择合适的...
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
总结来说，实现Vue+Element UI点击表格单元格触发事件并弹出对话框的关键在于使用`template`和`scope`插槽来定制表格列，以及Element UI提供的组件如`el-popover`来创建弹框。通过这种方式，我们可以灵活地控制表格...
vue+elementUI实现图片上传功能
01-19
本文实例为大家分享了vue+elementUI图片上传的具体代码，供大家参考，具体内容如下 1、html 图片 prop=logo> <el-upload name=file v-if=optype==0 :action='/upload' accept=.jpg, .png list-type=picture-...
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
刷新浏览器后不进行任何点击操作时，不播放声音 | 解决方案（VUE-Element）
慌途L
06-12 5413
以下代码可能过长，请耐心查阅 前言 最近项目中有播放背景声音的一个功能，后面发现刷新浏览器后，不对页面进行任何点击操作，浏览器不播放声音。作为一个后端开发，突然搞这么一个前端解决方案是有点懵逼的，下面是和一名前端大佬讨论的结果。 解决方案： 1.将提供给用户的浏览器的播放声音权限打开，然后重新打包浏览器发出去； 2.给用户一个弹窗提示，点击按钮，打开浏览器声音权限或直接跳转到设置声音的页面；（经过测试发现实现不了，因为系统部署在服务端，而打开的是本地浏览器的配置，无法实现这个功能） 3.置顶一个..
vue el-dialog嵌入video实现视频播放功能
wangjie的博客
07-03 1392
el-dialog弹窗实现视频播放，切换不同选项卡播放不同视频。
ElementUI 轮播图
shykevin的博客
01-19 2634
一、概述 因项目需求，需要增加轮播图，官方demo效果如下： 但这个不是我们想要的，我们需要的是这样的。 二、代码实现 需要在原有的基础上，修改页面样式才行。 test.vue <template> <div style="width: 700px"> <el-carousel indicator-position="outside"> ...
11.21 尚品汇 day05 elementui 组件使用轮播图 ；watch+$nextTick完美解决轮播图；api获取floor组件的mock数据同时复用floor组件,父子通信；
m0_56356342的博客
11-21 1288
派发action，本来在floor组件挂载完毕触发，
基于vue element ui实现轮播图（复制即可）
m0_62586364的博客
01-17 886
基于vue element ui实现轮播图
Vue实现自定义音频播放器组件
dss0225的博客
12-07 4308
Vue实现自定义组件音频播放组件
Vue+ElementUI: 手把手教你做一个audio组件，audio的播放与下载
lqlq54321的博客
12-22 7843
audio组件：播放功能 先看效果图： 功能：可进行播放，暂停，刷新，调节播放速度，滚动条拖拽 代码 <template> <div class="musicPlay" v-if="audioVisible"> <audio ref="audio" @play="playFunc" @pause="pauseFunc" @timeupdate="timeupdateFunc" @canplay="can
vue + elementUI实现左右列表联动
05-25
实现左右列表联动，可以使用 ElementUI 的 Transfer 组件。该组件提供了两个列表，左边为未选中的数据列表，右边为已选中的数据列表，可以通过拖拽或者点击按钮来进行数据的移动。 具体实现步骤如下： 1. 引入 ElementUI 的 Transfer 组件和相关样式文件。 ``` import { Transfer } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' ``` 2. 在模板中使用 Transfer 组件，并传入需要展示的数据列表和相关配置项。 ``` <template> <el-transfer :data="dataList" :left-default-checked="[1, 3]" :right-default-checked="[2, 4]" :titles="['未选中', '已选中']" :button-texts="['>', '<']" :filterable="true" filter-placeholder="请输入关键字" :format="format" @change="handleChange" /> </template> ``` 其中，dataList 表示数据列表，left-default-checked 和 right-default-checked 表示默认选中的数据项，titles 表示左右两个列表的标题，button-texts 表示操作按钮的文字，filterable 表示是否支持搜索过滤，filter-placeholder 表示搜索框的提示文本，format 是一个函数，用来格式化每个选项的展示文本，handleChange 是组件的 change 事件回调函数。 3. 在脚本中定义 dataList 数据列表，并实现 format 和 handleChange 函数。 ``` <script> export default { data() { return { dataList: [ { key: 1, label: '选项1' }, { key: 2, label: '选项2' }, { key: 3, label: '选项3' }, { key: 4, label: '选项4' } ] } }, methods: { format({ label, key }) { return `${label} (${key})` }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys) } } } </script> ``` 其中，format 函数接收一个参数，该参数包含当前选项的 label 和 key，需要返回一个字符串，用来展示在列表中。handleChange 函数接收三个参数，分别为目标列表的 key 数组，操作类型和移动的 key 数组。 这样，就可以实现左右列表联动的效果了。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值