快捷導(dǎo)航

VUE簽字組件vue-esign安裝使用教程

更新時(shí)間：2023年09月07日 09:18:09 作者：唯望君安|||

在我們開發(fā)項(xiàng)目中,特別是流程審批類的項(xiàng)目,最后一步會提交審核,審核員看完相應(yīng)信息以后,沒問題就會簽字通過審批,這篇文章主要給大家介紹了關(guān)于VUE簽字組件vue-esign安裝使用的相關(guān)資料,需要的朋友可以參考下

安裝引入

npm install vue-esign --save
// 全局 vue2 main.js
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
// 全局vue3 main.js
import { createApp } from 'vue'
import App from './App.vue'
import vueEsign from 'vue-esign'
const app = createApp(App)
app.use(vueEsign)
// 局部
import vueEsign from 'vue-esign'
components: { vueEsign }

使用

<!-- vue2 -->
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<!-- vue3 -->
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" v-model:bgColor="bgColor" />
<!-- isClearBgColor為false時(shí)，不必再給bgColor加sync修飾符或v-model -->
<button @click="handleReset">清空畫板</button>
<button @click="handleGenerate">生成圖片</button>
data () {
  return {
    lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false
  }
},
methods: {
  handleReset () {
    this.$refs.esign.reset()
  },
  handleGenerate () {
    this.$refs.esign.generate().then(res => {
      this.resultImg = res
    }).catch(err => {
      alert(err) // 畫布沒有簽字時(shí)會執(zhí)行這里 'Not Signned'
    })
  }
}

說明

屬性	類型	默認(rèn)值	說明
width	Number	800	畫布寬度，即導(dǎo)出圖片的寬度
height	Number	300	畫布高度，即導(dǎo)出圖片的高度
lineWidth	Number	4	畫筆粗細(xì)
lineColor	String	#000	畫筆顏色
bgColor	String	空	畫布背景色，為空時(shí)畫布背景透明
isCrop	Boolean	false	是否裁剪，在畫布設(shè)定尺寸基礎(chǔ)上裁掉四周空白部分
isClearBgColor	Boolean	true	清空畫布時(shí)(reset)是否同時(shí)清空設(shè)置的背景色(bgColor)
format	Number	image/png	生成圖片格式 image/jpeg(jpg格式下生成的圖片透明背景會變黑色請慎用或指定背景色)、 image/webp
quality	Number	1	生成圖片質(zhì)量；在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會使用默認(rèn)值 0.92。其他參數(shù)會被忽略。

方法

// 清空畫布
this.$refs.esign.reset()
// 生成圖片
// 可選配置參數(shù) ，在未設(shè)置format或quality屬性時(shí)可在生成圖片時(shí)配置 例如： {format:'image/jpeg', quality: 0.5}
// this.$refs.esign.generate({format:'image/jpeg', quality: 0.5})
this.$refs.esign.generate().then(res => {
  console.log(res) // base64圖片
}).catch(err => {
  alert(err) // 畫布沒有簽字時(shí)會執(zhí)行這里 'Not Signned'
})

文檔來源