resize-img

img

<template>
  <div id="app">
    <Check
      @click.native="toggleCheck"
      :check="ischeck"
      :text="ischeck.toString()"
    ></Check>

    <div id="div1">
      <img src="https://img.lookcss.com/ipv6.jpg" style="width:100%;height:100%" />
      <div id="resize-rb" @mousedown="dragToChangeImg"></div>
      
       <div class="sizetip" v-show="showtip">{{width.replace('px','')}} x {{height.replace('px','')}}</div>
    </div>
   
  </div>
</template>

<script>
import Check from "./components/Check.vue";

export default {
  name: "App",

  data() {
    return {
      ischeck: false,
      width:'111',
      height:'122',
      showtip:false
    };
  },
  components: {
    Check,
  },
  watch: {},
  mounted() {},
  methods: {
    toggleCheck: function () {
      this.ischeck = !this.ischeck;
      this.$refs.check = this.ischeck;
      console.log(this.ischeck);
    },
    dragToChangeImg: function (ev) {
      var that=this;
      var oDiv = document.getElementById("div1");
      var oDiv2 = document.getElementById("resize-rb");   
      var disX = ev.clientX - oDiv2.offsetLeft;
      var disY = ev.clientY - oDiv2.offsetTop;
      document.onmousemove = function (ev) {      
        oDiv.style.width = ev.clientX - disX + oDiv2.offsetWidth - 5 + "px";
        oDiv.style.height = ev.clientY - disY + oDiv2.offsetHeight - 5 +"px";
  
         that.width=oDiv.style.width;
         that.height=oDiv.style.height;
         that.showtip=true;
         
      };
      document.onmouseup = function () {
         that.showtip=false;
        document.onmousemove  = document.onmouseup  = null;
        document.onmousedown = null;
      };
    },
  },
};
</script>

<style>
#div1 {
  width: 200px;
  height: 200px;
  border:1px dashed #ddd;
  position: relative;
 
}
.sizetip{position: absolute;background: #2c3e50;color:#fff;border-radius: 4px;left:0;bottom:0;padding:2px 5px;font-size: 12px;}
#resize-rb{
  width: 10px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  right:-5px;
  bottom:-5px;
  cursor: nwse-resize;
  border:1px solid #aaa;
  border-radius: 10px;
}
 
#div2 {
  width: 10px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  right:-5px;
  bottom:-5px;
  cursor: nwse-resize;
  border:1px solid #aaa;
  border-radius: 10px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>