<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="node_modules/viewerjs/dist/viewer.js"></script>
<script src="node_modules/v-viewer/dist/v-viewer.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/viewerjs/dist/viewer.css">
</head>
<body>
<div id="app">
<!-- 组件形式 -->
<div class="images" v-viewer="{movable: false}">
<img v-for="src in images" :src="src" :key="src">
</div>
<button type="button" @click="show">Show</button>
</div>
<script>
Vue.use(VueViewer.default)
</script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name:"test",
content:"这是一个测试案例",
images:[
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
},
methods:{
show () {
const viewer = this.$el.querySelector('.images').$viewer
viewer.show()
}
}
})
</script>
</body>
</html>
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
