关于Vue中图片预览插件(vue-photo-preview)的使用
推荐一个特别好用的图片预览插件,使用方法非常简单,拿来即用。第一步、在项目中安装vue-photo-preview包cmd方式打开自己的项目文件夹,输入如下指令进行安装:cnpm i vue-photo-preview --save
- 推荐一个Vue中特别好用的图片预览插件(vue-photo-preview),使用方法非常简单,拿来即用,感兴趣的小伙伴可以尝试一下。
第一步、在项目中安装vue-photo-preview包
cmd方式打开自己的项目文件夹,输入如下指令进行安装(第一种第二种都可以,任选其一即可):
第一种:
cnpm i vue-photo-preview --save
(推荐使用)
第二种:npm i vue-photo-preview --save
第二步、打开项目的main.js文件进行全局引用
打开main.js,添加如下代码片段
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
第三步、直接在页面中使用即可,具体使用方法如下。
直接在img标签中添加属性即可。
第一种方式:直接使用
<img src="xxx.jpg" preview preview-text="图片描述">
第二种方式:可以根据preview
分组,不同组的照片对应的preview
值不同,具体如下所示。
<img src="xxx.png" preview="1" preview-text="描述1-1">
<img src="xxx.png" preview="1" preview-text="描述1-2">
<img src="xxx.png" preview="1" preview-text="描述1-3">
<img src="xxx.png" preview="2" preview-text="描述2-1">
<img src="xxx.png" preview="3" preview-text="描述3-1">
效果如下:
以上就是Vue中图片预览插件(vue-photo-preview)的使用方法,觉得有用的小伙伴点个赞,谢谢。
更多推荐
所有评论(0)