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>
相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD7 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding7 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空7 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui