時(shí)隔三年的更新Ｆ∷！支持vue3
-
支持vue3２斩弧１渎狻！芭逝！更新依賴后塌碌，僅
bgColor原來(lái)的.sync修飾符需改為vue3寫法v-model:bgColor; - 新增屬性
isClearBgColor，默認(rèn)值true旬盯， 清空畫布時(shí)(reset)是否同時(shí)清空設(shè)置的背景色(bgColor) 台妆； - 直接
npm install vue-esign@latest --save即可，對(duì)vue2版本無(wú)任何影響胖翰；
功能
- 兼容 PC 和 Mobile接剩；
- 畫布自適應(yīng)屏幕大小變化（窗口縮放、屏幕旋轉(zhuǎn)時(shí)畫布無(wú)需重置萨咳，自動(dòng)校正坐標(biāo)偏移）懊缺；
- 自定義畫布尺寸（導(dǎo)出圖尺寸），畫筆粗細(xì)培他、顏色鹃两，畫布背景色遗座；
- 支持裁剪 （針對(duì)需求：有的簽字需要裁剪掉四周空白）。
- 導(dǎo)出圖片格式為
base64俊扳； - 示例demo
安裝
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 }
- 頁(yè)面中使用
必須設(shè)置ref，用來(lái)調(diào)用組件的兩個(gè)內(nèi)置方法reset()和generate()
無(wú)需給組件設(shè)置 style 的寬高拣度，如果畫布的 width屬性值沒(méi)超出父元素的樣式寬度碎绎，則該組件的樣式寬度就是畫布寬度，超出的話抗果，組件樣式寬度則是父元素的100%筋帖； 所以只需設(shè)置好父元素的寬度即可；
<!-- 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) // 畫布沒(méi)有簽字時(shí)會(huì)執(zhí)行這里 'Not Signned'
})
}
}
- 說(shuō)明
| 屬性 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| width | Number | 800 | 畫布寬度日麸，即導(dǎo)出圖片的寬度 |
| height | Number | 300 | 畫布高度，即導(dǎo)出圖片的高度 |
| lineWidth | 4 | Number | 畫筆粗細(xì) |
| lineColor | String | #000000 | 畫筆顏色 |
| bgColor | String | 空 | 畫布背景色逮光，為空時(shí)畫布背景透明代箭，<br />支持多種格式 '#ccc'，'#E5A1A1'涕刚，'rgb(229, 161, 161)'嗡综，'rgba(0,0,0,.6)'，'red' |
| isCrop | Boolean | false | 是否裁剪杜漠，在畫布設(shè)定尺寸基礎(chǔ)上裁掉四周空白部分 |
| isClearBgColor | Boolean | true | 清空畫布時(shí)(reset)是否同時(shí)清空設(shè)置的背景色(bgColor) |
兩個(gè)內(nèi)置方法极景，通過(guò)給組件設(shè)置 ref 調(diào)用：
清空畫布
this.$refs.esign.reset()
生成圖片
this.$refs.esign.generate().then(res => {
console.log(res) // base64圖片
}).catch(err => {
alert(err) // 畫布沒(méi)有簽字時(shí)會(huì)執(zhí)行這里 'Not Signned'
})
有任何問(wèn)題請(qǐng)到此提issue 倉(cāng)庫(kù)地址
演示.gif
版權(quán)聲明：本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處 http://www.reibang.com/p/cfb9d5998cd6
