Vue.js —— 图片放大缩小的实现

场景：点击图片 进行预览，跳出一个modal框，可进行放大缩小的操作。

关键：样式 transform

  1. CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
  2. 给元素动态绑定transform的属性值，通过点击事件去修改
 1 <!-- 预览图片  -->
 2 <template>
 3   <a-modal :visible="visible" :footer="null" @cancel="handleCancel" wrapClassName="box">
 4     <div class="head-btn-box">
 5       <a-button icon="plus" @click="toBIgChange">放大</a-button>
 6       <a-button icon="minus" @click="toSmallChange">缩小</a-button>
 7     </div>
 8     <img
 9       :src="url"
10       alt
11       class="img"
12       :style="{transform:'scale('+multiples+')'}"
13     />
14   </a-modal>
15 </template>
16 
17 <script>
18 export default {
19   data() {
20     return {
21       visible: false,
22       url: "",
23       multiples: 1,
24     };
25   },
26 
27   props: {},
28 
29   components: {},
30 
31   created() {},
32 
33   computed: {},
34 
35   mounted() {},
36 
37   methods: {
38     show(url) {
39       this.visible = true;
40       this.url = url;
41     },
42 
43     handleCancel() {
44       this.visible = false;
45       this.multiples = 1
46     },
47 
48     toBIgChange() {
49       if (this.multiples >= 2) {
50         return;
51       }
52       this.multiples += 0.25;
53     },
54     // 缩小
55     toSmallChange() {
56       if (this.multiples <= 1) {
57         return;
58       }
59       this.multiples -= 0.25;
60     },
61   },
62 };
63 </script>
64 <style scoprd>
65 .head-btn-box {
66   margin-bottom: 20px;
67 }
68 .img {
69   width: 200px;
70 }
71 .box .ant-modal-body {
72   width: 500px;
73   overflow-x: auto;
74   height: 500px;
75   overflow-y: auto;
76 }
77 </style>

 

效果：

 

第一篇随笔，写的比较简单。

posted @ 2020-08-24 14:22  小昱同学  阅读(7630)  评论(2)  编辑  收藏  举报