签名板

基础用法

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

<template>
  <div class="t-draw-board-area">
    <div class="sign-image-area" v-if="!showBoard">
      <img :src="url">
    </div>
    <div class="sign-board-area" v-else>
      <as-animation-draw-board @save="saveSign">
      </as-animation-draw-board>
    </div>
  </div>
</template>

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

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

Expand Copy Copy

Events

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