
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
vue-picture-preview
Advanced tools
移动端、PC 端 Vue.js 图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.
npm install --save vue-picture-preview
入口文件中全局引入
import Vue from 'vue'
import vuePicturePreview from 'vue-picture-preview';
Vue.component('Previewer', vuePicturePreview);
按需局部引入
import vuePicturePreview from 'vue-picture-preview';
export default {
components: {
Previewer: vuePicturePreview
}
}
示例
<div>
<img
class="previewer-demo-img"
v-for="(item, index) in list"
:src="item.src"
width="100"
@click="show(index)"
:key="index"
/>
<previewer ref="previewer" :list="list" :options="options"> </previewer>
</div>
export default {
data() {
return {
list: [
{
msrc:
'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
src:
'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
w: 600,
h: 400
},
{
msrc:
'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
src:
'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
w: 600,
h: 400
},
{
msrc:
'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
src:
'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
w: 600,
h: 400
}
],
options: {
getThumbBoundsFn(index) {
// find thumbnail element
let thumbnail = document.querySelectorAll('.previewer-demo-img')[
index
];
// get window scroll Y
let pageYScroll =
window.pageYOffset || document.documentElement.scrollTop;
// optionally get horizontal scroll
// get position of element relative to viewport
let rect = thumbnail.getBoundingClientRect();
// w = width
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
// Good guide on how to get element coordinates:
// http://javascript.info/tutorial/coordinates
}
}
};
},
methods: {
show(index) {
// 显示特定index的图片,使用ref
this.$refs.previewer.show(index);
}
}
};
名字 | 类型 | 默认值 | 说明 | 版本要求 |
---|---|---|---|---|
list | array | 图片列表 | v2.0.0 | |
options | object | PhotoSwipe的配置 | v2.0.0 |
名字 | 参数 | 说明 | 版本要求 |
---|---|---|---|
@on-close | - | 关闭时触发 | v2.0.0 |
@on-index-change | - | 切换图片后触发(首次打开不会触发) | v2.0.0 |
名字 | 说明 | 版本要求 |
---|---|---|
button-after | 操作按钮之后,可以添加自定义图标 | v2.0.0 |
button-before | 操作按钮之前,可以添加自定义图标 | v2.0.0 |
名字 | 参数 | 说明 | 版本要求 |
---|---|---|---|
goTo | index | 跳转到特定图片 | v2.0.0 |
prev | - | 跳转到上一张 | v2.0.0 |
next | - | 跳转到下一张 | v2.0.0 |
getCurrentIndex | - | 获取当前图片索引 | v2.0.0 |
FAQs
移动端、PC 端 Vue.js 图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
The npm package vue-picture-preview receives a total of 426 weekly downloads. As such, vue-picture-preview popularity was classified as not popular.
We found that vue-picture-preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.