Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "vue how to achieve picture zoom", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vue how to achieve picture zoom" article.

The results are as follows

In the past few days, I have made an undone component to record that the desired effect is to zoom and drag the image in a dom.

Encapsulated subcomponent imgbox.Vue. For use in the parent component, you need to prepare a box in the parent component to hold the picture, in which you can zoom and drag the picture.

The parent components are as follows

Parent component html part

The css part of the parent component

.box1 {width: 300px; height: 300px; border: 1px solid # 000; / deep/ .dragImg {/ / depth css. Since the scoped attribute of the style tag in vue cannot be styled directly to the child component, you need to use deep in the parent component to give the style to the dom in the child component width: 420px image size height: 280px in the child component } / deep/ .btnbox {/ / Deep css, since the scoped attribute of the style tag in vue cannot directly style the child component, you need to use deep in the parent component to give the dom in the child component the style width: 70px top box size height: 20px; top: 20px position of the box / subcomponent location left: 20px The size of the .operChange {/ / button width: 20px; height: 20px;}

Parent component applies child component

Import imgbox from'. / imgbox' / / drag to zoom in and out the picture sub-component components: {imgbox}

Configuration data

Data1: {name: "data1", / / identity data imgsrc:require ('@ / assets/timg.jpg'), / / Image path imgname: "img01", / / the corresponding name of the picture is compared with the following image array attribute, which is used for the sub-component to obtain the index, and the default highlight scale:1,// is scaled 1} by default.

Method

EnlargeImg:function (val) {/ / enlarge picture is [val.name] .scale = is [val.name] .scale + 0.1}, narrowImg:function (val) {/ / shrink picture if (this.val.name] .scale > = 0.1) {this.name] .scale = this.val.name .scale-0.1}} sub-component imgbox.vue is as follows

Sub-component html section

The child component accepts the parameters passed by the parent component and customize the instruction

Export default {components: {}, props: ['config'], data () {return {imgsrc: ", / / path of the image}}, directives: {/ / Registration instruction drag:function (el) {let dragBox = el; / / get the current element dragBox.onmousedown = e = > {e.preventDefault () / / calculate the position of the mouse relative to the element let disX = e.clientX-dragBox.offsetLeft; let disY = e.clientY-dragBox.offsetTop; _ document.onmousemove = e = > {/ / subtract the position of the mouse relative to the element to get the position of the element e.preventDefault (); let left = e.clientX-disX; let top = e.clientY-disY / / move the current element dragBox.style.left = left + "px"; dragBox.style.top = top + "px";}; _ document.onmouseup = e = > {e.preventDefault (); / / Don't move _ document.onmousemove = null when the mouse pops up / / prevent the mouse from cycling after it pops up (that is, to prevent the mouse from moving when the mouse is on it) _ document.onmouseup = null;} }}, watch: {config:function (val) {this.imgsrc = val.imgsrc}}, computed: {scaleFun:function () {return `transform:scale (${this.config.scale}) `}}, created () {}, methods: {clickEnlarge () {/ / Click to enlarge let data = this.config this.$emit ('enlarge',data)} ClickNarrow () {/ / Click to shrink let data = this.config this.$emit ('narrow',data)}},}

Sub-component css

.myDiv {width: 100%; height: 100%; position: relative; overflow: hidden; img {width: 100%; height: 100%; position: relative;} .btnbox {display: flex; position: absolute; top: 20px; left: 20px; width: 70px; height: 20px; justify-content: space-around; z-index: 99; img {width: 20px; height: 20px Opacity: 0.7; cursor: pointer; display: inline-block;} above is the content of this article about "how to achieve picture zooming in vue". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.