Vue.js的图片库灯箱 - v-img

Vue.js的图片库灯箱 - v-img
插件名称 v-img
发布时间 2021年1月19日
插件作者 crowdbotics

v-img是易于设置的Vue.js组件,可帮助您在Web应用程序上创建图库灯箱。

安装

npm install v-img --save

可选配置

*在此代码段中,所有设置均为默认值。除非您想更改默认行为,否则无需指定它们。不幸的是,如果您使用CDN方式包含插件,则无法设置这些选项,但仍可以内联设置。

const  vueImgConfig  =  { 
  //使用`alt`属性作为图库幻灯片标题
  altAsTitle:false ,
  //在'close'附近显示'download'按钮,以在新选项卡中打开源图像
  sourceButton:false ,
  //打开库的事件监听器将是应用于<img>元素
  openOn:'click' ,
  //显示所有具有超过1个图像
  缩略图的组的缩略图:false ,
} 
Vue.use(VueImg, vueImgConfig);

用法

v-img向图像添加指令。

<img v-img src="...">

可用选项

添加类似的指令参数以将图像放置到一个图库中。(:name从下面的示例中可以是您想要的任何内容)

<img v-img:name src="...">
<img v-img:name src="...">

可以在指令值中指定的选项

<img v-img="{...}" src="...">