用户签名组件，初步

Tevin

2022-03-02 0103a44df43cfef6d01151be9470bdc5497a5d9c

用户签名组件，初步

 forms/userSignature/CUserSignature.vue

New file
@@ -0,0 +1,65 @@
/**
 * CUserSignature
 * @author Tevin
 */

<template>
    <view class="c-user-signature">
        <!-- <AtSwitch
            :title="itemRes.label"
            :checked="itemRes.formData[itemRes.name]"
            :onChange="evt=>itemRes.onChange(evt)"
        /> -->
        <AtInput
            ref="input"
            :name="itemRes.name"
            :title="itemRes.label"
            :required="itemRes.required"
            :error="itemRes.error"
        />
        <view
            ref="drawing"
            class="c-user-signature-drawing"
        >
            <view class="button">
                <AtIcon value="edit" />
            </view>
            <text class="tips">（点击修改）</text>
        </view>
    </view>
</template>

<script>
import { AtInput, AtIcon } from 'taro-ui-vue';
import { $ } from '@tarojs/extend';
import './cUserSignature.scss';

export default {
    name: 'CUserSignature',
    components: {
        AtInput,
        AtIcon,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
    },
    data() {
        return {};
    },
    computed: {
        className() {},
    },
    mounted() {
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.input.$el)
                .find('.at-input__input')
                .prepend(this.$refs.drawing.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .append(this.$refs.drawing.$el);
        }
    },
};
</script>

 forms/userSignature/cUserSignature.scss

New file
@@ -0,0 +1,49 @@
/**
 * cUserSignature
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-user-signature {
    .at-input {
        padding: 0;
    }
    .at-input__container {
        .weui-input {
            display: none;
        }
    }
    .c-user-signature-drawing {
        padding: 18px 18px 18px 0;
        .button {
            display: inline-block;
            width: 150px;
            height: 150px;
            margin-left: 10px;
            text-align: center;
            line-height: 140px;
            vertical-align: middle;
            border: 1PX #d6e4ef solid;
            border-radius: 8px;
            .at-icon {
                display: inline-block;
                width: 76px;
                height: 76px;
                text-transform: none;
                text-rendering: auto;
                line-height: 1;
                font-size: 76px;
                color: #cfe0ed;
                -webkit-font-smoothing: antialiased;
                vertical-align: middle;
                background: none;
            }
        }
        .tips {
            line-height: 160px;
            vertical-align: middle;
            color: $colorIgnore;
        }
    }
}

 forms/userSignature/index.js

New file
@@ -0,0 +1,10 @@
/**
 * CUserSignature
 * @author Tevin
 */

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

export {
    CUserSignature,
}