Closed Xiong-Zz closed 2 years ago
jsdelivr - vue-img-viewr 中可以查看CDN文件
需要注意的是需要同时引入lib中的 js文件,以及styles中的 css文件
lib
styles
这是通过CDN方式引入的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 3 cdn --> <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.min.js"></script> <!-- vue-img-viewr cdn - js --> <script src="https://cdn.jsdelivr.net/npm/vue-img-viewr@2.0.8/lib/vue-img-viewr.umd.min.js"></script> <!-- vue-img-viewr cdn - css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-img-viewr@2.0.8/styles/index.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" @close="closeHandle" @switch="changeHandle" @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 { createApp, ref } = Vue 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' ] createApp({ 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') }, 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 } } */ setup () { const urls = ref(images) const index = ref(0) const visible = ref(false) const showImagesByComponent = i => { visible.value = true index.value = i } const showImagesByJs = i => { showImages({ urls: images, index: i, onSwitch: changeHandle, onClose: () => { console.log('close with js') }, onShow: showHandle }) } const changeHandle = i => { console.log(`current image index: ${i}`) } const showHandle = isShow => { console.log(`component is show: ${isShow}`) } const closeHandle = () => { console.log('close component') visible.value = false } return { urls, index, visible, showImagesByComponent, showImagesByJs, closeHandle, changeHandle, showHandle } } }).mount('#app') </script> </html>
@2的版本支持umd,但是@1的版本好像没看见支持umd的
jsdelivr - vue-img-viewr 中可以查看CDN文件
需要注意的是需要同时引入
lib
中的 js文件,以及styles
中的 css文件这是通过CDN方式引入的Demo,希望对你有所帮助