如何用elementUI快速开发图片预览功能组件？

本文共计917个文字，预计阅读时间需要4分钟。

这是一个简单的点击图片预览组件+方便记录组件使用期限的vue中scope的坑~！从注册全局组件开始！项目目录：+ 模仿elementUI目录结构，目录名是组件名，src中是组件源文件（或“）。

这是一个简单的点击图片预览的组件

顺便记录一下写组件期间踩的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 的参数调用。