开箱即用的photoswipe指令
零配置开箱即用、适合Markdown
请在移动端查看
- 下载
npm install directive-photoswipe或者
yarn add directive-photoswipe- 引入
import DirectivePhotoswipe from 'directive-photoswipe'- 注册
Vue.use(DirectivePhotoswipe)- 使用
<!-- 只需要在容器中使用 v-photoswipe指令即可 -->
<!-- 点击容器内图片就会弹出图片画廊 -->
<div v-photoswipe>
<img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="">
<img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="">
</div>- 增加TypeScript支持。
- 增加全局配置参数。
全局配置参数请参考photoswipe
import DirectivePhotoswipe from 'directive-photoswipe'
Vue.use(DirectivePhotoswipe, options)<!-- 引入文件 -->
<script src="https://unpkg.com/directive-photoswipe/dist/directive-photoswipe.min.js"></script>- 配置参数
- 请勿嵌套使用v-photoswipe指令
- DirectivePhotoSwipe使用id为pswp的元素展示PhotoSwipe,请勿占用该ID