使用scale等比例缩放图片

功能需求：
在下拉框中选择你所需要缩放的比例，
选择好了之后，图片会按照你选择的比例进行缩放

1==》如何获取select中option选中的值
在select添加事件change 和双向绑定v-model

data中 myVal:"1"

ps==>当myVal为1时，option显示1:1，当myVal为1。5时，option显示1:5，

所以说明了 select中的v-model(value)值是1时，就会自动显示option中对应的值。

console.log(this.myVal)

2==》找到控制图片的节点，使用scale进行动态绑定
let ele=document.getElementById("img")
ele.style.transform="scale(1)";

  <div id="app">

      <select @change="changeValue" v-model="myVal">

        <option value="1">1:1</option>

        <option value="1.5">1:1.5</option>

      </select>

      <br/>

      <br/>

     <img src="./01.jpg" id="img">

   </div>

  <script>

    new Vue({

      el: '#app',

        data() {

          return {

            myVal:"1",

            scaleSize:"",

          };

        },

      methods: {

       changeValue(){

           let ele=document.getElementById("img");//获取节点

           console.log(this.myVal)

           if(this.myVal=="1"){

               this.scaleSize=1;

               ele.style.transform="scale(1)";

           }else if(this.myVal=="1.5"){

               this.scaleSize=1.5;

               ele.style.transform="scale(1.5)";

           }

       }

      },

    })

  </script>

巴特西

使用scale等比例缩放图片

最新文章

热门文章