de-net/src/view/components/input-action-sheet.vue

<template>
    <div class="input-action-sheet-wrapper" v-if="visible" :style="{position: position}">
        <div class="input-action-sheet-content">
            <div class="title">
                {{title}}
            </div>
            <div class="input-wrapper">
                <input class="input" 
                    v-model="inputVal"
                    placeholder="0"
                    autofocus
                    @input="onValueInput"
                    @blur="onValueBlur">
            </div>
            <div class="desc">
                {{desc}}
            </div>
            <div class="btn-wrapper">
                <div class="btn cancel" @click="cancel">
                    {{cancelText}}
                </div>
                <div class="btn confirm" @click="confirm">
                    {{confirmText}}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";

let inputVal = ref('');

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    position: {
        type: String,
        default: 'fixed'
    },
    title: {
        type: String,
        default: '',
    },
    cancelText: {
        type: String,
        default: 'Cancel',
    },
    confirmText: {
        type: String,
        default: 'Continue',
    },
    desc: {
        type: String,
        defautl: ''
    }
});

watch(() => props.visible, (newVal) => {
    if(!newVal) {
        inputVal.value = ''
    }
})

const emits = defineEmits(["cancel", "confirm", "onInput"]);

const onValueInput = () => {
    let val = inputValHandler();
    emits("onInput", { inputVal: val });
    return val;
}

const onValueBlur = () => {
    return inputValHandler();
}


const inputValHandler = () => {
    let val = inputVal.value;
    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');

    if(val == '00') {
        val = '0'
    }
    if(val.indexOf('.') > -1){ //校验 例：00.12 => 0.12
        let arr = val.split('.');
        if(arr[0].startsWith('0')) {
            let num = +arr[0];
            val = num + '.' + arr[1];
        }
    }

    inputVal.value = val;

    return val;
}

const cancel = () => {
    emits("cancel", { });
}

const confirm = () => {
    if(inputVal.value > 0) {
        emits("confirm", { inputVal: inputVal.value });
    }
}

</script>

<style scoped lang="scss">
.input-action-sheet-wrapper {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;

    .input-action-sheet-content {
        width: 335px;
        min-height: 186px;
        background: #fff;
        border-radius: 20px;
        padding: 20px 15px;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1000;
        transform: translate(-50%, -50%);

        .title {
            font-weight: 600;
            font-size: 16px;
        }
        
        .input-wrapper {
            width: 100%;
            border: 1px solid #DFDFDF;
            border-radius: 5px;
            box-sizing: border-box;
            height: 42px;
            margin: 17px 0 10px 0;

            .input {
                width: 100%;
                height: 100%;
                outline: none;
                border: none;
                padding: 0 10px;
                box-sizing: border-box;
                border-radius: 5px;
                font-weight: 600;
                font-size: 16px;
            }

            .input::placeholder {
                color: #B3B3B3;
            }
        }
        
        .desc {
            font-weight: 500;
            font-size: 13px;
            color: #888888;
            min-height: 40px;
        }
        .btn-wrapper {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            .btn {
                width: 150px;
                height: 47px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 16px;
                box-sizing: border-box;
                border-radius: 1000px;
                cursor: pointer;
            }

            .cancel {
                border: 1px solid #CFCFCF;
            }

            .confirm {
                color: #fff;
                background: #1D9BF0;
            }
        }
    }
}
</style>