发布于2021-05-30 19:42 阅读(1321) 评论(0) 点赞(15) 收藏(5)
〝 古人学问遗无力,少壮功夫老始成 〞
vue中使用viewerjs组件进行图片展示,常码字不易,出精品更难,没有特别幸运,那么请先特别努力,别因为懒惰而失败,还矫情地将原因归于自己倒霉。你必须特别努力,才能显得毫不费力。如果这篇文章能给你带来一点帮助,希望给飞兔小哥哥一键三连,表示支持,谢谢各位小伙伴们。
目录
npm install viewerjs --save
- //引入
- import Vue from 'vue';
- import 'viewerjs/dist/viewer.css';
- import Viewer from 'v-viewer';
- //按需引入
- Vue.use(Viewer);
- Viewer.setDefaults({
- 'inline': true,
- 'button': true, //右上角按钮
- "navbar": true, //底部缩略图
- "title": true, //当前图片标题
- "toolbar": true, //底部工具栏
- "tooltip": true, //显示缩放百分比
- "movable": true, //是否可以移动
- "zoomable": true, //是否可以缩放
- "rotatable": true, //是否可旋转
- "scalable": true, //是否可翻转
- "transition": true, //使用 CSS3 过度
- "fullscreen": true, //播放时是否全屏
- "keyboard": true, //是否支持键盘
- "url": "data-source",
- ready: function (e) {
- console.log(e.type, '组件以初始化');
- },
- show: function (e) {
- console.log(e.type, '图片显示开始');
- },
- shown: function (e) {
- console.log(e.type, '图片显示结束');
- },
- hide: function (e) {
- console.log(e.type, '图片隐藏完成');
- },
- hidden: function (e) {
- console.log(e.type, '图片隐藏结束');
- },
- view: function (e) {
- console.log(e.type, '视图开始');
- },
- viewed: function (e) {
- console.log(e.type, '视图结束');
- // 索引为 1 的图片旋转20度
- if (e.detail.index === 1) {
- this.viewer.rotate(20);
- }
- },
- zoom: function (e) {
- console.log(e.type, '图片缩放开始');
- },
- zoomed: function (e) {
- console.log(e.type, '图片缩放结束');
- }
- })
- <template>
- <div>
- <viewer>
- <img :src="cover" style="cursor: pointer;" height="80px">
- </viewer>
- </div>
- </template>
-
- <script>
- export default {
- data() {
- return {
- cover: "//www.autofelix.com/images/cover.png"
- }
- }
- }
- </script>
- <template>
- <div>
- <viewer :images="imgList">
- <img v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" />
- </viewer>
- </div>
- </template>
-
- <script>
- export default {
- data() {
- return {
- imgList: [
- "//www.autofelix.com/images/pic_1.png",
- "//www.autofelix.com/images/pic_2.png",
- "//www.autofelix.com/images/pic_3.png",
- "//www.autofelix.com/images/pic_4.png",
- "//www.autofelix.com/images/pic_5.png"
- ]
- }
- }
- }
- </script>
作者:Hgggjhhg
链接:http://www.phpheidong.com/blog/article/86956/94727a9f20812a8ae10e/
来源:php黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 php黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-4
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!