vue+vant+vue-esign（手寫簽名組件）
安裝組件
npm install vue-esign --save
全局引入方法
import vueEsign from 'vue-esign'
Vue.use(vueEsign)項目代碼
<template>
<div>
<van-nav-bar
:title="title"
left-text="取消簽名"
left-arrow
@click-left="closeDialog"
:fixed="true"
:placeholder="true"
class="nav-bar"
/>
<div class="canvaspanel">
<div class="canvasborder">
<vue-esign ref="esign" :width="530" :height="1080" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
</div>
<div class="buttongroup">
<div @click="handleReset" class="empty">清空</div>
<div @click="handleGenerate" class="autograph">確定</div>
</div>
</div>
<img :src="resultImg" alt="" v-show="false">
</div>
</template><script>
import { Toast } from 'vant';
export default {
name: "esign",
components: {
},
data() {
return {
title:'手寫簽名',
lineWidth: 10,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
created() {
},
methods: {
handleReset () {
this.$refs.esign.reset()
},
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res;
this.$emit("close", this.resultImg);
}).catch(err => {
Toast.fail('請簽名');
//alert(err) // 畫布沒有簽字時會執行這里 'Not Signned'
})
},
closeDialog() {
this.resultImg = '';
this.$emit("close", this.resultImg);
},
}
}
</script>因為canvas不能直接使用css3旋轉，所以這里使用樣式造成已經旋轉的假象
<style rel="stylesheet/scss" lang="scss">
.canvasborder{
border: solid 1px #ccc;
}
@media screen and (orientation: portrait) { /* 豎屏 */
.canvaspanel canvas{
width: 100% !important;
height: 100% !important;
}
.buttongroup{
left: -50px;
position: absolute;
bottom: 100px;
transform: rotate(90deg);
}
.van-toast--fail{
transform: rotate(90deg);
}
.empty,.autograph{
width: 100px;
height: 40px;
line-height: 40px;
font-size: 1rem;
float: left;
color: white;
text-align: center;
}
.empty{
background: #ccc;
}
.autograph{
background: #178ef0;
}
}
@media screen and (orientation: landscape) { /* 橫屏 */
.buttongroup{
right: 30px;
position: absolute;
bottom: 20px;
transform: rotate(0deg);
}
.empty,.autograph{
width: 100px;
height: 40px;
line-height: 40px;
font-size: 1rem;
float: left;
color: white;
text-align: center;
}
.empty{
background: #ccc;
}
.autograph{
background: #178ef0;
}
}
</style>