vue.js背景图全屏
v-img (v-img)
v-img is a plugin for Vue.js that allows you to show images in full-screen gallery by adding only one directive to the img tag.
v-img是Vue.js的插件,通过向img标签仅添加一个指令,您可以在全屏画廊中显示图像。
![v-imgV](https://i-blog.csdnimg.cn/blog_migrate/e37552e11e19dd0b93724f04460920a9.gif)
安装 (Installation)
npm (npm)
npm install v-img --save
入门 (Getting started)
In your script entry point:
在脚本入口点:
import Vue from 'vue';
import VueImg from 'v-img';
Vue.use(VueImg);
可选配置 (Optional configurations)
*in this snippet all settings has its default value. No need to specify them unless you want to change default behavior.
*在此代码段中,所有设置均为默认值。 除非您想更改默认行为,否则无需指定它们。
const vueImgConfig = {
// Consider alt of image as its title in gallery?
altAsTitle: false,
}
Vue.use(VueImg, vueImgConfig);
用法 (Usage)
Add v-img
directive to the image.
将v-img
指令添加到映像。
<img v-img src="...">
可用选项 (Available options)
Add similar directive arguments to place images to one gallery. (:name
from the example below could be anything you want)
添加类似的指令参数以将图像放置到一个图库中。 (以下示例中的:name
可以是您想要的任何内容)
<img v-img:name src="...">
<img v-img:name src="...">
Options that could be specified in directive value
可以在指令值中指定的选项
<img v-img="{...}" src="...">
作者 (Author)
crowdbotics
翻译自: https://vuejsexamples.com/a-plugin-for-vue-js-that-allows-you-to-show-images-in-full-screen-gallery/
vue.js背景图全屏