基于elementUI实现图片预览组件

iOS122 发布于2019-08-26 13:38 / 564人阅读

摘要：如果插件是一个对象，必须提供方法。当方法被同一个插件多次调用，插件将只会被安装一次。的插件应当有一个公开方法。不用，去掉这个属性，但是会污染全局样式，可配合或者推荐，所有样式写在当前组件或下面组件源码放大图片更多组件点击这儿

这是一个简单的点击图片预览的组件
顺便记录一下写组件期间踩的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文件导出注册到全局即可：

好了，这些是废话！

组件的使用：

参数
data：传入图片数组；
max-show：一次最多显示几张图片

效果如下：

补充：vue组件开发中 style 添加scoped后，修改第三方组件样式没有效果问题：

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

组件源码：

更多组件点击这儿 --> link : github>components>star-pic-list

GPU云服务器云服务器图片预览 java文档预览实现清空图片预览图片本地预览

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109227.html

彻底搞懂elementUI指令与服务模式原理

摘要：不甘做轮子的搬运工记录一个实习菜鸟写图片预览组件的艰辛道路很多组件中使用了指令模式和服务模式，比如以下以组件为例指令模式全屏覆盖服务模式跟大多数萌新一样，啥是服务先看看的目录结构打开目录，找到其下目录文件中有一大坨组件注册信息重点找不甘做轮子的搬运工！！！记录一个实习菜鸟写图片预览组件的艰辛道路~ elementUI很多组件中使用了指令模式和服务模式，比如：loading、mes...

freewolf 2019-08-26 13:38 评论0 收藏0
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

摘要：简介最近写了一个基于权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。简介最近写了一个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。源码地址...

_ivan 2019-08-23 14:06 评论0 收藏0
HeyUI组件库按需加载功能上线，盘点HeyUI组件库有哪些独特功能？

摘要：测试复制至剪切板的文本测试相关文档复制剪切板滚动至视图内其实，这是一个非常方便的功能，比如说，分页加载后滚动至头部，切换页面时切换至头部。HeyUI组件库如果你还不了解heyui组件库，欢迎来我们的官网或者github参观。官网 github 当然，如果能给我们一颗✨✨✨，那是最赞的了！按需加载当heyui组件库的组件越来越多的时候，按需加载的功能终于上线了。话不多说，先把按需...

IamDLY 2019-05-22 19:08 评论0 收藏0
基于Vue,ElementUI开发的一款表单设计器

摘要：介绍基于开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来工具地址地址特性可视化配置页面提供栅格布局，并采用实现对齐一键预览配置的效果一键生成配置数据一键生成代码，立即可运行提供自定义组件满足用户自定义介绍基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来工具地址：http://to...

DandJ 2019-08-23 12:13 评论0 收藏0
vue2.0-基于elementui换肤[自定义主题]

摘要：直接上预览链接基于换肤自定义主题项目增加主题组件在项目的下添加文件夹文件获取地址项目增加自定义主题自定义添加主题下载地址项目引入和使用选择你想要随主题改变的元素在里面，不希望随主题改变的可以注释掉选择皮肤之后把记录存在里面。 0. 直接上预览链接 [vue2.0-基于elementui换肤[自定义主题]](https://mgbq.github.io/vue-pe... 1. ...

lx1036 2019-08-29 15:17 评论0 收藏0