基于elementUI实现图片预览组件

jiezi

6 年前

这是一个简单的点击图片预览的组件顺便记录一下写组件期间踩的 vue 中 scope 的坑~

从注册全局组件开始叭！
项目目录：
模仿 elementUI 目录结构，目录名是组件名，src 中是组件源文件（或者 js 服务文件），文件目录下还有一个 index.js 用于同一管理 src 中的所有文件，导出并注册，这个组件我们只有一个 vue 文件件
先看 index.js 文件里有什么：
// 引入了 src 下的 vue 组件文件
import starPicList from ‘./src/star-pic-list’;

/* istanbul ignore next */
starPicList.install = function(Vue) {
//starPicList.name 这就是后面可以使用的组件的名字 (star-pic-list.vue 文件里面定义的 name)，install 是默认的一个方法
Vue.component(starPicList.name, starPicList);
};

export default starPicList;
接下来介绍一下 install 方法：Vue.use(plugin)：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。当 install 方法被同一个插件多次调用，插件将只会被安装一次。Vue.js 的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
导出 starPicList 组件后在管理组件 js 文件中引用，然后由这个统一管理 js 文件导出注册到全局即可：

好了，这些是废话！
组件的使用：
<!– 图片列表形式，点击查看图片列表，点击显示上（下）一张 –>
<template v-slot=”scope”>
<star-pic-list :data=”scope.row.pic” :max-show=”2″/>
</template>
参数 data：传入图片数组；max-show：一次最多显示几张图片
效果如下：

补充：vue 组件开发中 style 添加 scoped 后，修改第三方组件样式没有效果问题：
在 vue 的开发中，我们通常和 element-UI 配合开发，就会遇到，在组件 style 中添加 scoped 后，element-ui 中使用的子组件样式无法改变。不用 scoped，去掉这个属性，但是会污染全局样式，（可配合 less 或者 scss（推荐 scss），所有样式写在当前组件 id 或 class 下面）

组件源码：
<template>
<div id=”star-pic-vue”>
<template v-if=”data”>
<img v-for=”item in images”
:src=”item”
id=”contract_url”
@click=”enlargePic”/>
<template v-if=”isDialogShow”>
</template>
<el-dialog
:visible.sync=”centerDialogVisible”
modal
close-on-click-modal
custom-class=”dialog”
>
<el-carousel :autoplay=”false” arrow=”always”>
<el-carousel-item v-for=”item in data” :key=”item”>
<img :src=”item”>
</el-carousel-item>
</el-carousel>
</el-dialog>
</template>
</div>
</template>