更新记录

1.0.0（2023-05-15） 下载此版本

新增

平台兼容性

签字板、签名板

长期维护，欢迎使用，欢迎提出您宝贵的意见

第一步，引用组件

import dySignature from '@/components/dy-signature';

第二步，注册组件

components: {
    dySignature
}

第三步，使用组件

<dy-signature ref="dySignature"></dy-signature>

Props

Options

Function

示例代码

<template>
    <view>
        <button @click="open1=true">弹窗1</button>
        <button @click="open2=true">弹窗2</button>
        <view class="box1" v-show="open1" @click="open1=false">
            <view class="dySignature1">
                <dy-signature ref="dySignature1" :styleObj="styleObj1" :options="options1"></dy-signature>
            </view>
            <button @click.stop.prevent="retDraw1">清空</button>
            <button @click.stop.prevent="prevStep1">上一步</button>
            <button @click.stop.prevent="saveCanvasAsImg1">导出</button>
            <button @click.stop.prevent="getHistoryData1">获取笔记</button>
        </view>
        <view class="box2" v-show="open2" @click="open2=false">
            <view class="dySignature2">
                <dy-signature ref="dySignature2" :styleObj="styleObj2" :options="options2"></dy-signature>
            </view>
            <button @click.stop.prevent="retDraw2">清空</button>
            <button @click.stop.prevent="prevStep2">上一步</button>
            <button @click.stop.prevent="saveCanvasAsImg2">导出</button>
            <button @click.stop.prevent="getHistoryData2">获取笔记</button>
        </view>
    </view>
</template>

<script>
import dySignature from '@/components/dy-signature';

export default {
    data() {
        return {
            open1: false,
            open2: false,
            styleObj1: {
                width: '500rpx',
                height: '400rpx',
                backgroundColor: '#009ee5', // 这里设置的背景颜色仅仅给用户看到，在导出的时候不导出背景色
            },
            options1: {
                bgColor: 'rgba(0, 159, 225, .3)', // 这里设置的背景颜色在导出的时候要导出背景色，支持rgba透明度为0
                lineColor: '#f00',
                lineWidth: 4, // 线宽
            },
            styleObj2: {
                width: '500rpx',
                height: '700rpx',
                backgroundColor: '#00f',
            },
            options2: {
                bgColor: '#f00',
                lineColor: '#009ee5',
                lineWidth: 4, // 线宽
            },
        }
    },
    components: {
        dySignature,
    },
    methods: {
        // 清空画布
        retDraw1() {
            let _self = this;
            _self.$refs.dySignature1.retDraw();
        },
        // 返回上一步
        prevStep1() {
            let _self = this;
            _self.$refs.dySignature1.prevStep();
        },
        // 获取笔记
        getHistoryData1() {
            let _self = this;
            let historyData = _self.$refs.dySignature1.getHistoryData()
            console.log(historyData);
        },
        // 导出图片
        saveCanvasAsImg1() {
            let _self = this;
            _self.$refs.dySignature1.saveCanvasAsImg().then(res => {
                console.log(res);
            })
        },
        // 清空画布
        retDraw2() {
            let _self = this;
            _self.$refs.dySignature2.retDraw();
        },
        // 返回上一步
        prevStep2() {
            let _self = this;
            _self.$refs.dySignature2.prevStep();
        },
        // 获取笔记
        getHistoryData2() {
            let _self = this;
            let historyData = _self.$refs.dySignature2.getHistoryData()
            console.log(historyData);
        },
        // 导出图片
        saveCanvasAsImg2() {
            let _self = this;
            _self.$refs.dySignature2.saveCanvasAsImg().then(res => {
                console.log(res);
            })
        },
    }
}
</script>

<style scoped lang="scss">
.box1, .box2 {
  background-color: rgba(0, 0, 0, .3);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  .dySignature1, .dySignature2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>