Closed Xiong-Zz closed 2 years ago
感谢你的反馈,我已在 1.0.7 1.0.8 版本中进行了支持
由于1.0.7 存在bug,在1.0.8中进行了修复
jsdelivr - vue-img-viewr@1.0.8 中可以查看CDN文件
同时引入js和css文件,lib/vue-img-viewr.umd.js
lib/vue-img-viewr.min.js
styles/index.min.css
不要使用lib/vue-img-viewr.umd.min.js
以下是demo
以下是基于 1.0.8 的 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-img-viewr demo</title>
<!-- vue 2 cdn -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.9/dist/vue.min.js"></script>
<!-- vue-img-viewr cdn - js -->
<script src="https://cdn.jsdelivr.net/npm/vue-img-viewr@1.0.8/lib/vue-img-viewr.min.js"></script>
<!-- vue-img-viewr cdn - css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-img-viewr@1.0.8/styles/index.min.css">
<style>
.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;
}
</style>
</head>
<body>
<div id="app">
<div>
<h3>通过组件方式</h3>
<div class="imgs">
<div v-for="(url, i) in urls" class="img" :key="`c_${i}`" @click="() => showImagesByComponent(i)">
<img :src="url" />
</div>
</div>
<img-viewr :visible="visible" :urls="urls" :initial-index="index" :on-close="closeHandle" :on-switch="changeHandle" :on-show="showHandle" />
</div>
<div>
<h3>通过js方法调用</h3>
<div class="imgs">
<div v-for="(url, i) in urls" class="img" :key="i" @click="() => showImagesByJs(i)">
<img :src="url" />
</div>
</div>
</div>
</div>
</body>
<script>
const { showImages, ImgViewr } = window['vue-img-viewr']
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'
]
new Vue({
el: '#app',
components: { 'img-viewr': ImgViewr },
data() {
return {
urls: images,
index: 0,
visible: false
}
},
methods: {
showImagesByComponent (i) {
this.visible = true
this.index = i
},
showImagesByJs (i) {
showImages({
urls: this.urls,
index: i,
onSwitch: this.changeHandle,
onClose: () => {
console.log('close with js')
return true
},
onShow: this.showHandle
})
},
changeHandle (i) {
console.log(`current image index: ${i}`)
},
showHandle (isShow) {
console.log(`component is show: ${isShow}`)
},
closeHandle () {
console.log('close component')
this.visible = false
}
}
})
</script>
</html>
@2的版本支持umd,但是@1的版本好像没看见支持umd的
Originally posted by @Xiong-Zz in https://github.com/jekorx/vue-img-viewr/issues/3#issuecomment-1220363819