70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
||
<view>
|
||
<view style="width: 750rpx; height: 950rpx;">
|
||
<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
|
||
:minLineWidth="2" :openSmooth="openSmooth" :bounding-box="bBox"></l-signature>
|
||
</view>
|
||
<!-- <uni-popup ref="popup" type="bottom">
|
||
<l-signature v-if="show" beforeDelay="1000" disableScroll backgroundColor="#000" ref="signatureRef2" :penColor="penColor"
|
||
:penSize="penSize" :minLineWidth="2" :openSmooth="openSmooth"></l-signature>
|
||
</uni-popup> -->
|
||
<view>
|
||
<!-- <button @click="open">弹出</button> -->
|
||
<button @click="onClick('clear')">清空</button>
|
||
<button @click="onClick('undo')">撤销</button>
|
||
<button @click="onClick('save')">保存</button>
|
||
<button @click="bBox = !bBox">bBox{{bBox?'开':'关'}}</button>
|
||
<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
|
||
</view>
|
||
<view style="background-color: #2196f3; text-align: center;">
|
||
<view style="border: 2px dashed #fff; display: inline-block;">
|
||
<image :src="url" v-if="url" style="width: 370rpx;" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: 'Hello',
|
||
penColor: 'red',
|
||
penSize: 16,
|
||
url: '',
|
||
show: false,
|
||
openSmooth: true,
|
||
bottomHeight: 0,
|
||
bBox: false,
|
||
customBar: this.CustomBar || 0,
|
||
}
|
||
},
|
||
methods: {
|
||
open() {
|
||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||
this.$refs.popup.open()
|
||
this.show = true
|
||
},
|
||
onClick(type) {
|
||
if (type == 'openSmooth') {
|
||
this.openSmooth = !this.openSmooth
|
||
return
|
||
}
|
||
if (type == 'save') {
|
||
this.$refs.signatureRef.canvasToTempFilePath({
|
||
quality: 0.8,
|
||
success: (res) => {
|
||
this.url = res.tempFilePath
|
||
}
|
||
})
|
||
return
|
||
}
|
||
if (this.$refs.signatureRef)
|
||
this.$refs.signatureRef[type]()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style> |