写插件很简单,满足两个条件即可,一、基本的逻辑思路,二、熟悉插件语法要求。本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图:

项目采用的是vue-element-admin

在‘src/components’下新建‘imgPreview’文件夹,然后在该文件夹下新建‘ImgPreview.vue’,‘index.js’两个文件,代码如下:

ImgPreivew.vue

<template>
<el-dialog
:visible.sync="isShowImageDialog"
@closed="clearImg"
>
<el-carousel indicator-position="outside" height="600px">
<el-carousel-item v-for="src in imgs">
<img :src="src" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"/>
</el-carousel-item>
</el-carousel>
</el-dialog>
</template> <script>
export default {
name: 'ImgPreview',
data() {
return {
imgs: '',
isShowImageDialog: false
}
},
methods: {
clearImg() {
this.imgs = null
}
}
}
</script> <style scoped> </style>

  

index.js

import ImgPreviewComponent from './ImgPreview'

const ImgPreview = {}

ImgPreview.install = Vue => {
const ImgConstructor = Vue.extend(ImgPreviewComponent) const instance = new ImgConstructor() instance.$mount(document.createElement('div')) document.body.appendChild(instance.$el) Vue.prototype.$imgPreview = (e) => {
instance.target = e.currentTarget
instance.imgs = instance.target.getAttribute('data-img').split(',')
instance.isShowImageDialog = true
}
} export default ImgPreview

  

应用也很简单:

main.js

import imgPreview from '@/components/imgPreview'

Vue.use(imgPreview)

  

comments.vue页面调用

<el-table-column
label="评论内容"
header-align="center"
>
<template slot-scope="scope">
<div v-html="scope.row.content"></div>
<el-button v-if="scope.row.images.length>0" :data-img="scope.row.images" type="text" size="small" @click="$imgPreview">查看图片</el-button>
</template>
</el-table-column>

  

整个插件原理也很简单:所有的数据都放在data-img上,插件获取其中的数据,然后通过element ui的el-carousel组件轮播显示

原文地址:http://www.ftc20.com/wordpress/2019/04/base-element-ui-plugin/

基于element ui的图片预览插件的更多相关文章

  1. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  2. eclipse 图片预览插件

      eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...

  3. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  4. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  5. 实现一个vue的图片预览插件

    vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...

  6. vue-preview vue图片预览插件+缩略图样式

    一.安装 npm i vue-preview -S 二.main.js中  导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...

  7. 仿百度排列图片预览插件-Simple Lightbox

    很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...

  8. Vue.js图片预览插件

    vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...

  9. vue 图片预览插件

    https://github.com/daidaitu1314/vue2-preview //cnpm cnpm install vue2-preview -save //引入 import VueP ...

随机推荐

  1. Anders Hejlsberg 和 Erich Gamma

    Anders Hejlsberg 和 Erich Gamma 大概半年前,我写了一篇名叫<有点软文>的文章,深情并茂地告诉大家,我司其实隐藏着很多牛人巨擘.有些人是身怀屠龙技,但是大家不认 ...

  2. 洛谷——P3384 【模板】树链剖分

    https://www.luogu.org/problem/show?pid=3384#sub 题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作 ...

  3. opencv标定程序(改动)

    转载请注明来自:http://blog.csdn.net/zhouyelihua/article/details/38421377 资源下载见:点击打开链接 百度云盘免积分下载:https://pan ...

  4. [LuoguP4892]GodFly的寻宝之旅 状压DP

    链接 基础状压DP,预处理出sum,按照题意模拟即可 复杂度 \(O(n^22^n)\) #include<bits/stdc++.h> #define REP(i,a,b) for(in ...

  5. 比较s+=4;和s=s+4;的不同

    1.s=s+4: public class Test { public static void main(String[] args){ short s=3; // s=s+4; //描述 资源 路径 ...

  6. 21. Node.Js Buffer类(缓冲区)-(一)

    转自:https://blog.csdn.net/u011127019/article/details/52512242

  7. 实际感受美丽的Linux(多组视频)

    1.Fedora 上使用google earth 2.体验桌面-GNOME 2.2.9 3.体验桌面-KDE4.4 永中Office使用演示(和MS Office 2003很相似哦) 4.在Fedor ...

  8. 体验SUSE (附视频演示)

    操作动画演示 本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  9. cf1051F. The Shortest Statement(最短路/dfs树)

    You are given a weighed undirected connected graph, consisting of nn vertices and mm edges. You shou ...

  10. Appium定义接口测试

    1.Appium如何执行 Appium作为一个服务器,python的脚本代码交给Appium服务器,Appium再去与设备交互. desired_cap = {} desired_cap['platf ...