用户签名组件，按钮版

Tevin

2023-02-04 285f34a71b049b40d86adf2fc50427ae6ff203b6

用户签名组件，按钮版

 forms/userSignature/CUserSignature.vue

@@ -1,5 +1,5 @@
/**
 * CUserSignature
 * CUserSignature - 用户签名
 * @author Tevin
 */

@@ -42,9 +42,9 @@
import { Fetcher } from '@components/bases/Fetcher';
import { $fetchCommon } from '@fetchers/FCommon';
import { $bridge } from '@components/common/Bridge';
import { $hostBoot } from '@components/bases/HostBoot';
import project from '@project';
import './cUserSignature.scss';
import { $hostBoot } from '@components/bases/HostBoot';

export default {
    name: 'CUserSignature',
@@ -58,9 +58,9 @@
    },
    data() {
        return {
            id: 'CUserSignatureCanvas' + Date.now() + parseInt(Math.random() * 10000),
            cavWidth: 1000,
            cavHeight: 1600,
            // id: 'CUserSignatureCanvas' + Date.now() + parseInt(Math.random() * 10000),
            // cavWidth: 1000,
            // cavHeight: 1600,
        };
    },
    computed: {},
@@ -90,6 +90,9 @@
            const blob = new Blob([u8arr], { type: mime });
            return URL.createObjectURL(blob);
        },
        $startEdit() {
            this.handleStartEdit();
        },
        $uploadImage(callback) {
            const file = {
                url: this.itemRes.formData[this.itemRes.name],

 forms/userSignature/CUserSignatureBtn.vue

New file
@@ -0,0 +1,77 @@
/**
 * CUserSignatureBtn - 用户签名（按钮模式）
 * @author Tevin
 */

<template>
    <view class="c-user-signature-btn">
        <AtButton
            :class="btnClass"
            :type="btnType"
            :onClick="evt => handleOpenSign()"
        >签名</AtButton>
        <CForm
            ref="signForm"
            :formData="signData"
            :onChange="evt => handleSignChange(evt)"
            v-slot="{formRes}"
        >
            <CFormItem
                name="sign"
                :formRes="formRes"
                v-slot="{itemRes}"
            >
                <CUserSignature
                    ref="signature"
                    :itemRes="itemRes"
                />
            </CFormItem>
        </CForm>
    </view>
</template>

<script>
import { AtButton } from 'taro-ui-vue';
import { CForm, CFormItem } from '@components/forms/form';
import CUserSignature from './CUserSignature.vue';

export default {
    name: 'CUserSignatureBtn',
    components: {
        AtButton,
        CForm,
        CFormItem,
        CUserSignature,
    },
    props: {
        // 按钮样式
        btnClass: String,
        // 按钮类型
        btnType: {
            type: String,
            default: 'primary',
        },
        // 签名回调
        onSignChanged: Function,
    },
    data() {
        return {
            signData: {
                sign: '',
            },
        };
    },
    methods: {
        handleOpenSign() {
            this.$refs.signature.$startEdit();
        },
        handleSignChange({ sign }) {
            this.onSignChanged(sign);
        },
        $uploadImage(callback) {
            this.$refs.signature(callback);
        },
    },
    mounted() {},
};
</script>

 forms/userSignature/cUserSignature.scss

@@ -47,3 +47,14 @@
        height: 100%;
    }
}

.c-user-signature-btn {
    .at-button {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    .c-form {
        display: none;
    }
}

 forms/userSignature/index.js

@@ -4,7 +4,9 @@
 */

import CUserSignature from '@components/forms/userSignature/CUserSignature.vue';
import CUserSignatureBtn from '@components/forms/userSignature/CUserSignatureBtn.vue';

export {
    CUserSignature,
    CUserSignatureBtn,
}