vue elementui 封装图片、视频集合组件 组件的基本应用

用红线框起来的地方理论上用的是同一套代码 那么就可以封装成组件

javascript 复制代码
//父级页面的调用
<div class="title">活动缘起</div>
<div class="grid-content bg-gray-light">
  ...
  <pv-box v-if="form && form.originMaterials && form.originMaterials.length > 0" :pv-list="form.originMaterials" :picture-list="originMaterialsImgs"></pv-box>
  ..
</div>

<div class="title">活动范畴</div>
<div class="grid-content bg-gray-light">
  ...
  <pv-box v-if="form && form.categoryMaterials && form.categoryMaterials.length > 0" :pv-list="form.categoryMaterials" :picture-list="categoryMaterialsImgs"></pv-box>
  ..
</div>

<div class="title">反思感悟</div>
<div class="grid-content bg-gray-light">
  ...
  <pv-box v-if="form && form.reflectionMaterials && form.reflectionMaterials.length > 0" :pv-list="form.reflectionMaterials" :picture-list="reflectionMaterialsImgs"></pv-box>
  ..
</div>

//主要就是把参数传到子级 <pv-box :pv-list="form.reflectionMaterials" :picture-list="reflectionMaterialsImgs"></pv-box>

<script>
import PvBox from './imgsVideo';

export default {
  components: { PvBox },
  ...

//子级页面:
<template>
  <div class="origin-materials">
    <div class="origin-materials-list" v-for="(mediaItem, index) in pvList" :key="index">
      <div v-if="mediaItem.fileType == '1'">
        <!-- 显示图片 -->
        <el-image :src="mediaItem.fileUrl" style="width: 200px; height: 200px" fit="cover" :preview-src-list="pictureList" preview></el-image>
      </div>
      <div v-else-if="mediaItem.fileType == '3'">
        <!-- 显示视频 -->
        <video :src="mediaItem.fileUrl" controls style="width: 200px; height: 200px">
          <!-- 视频不支持时的后备内容 -->
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  </div>  
</template>

<script>

export default {
  components: {},
  props: {
    // 定义props,注意这里使用camelCase命名规范
    pvList: {
      type: Array, // 或者其他合适的类型,如Number
      //required: true // 如果这个prop是必须的,可以设置为true
      default: null // 默认值为null,表示还没有接收到ID
    },
    pictureList: {
      type: Array, // 或者其他合适的类型,如Number
      //required: true // 如果这个prop是必须的,可以设置为true
      default: null // 默认值为null,表示还没有接收到ID
    },
  },
  watch: {
  },
  data () {    
    return {  
    };
  },  
  methods: {}
};
</script>
<style scoped>
.origin-materials-list{ margin-right: 20px;}
</style>
相关推荐
牧杉-惊蛰1 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
FuckPatience2 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net
CoderYanger2 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
赛博切图仔2 小时前
qiankun、micro-app、wujie,2025年我们该选谁?
前端·javascript
LuckySusu2 小时前
【vue篇】Vue 自定义指令完全指南:从入门到高级实战
前端·vue.js
LuckySusu2 小时前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js
LuckySusu2 小时前
【vue篇】Vue.js 2025:为何全球开发者都在拥抱这个前端框架?
前端·vue.js
LuckySusu2 小时前
【vue篇】Vue 单向数据流铁律:子组件为何不能直接修改父组件数据?
前端·vue.js
LuckySusu2 小时前
【vue篇】React vs Vue:2025 前端双雄终极对比
前端·vue.js