dz-app/pages/ie/components/ai-form/items/templates/ai-form-field-number.vue

<template>
    <ie-form-picker :label="rule.label" :placeholder="placeholder" :remark="rule.description"
                    :model-value="formModel[rule.fieldName]" disable-arrow @click="handleShowKeyboard"/>
    <uv-keyboard ref="keyboard" :mode="keyboardMode" :dot-disabled="rule.dotDisable" :tips="localValue"
                 @confirm="handleValueConfirm" @change="handleValueChange" @backspace="handleValueDelete"/>
</template>

<script>
import AIFormRuleField from "@/pages/ie/components/ai-form/items/templates/AIFormRuleField";
import IeFormPicker from "@/pages/ie/components/picker/ie-form-picker.vue";

export default {
    name: "ai-form-field-number",
    components: {IeFormPicker},
    mixins: [AIFormRuleField],
    computed: {
        placeholder() {
            return this.rule.placeholder || '请输入'
        },
        keyboardMode() {
            const supports = ['number', 'card', 'car']
            const {keyboardMode} = this.rule
            if (keyboardMode && !supports.includes(keyboardMode)) console.log('error keyboard mode in render rule:', keyboardMode)
            return supports.includes(keyboardMode) ? keyboardMode : 'number'
        }
    },
    data() {
        return {
            localValue: ''
        }
    },
    methods: {
        handleShowKeyboard() {
            this.localValue = ''
            this.$refs.keyboard.open()
        },
        handleValueChange(val) {
            this.localValue += val
        },
        handleValueDelete() {
            const {length} = this.localValue
            if (length) this.localValue = this.localValue.substring(0, length - 1)
        },
        handleValueConfirm() {
            this.formModel[this.rule.fieldName] = this.localValue
            this.$refs.keyboard.close()
            this.clearValidate()
        }
    }
}
</script>

<style scoped>

</style>