0
点赞
收藏
分享

微信扫一扫

vue-ele-sign 实现签名

npm i vue-ele-sign --save-dev
    <div class="elesigncode-content">
      <vue-ele-sign ref="elesigncode" direction="direction" :pen="pen" :bgImg="bgImg" :imgType="imgType" :readOnly="readOnly" :vsConsole="true" class="sign" />
      <div class="btn-box">
        <button @click="setPen">切换画笔</button>
        <button @click="onClear">清空</button>
        <button @click="onClearSign">清空签名</button>
        <button @click="setBgImg">设置背景图片</button>
        <button @click="getImg">获取图片</button>
        <button @click="getFile">获取文件</button>
        <button @click="onIsEmpty">是否有签名</button>
      </div>
    </div>
import VueEleSign from 'vue-ele-sign'
export default {
  components: {
    backtop,
    VueEleSign
  },
  data() {
    return {
      show: true,
      pen: 'default',
      imgType: 'png',
      readOnly: false,
      direction: 'left', //left :向左横屏
      imgUrl: '',
      bgImg: ''
    }
  },
  methods: {
    setPen() {
      this.pen = this.pen == 'default' ? 'writing' : 'default'
    },
    onClear() {
      this.$refs.elesigncode.clear()
    },
    onClearSign() {
      this.$refs.elesigncode.clearSign()
    },
    setBgImg() {
      this.$refs.elesigncode.setBgImg(this.bgImg)
    },
    getImg() {
      this.$refs.elesigncode.getImg().then(res => {
        console.log('图片地址1', res)
        this.bgImg = res
      })
    },
    getFile() {
      this.$refs.elesigncode.getFile().then(res => {
        console.log('文件1', res)
      })
    },
    onIsEmpty() {
      let isEmpty = this.$refs.elesigncode.isEmpty()
      console.log('isEmpty--', isEmpty)
    }
  }
}
.elesigncode-content {
  margin: 30px;
}
.sign {
  border: 1px solid red;
}

效果

age/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5oGp5Zu-5oql55qE55-l5oGp5ZWK,size_20,color_FFFFFF,t_70,g_se,x_16)

举报

相关推荐

0 条评论