今天给大家介绍一个非常优秀的Web端实用插件——lightGallery,它是一个用于在Web端制作精致的画廊(Gallery)的工具库,可用于原生、React.js、Vue.js、Angular以及支持TypeScript,Vue版本只支持到最新的Vue3的版本,在Vue2的版本中需要一些特殊手段!
https://github.com/sachinchoolur/lightGallery
lightGallery 采用最现代的技术构建而成,可实现最佳性能和质量。它支持所有现代浏览器,包括 IE 10 及更高版本。
采用模块化结构。轻松地创建你自己的模块,或分离你不想使用的模块。LightGallery有许多内置模块,如缩略图、缩放等。
lightGallery针对手机和PC进行了高度优化,以获得原生的外观和体验,并实现最佳性能。支持移动设备的单独设置,以进一步优化。
LightGallery附带了许多配置选项(100多个配置项),允许自定义插件而不影响核心代码。可以通过更新saas变量轻松自定义库的外观和体验
除了以上大致的特性,其包含的功能还有很多,比如:
内联画廊
如何使用在官方有详细的文档介绍,这里我们以Vue为例,其它框架可以自行参考文档
npm install lightgallery
# 或者
yarn add lightgallery
如果安装失败,可以多尝试几次,以下是最简单的用法了
以上是在Vue3中的写法,那么如果你一定要在Vue2中尝试,不如试试下面这种写法:
import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'
export default {
name: 'VueApp',
data() {
return {
imageList: []
}
},
mounted() {
const el = document.getElementById('lightgallery')
window.lightGallery(el)
}
}
下面来一张demo中的效果截图
lightGallery的的确确是一个非常优秀的插件,其精致的设计、丰富的功能、极致的性能和高度的可定制化都是其不得不提的优点,但是缺点也是有的,在vue2中使用稍有不足。另外其分为商业和非商业,两者使用需要注意,总体来说也是可以接受的!
页面更新:2024-03-24
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号