携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

 目的

封装全局图片组件,就是为了实现：当某个数据没有src属性时，能有一个默认图片

实现步骤

封装这个组件不需要从0开始,elementui里有 首先在src下components里建个文件,存放图片组件, 注册全局组件在components下index.js设置全局注册 install(Vue){ //注册全局组件 Vue.component(ImageHolder,ImageHolder) } 其他全局注册步骤,现省略

注册完后在父组件使用 并传src的值,然后子组件接收值 还有考虑下,当图片加载失败时也要给个默认的图片

第一步

一创建组件

在src/components目录下创建组件

具体目录结构如下

|-components
	|-ImageHolder
	   |-index.vue  # 组件本身
	   |-head.jpg   # 默认头像，当没有图像需要显示时，使用这张图

代码

src\components\ImageHolder\index.vue

<template>
<!-- el-image组件 ：https://element.eleme.io/#/zh-CN/component/image -->
  <el-image :src="src" class="img-container">
   <!-- error插槽：设置如果出错，要显示的内容 -->
    <template #error>
      <!-- 静态资源就近维护：把head.jpg这张图放在这个组件的目录下 -->
      <img src="./head.jpg" alt="">
    </template>
  </el-image>
</template>

<script>
export default {
  // 定义如何从父组件中接收数据
  props: {
    src: {
      type: String,
      default: ''
    }
  }
}
</script>


<style scoped lang="scss">
.img-container {
  border-radius: 50%;
  ::v-deep img{
    width: 100px;
    height: 100px;
  }
}
</style>

 备注

// 样式穿透， 有三种写法：
// 1. >>>       在less中使用
// 2. /deep/    在less中使用
// 3. ::v-deep  在scss中使用
// v-slot: 简写# 具名插槽

二全局注册

在src/components/index.js中注册全局组件

// 定义全局组件PageTools
// 省略其它...
+ import ImageHolder from '@/components/ImageHolder/index.vue'
const MyPlugin = {
  install: function(Vue) {
    // 省略其它...
+   Vue.component('ImageHolder', ImageHolder)
  }
}

export default MyPlugin

在业务组价中使用

在src\views\ployees\ployees.vue中，用上面定义的组件来显示员工图像

<el-table-column label="头像">
  <template slot-scope="scope">
		<image-holder :src="scope.row.staffPhoto" />
  </template>
</el-table-column>

props接收父组件传过来的值