画图板

基础用法

下面是画图板的基础用法。当屏幕宽度width满足width<=620px或者715px<=width<920px时候,只显示画板图片;否则则显示画板板,可以在上面画图。

<template>
  <div class="t-graph-board-area">
    <div class="graph-image-area" v-if="!showGraphBoard">
      <img :src="url">
    </div>
    <div class="graph-board-area" v-else>
      <as-animation-graph-board @save="saveGraphs">
      </as-animation-graph-board>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-graph-board",
  data(){
    return{
      showGraphBoard:true,
      url:require("../images/graph-board.png"),
    }
  },
  mounted(){
    this.initShowBoardFlag();
    this.addWindowResizeListener();
  },
  methods:{
    initShowBoardFlag(){
      let rootWidth=window.innerWidth;
      if (rootWidth<=620||(rootWidth>=715&&rootWidth<=920)){
        this.showGraphBoard=false
      }else{
        this.showGraphBoard=true
      }
    },
    addWindowResizeListener(){
      let that=this;
      window.addEventListener("resize",function (){
        let rootWidth=window.innerWidth;
        if (rootWidth<=620||(rootWidth>=715&&rootWidth<=920)){
          that.showGraphBoard=false
        }else{
          that.showGraphBoard=true
        }
      })
    },
    saveGraphs(base64){
      console.log(base64)
    }
  }
}
</script>

<style>
.t-graph-board-area{
  width: 100%;
  height: 560px;
}
@media screen and (max-width: 620px){
  .t-graph-board-area{
    height: auto;
  }
}
@media screen and (max-width: 920px) and (min-width: 715px) {
  .t-graph-board-area{
    height: auto;
  }
}
</style>

Expand Copy Copy

Events

事件名称	说明	回调参数
save	保存内容	传一个参数base64url(签字截图的base64格式字符串)