基于elementUI的图片预览组件示例代码

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

顺便记录下写组件时vue步进的范围坑~

首先注册全局组件！

项目目录：

模仿elementUI目录结构，目录名为组件名，src为组件源文件(或js服务文件)，同一管理src中所有文件的文件目录下也有一个index.js，导出注册。这个组件只有一个vue文件

首先看看index.js文件中有什么：

//从“”导入vue组件文件导入star piclist。/src/src下的“star-pic-list ”;/*伊斯坦布尔忽略next */star piclist . install=function(vue){//star piclist . name这是以后可以使用的组件的名称(在star-pic-list.vue文件中定义的名称)，install是默认方法vue.component (starpiclist.name，star piclist)；};导出默认星形列表；接下来，介绍安装方法：

Vue.use(plugin):安装Vue.js插件。如果插件是一个对象，您必须提供安装方法。如果插件是一个函数，它将被用作安装方法。安装方法将作为Vue的参数调用。当同一插件多次调用安装方法时，该插件将只安装一次。Vue.js的插件应该有一个公开的方法install。这个方法的第一个参数是Vue构造函数，第二个参数是可选的option对象：

导出starPicList组件后，在管理组件的js文件中引用，然后通过这个统一的管理js文件进行全局导出和注册：

好吧，这是胡说八道！

组件的使用：

！-以图片列表的形式，点击查看图片列表，点击显示上(下)一模板v-slot=' scope ' star-pic-list 3360 data=' scope . row . pic ' : max-show=' 2 '/模板参数数据：传入图片数组；最大显示：一次最多可以显示多少张图片

效果如下：

补充：在vue组件开发中添加scoped to style后，对修改第三方组件样式没有影响；

在vue的开发中，我们通常会与element-ui进行合作，但是我们会遇到在element-UI中使用的子组件的样式在scoped被添加到组件样式后无法更改的情况。

如果没有限定作用域，这个属性将被删除，但它会污染全局样式(它可以与less或SCS(推荐的SCS)匹配，并且所有样式都写在当前组件id或类下)

组件源代码：

template div id=' star-pic-vue ' template v-if=' data ' img v-for=' item in images ' : src=' http : item ' id=' contract _ URL ' @ click=' enlargePic '/template v-if=' Isdialog show '/template El-dialog-dialog 3360可见。同步=“中心对话框可见”模式关闭-点击-模式自定义-class=' dialog ' El-carousel : autoplay=' false ' arrow='始终放大图片放大图片(e){这个。isdialogshow=truethis . CenterDialogVisible=true this。show pic=这个。数据[0]；console.log(this.images) }，} }/script style lang=' less ' # star-pic-vue { width : 200 px；高度：自动显示器：伸缩柔性包装：包装；img { width: 80px高度： 80pxmargin: 4px}。对话框{ img { width : 100%；高度： 100%;保证金： 0；} } .El-carousel _ _ item H3 { color : # 475669；font-size : 18pxopacity: 0.75线高： 300像素；保证金： 0；高度： 100%;宽度： 100%;} .El-dialog _ _ header { display : none；} .El-dialog _ _ body { padd : 0！重要；margin: 0！重要；高度： 600像素；} .El-carousel {高度：100%；} .El-carousel _ _ container {高度：100%；} }/样式更多组件点击这儿-链接： githubcomponentstar-pic-列表

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。