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>
相关推荐
paopaokaka_luck28 分钟前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风42 分钟前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Southern Wind1 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树2 小时前
Vue3优化指南:少写代码,多提性能
vue.js
90后的晨仔2 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
前端拿破轮2 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git
90后的晨仔2 小时前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
重生之我要当java大帝2 小时前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
Mintopia3 小时前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Shi_haoliu3 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office