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{
100% !important;
height: 100% !important;
}
.buttongroup{
left: -50px;
position: absolute;
bottom: 100px;
transform: rotate(90deg);
}
.van-toast--fail{
transform: rotate(90deg);
}
.empty,.autograph{
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{
100px;
height: 40px;
line-height: 40px;
font-size: 1rem;
float: left;
color: white;
text-align: center;
}
.empty{
background: #ccc;
}
.autograph{
background: #178ef0;
}
}
</style>