基于element ui的图片预览插件
写插件很简单,满足两个条件即可,一、基本的逻辑思路,二、熟悉插件语法要求。本次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的图片预览插件的更多相关文章
- js图片预览插件,不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- eclipse 图片预览插件
eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...
- Vue PC端图片预览插件
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
- 实现一个vue的图片预览插件
vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...
- vue-preview vue图片预览插件+缩略图样式
一.安装 npm i vue-preview -S 二.main.js中 导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...
- 仿百度排列图片预览插件-Simple Lightbox
很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...
- Vue.js图片预览插件
vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...
- vue 图片预览插件
https://github.com/daidaitu1314/vue2-preview //cnpm cnpm install vue2-preview -save //引入 import VueP ...
随机推荐
- MySql 存储引擎的选取
存储引擎是为不同的表类型处理 SQL 操作的 MySql 组件.InnoDB 是默认的.最通用的存储引擎,也是官方推荐使用的存储引擎,除非一些特定案例.MySql 5.6 中的 CREATE TABL ...
- 11.Axis客户端接收不同参数类型
转自:http://www.guance.com/708.html axis只支持简单类型的返回值.在这里逐一介绍axis的各种返回值接受. 1. axis接受基本类型,如int, string等 引 ...
- POJ 2437 贪心+priority_queue
题意: 思路: 贪心 能不覆盖的就不盖 写得很乱 左闭右开的 temp //By SiriusRen #include <queue> #include <cstdio> #i ...
- 用Vue.js来实现城市三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- tcp为什么要三次握手
作者:大闲人柴毛毛链接:https://www.zhihu.com/question/24853633/answer/254224088来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
- python stomp activemq客户端
#coding=utf-8import timeimport sysimport stomp class MyListener(object): def on_error(self, headers, ...
- Python 3 下载安装和环境搭建
Python3 下载 由于博主使用的平台是Windows10,以下方法仅限win10系统 Python 官网:https://www.python.org/ 找到跟系统相应的版本瞎子: Python ...
- artDialog提示框、对话框
/** * 警告 * @param {String}消息内容 */ artDialog.alert = function (content, callback) { return artDialog( ...
- php课程 13-43 mysql的数据结构是什么
php课程 13-43 mysql的数据结构是什么 一.总结 一句话总结:cs结构,客户端,服务器 1.常用的比较出名的数据库有哪些? SQL数据库(关系型):1.收费:DB2SqlserverOra ...
- ::的类名前有个 & ,什么意思?
转载自 http://www.imooc.com/qadetail/93985 MazePerson &MazePerson::setPersonPosition(int coordinat ...