vue可滑动插件_一个Vue插件,可通过滑动功能显示图库

vue可滑动插件

Vue图片滑动图库 (Vue Picture Swipe Gallery)

Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

由photowipe支持的Vue图片滑动图库(带有缩略图,延迟加载和滑动的图像的画廊)

This component is a simple wrapper for the awesome Photoswipe. It's a Vue plugin that displays a gallery of image with swipe function (and more). Includes lazy (smart) loading (mobile friendly) and thumbnails.

该组件是真棒Photoswipe的简单包装。 这是一个Vue插件,可显示具有滑动功能(及更多功能)的图像库。 包括延迟(智能)加载(适合移动设备)和缩略图。

Vue-Picture-Swipe-Gallery

安装 (Install)

npm install --save vue-picture-swipe

用法 (Usage)

You can use it as you want. Here are some examples if you want to use it inline, or in a .vue file component or even with Laravel.

您可以根据需要使用它。 如果您想内联使用它,也可以在.vue文件组件中甚至使用Laravel使用以下示例。

内联用法 (Inline usage)

You can using it inline:

您可以内联使用它:

<vue-picture-swipe :items="[
    {src: 'http://example.org/xl.jpg',thumbnail: 'http://example.org/sm1.jpg',w: 600,h: 400},
    {src: 'http://example.org/xxl.jpg',thumbnail: 'http://example.org/sm2.jpg',w: 1200,h: 900}
  ]"></vue-picture-swipe>

Just remember to register the component:

只要记住注册该组件即可:

import VuePictureSwipe from 'vue-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);

new Vue({
  el: '#app'
})

在其他组件中的用法 (Usage in another component)

Create a component Example.vue. Then paste this:

创建一个组件Example.vue 。 然后粘贴:

<template>
  <vue-picture-swipe :items="items"></vue-picture-swipe>
</template>
<script>
  import VuePictureSwipe from 'vue-picture-swipe';
  export default {
    data() {
      return {
        items: [{
          src: 'http://via.placeholder.com/600x400',
          thumbnail: 'http://via.placeholder.com/64x64',
          w: 600,
          h: 400
        },
        {
          src: 'http://via.placeholder.com/1200x900',
          thumbnail: 'http://via.placeholder.com/64x64',
          w: 1200,
          h: 900
        }
      ]};
    }
  }
</script>

Laravel的用法 (Usage with Laravel)

Edit resources/assets/js/app.js and add this just before the new Vue lines.

编辑resources/assets/js/app.js并将其添加到new Vue行之前。

import VuePictureSwipe from 'vue-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);

Then run your watcher:

然后运行您的观察者:

npm run watch

高级用法 (Advanced usage)

PhotoSwipe选项 (PhotoSwipe options)

Use options for Photoswipe options.

options用于Photoswipe选项

<!-- Disable "share" buttons. -->
<vue-picture-swipe :options="{shareEl: false}"></vue-picture-swipe>

翻译自: https://vuejsexamples.com/a-vue-plugin-that-displays-a-gallery-of-image-with-swipe-function/

vue可滑动插件

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中,如果你想要修改左侧滑动轮(el-scrollbar__thumb)的样式,可以按照以下步骤进行操作: 1. 首先,确保你已经引入了Element UI组件库,并在使用的地方添加了el-scrollbar组件。 2. 在样式文件中,可以使用scoped属性来限定样式的作用范围。在该样式文件中,可以通过定位到.el-scrollbar__thumb类来修改滑动轮的样式。 3. 比如,你可以使用CSS的border-radius属性来改变滑动轮的圆角,例如: ``` .el-scrollbar__thumb { border-radius: 8px; } ``` 这样就可以将滑动轮的圆角设置为8px。 注意,如果你的样式没有生效,可能是由于样式权重的问题。你可以尝试使用更具体的选择器,或者使用!important来提高样式的优先级。 请注意,在使用Element Plus组件库时,滑动轮的类名可能会有所不同,你可以查看官方文档或者使用开发者工具来确定正确的类名。 希望这个解答对你有所帮助!如果还有其他问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue项目修改浏览器滚动条样式](https://blog.csdn.net/baoyin0822/article/details/121856969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值