java图片比对插件_基于element ui的图片预览插件

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

项目采用的是vue-element-admin

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

ImgPreivew.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

:visible.sync="isShowImageDialog"

@closed="clearImg"

>

export default {

name:'ImgPreview',

data() {

return {

imgs:'',

isShowImageDialog:false

}

},

methods: {

clearImg() {

this.imgs =null

}

}

}

index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

1

2

3

import imgPreview from'@/components/imgPreview'

Vue.use(imgPreview)

comments.vue页面调用

1

2

3

4

5

6

7

8

9

label="评论内容"

header-align="center"

>

查看图片

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