vue图片查看组件(vue image viewer component),with vue@3.x
npm install vue-img-viewr
> ❗ vue图片查看组件(vue image viewer component),``2.x`版本为`vue@3.x`组件
> ❗ 如需在`vue@2.x`中使用,请使用 ,Github v1.x地址  `
> yarn add vue-img-viewr@^1.0.9` `
> npm i vue-img-viewr@^1.0.9 -S`
> demo展示
`bash`安装依赖
yarn add vue-img-viewror
npm i vue-img-viewr -S
> 使用,SPA,非SSR
`javascript
/**
* 一、推荐🔥全局js方式引入
*/
import Vue from 'vue'
import { showImages } from 'vue-img-viewr'
import 'vue-img-viewr/styles/index.css'
const app = createApp(App)
app.config.globalProperties.$showImages = showImages
app.mount('#app')
/ 使用 /
const appContext = getCurrentInstance()?.appContext as AppContext
const showImagesByJs: (i: number) => void = i => {
appContext.config.globalProperties.$showImages({
urls: images,
index: i,
onSwitch: (i: number) => void = i => {
console.log(current image index: ${i})component is show: ${isShow}
},
onShow: (isShow: boolean) => void = isShow => {
console.log()
},
onClose: () => {
console.log('closed')
}
})
}
/**
* 注册全局组件
*/
import ImgViewr from 'vue-img-viewr'
import 'vue-img-viewr/styles/index.css'
const app = createApp(App)
// 等同于
// app.component('ImgViewr', ImgViewr)
// app.config.globalProperties.$showImages = showImages
app.use(ImgViewr)
app.mount('#app')
/**
* 二、按需引入使用
*/
// lang="ts"
import { ref } from 'vue'
import ImgViewr, { showImages } from 'vue-img-viewr'
import 'vue-img-viewr/styles/index.css'
const images = [
'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4?size=100&default=retro',
'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4',
'https://static.npmjs.com/attachments/ck3uwf5d872zb8874c3ayi1pj-icon-pro-wombat-3x.png'
]
export default {
name: 'App',
components: { ImgViewr },
setup () {
const urls = ref(images)
const index = ref(0)
const visible = ref(false)
const showImagesByComponent: (i: number) => void = i => {
visible.value = true
index.value = i
}
const showImagesByJs: (i: number) => void = i => {
// or
// ImgViewr.showImages({ ... })
showImages({
urls: images,
index: i,
onSwitch: changeHandle,
onClose: () => {
console.log('closed js')
},
onShow: showHandle
})
}
const changeHandle: (i: number) => void = i => {
console.log(current image index: ${i})component is show: ${isShow}
}
const closeHandle = () => {
console.log('closed component')
visible.value = false
}
const showHandle: (isShow: boolean) => void = isShow => {
console.log()`
}
return {
urls,
index,
visible,
showImagesByComponent,
showImagesByJs,
closeHandle,
changeHandle,
showHandle
}
}
}
> 服务端渲染(SSR)中使用,以Nuxtjs为例
`javascript`
// TODO
// 后期测试后再进行补充
> 示例组件使用
`html`
通过组件方式
" @click="() => showImagesByComponent(i)">
通过js方法调用
showImagesByJs(i)">
> 示例样式
`css``
/ 示例样式 /
.imgs {
display: flex;
}
.img {
width: 150px;
height: 100px;
border: 1px solid #EEE;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.img img {
max-width: 100%;
max-height: 100%;
cursor: pointer;
}
> vue@2.x中使用请参照
> vue@3.x中使用请参照
##### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--------------- | :----------------------------------------- | :------------- | :------------- | :----- |
| urls | 需要展示的图片url数组(必须参数) | array<string> | — | [] |
| visible | 是否显示组件(仅限于通过组件方式参数) | boolean | true / false | — |
| initialIndex | 初始显示的图片索引(仅限于通过组件方式参数)| number | — | 0 |
| index | 显示的图片索引(仅限于通过js方法调用参数) | number | — | 0 |
| onSwitch | 图片切换回调函数 Function (index) | function | — | — |
| onClose | 关闭回调函数 | function | — | — |
| onShow | 组件显示关闭监听 Function(isShow) (主要用于js方式调用)| function | — | — |
| zIndex | 层级 | number | — | 3000 |
| lockScroll | 是否在查看图片时将 body 滚动锁定 | boolean | true / false | true |
| closeOnClickMask | 点击蒙层关闭 | boolean | true / false | true |
##### Events
> 仅用于组件方式
| 参数 | 说明 | 参数 |
| :----- | :-------------------------------------- | :--- |
| close | 关闭事件,将 visible 设为 false 关闭窗口 | - |
| switch | 图片切换事件 | index |
| show | 组件显示关闭监听(主要用于js方式调用) | isShow |