移動端自定義輸入框的vue組件 ----input

<style scoped lang="less">
    .keyboard {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
        user-select: none;
        font-size: 16px;
        width: 100%;
    }

    .input-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 120px;
        background-color: #fff;
        border-radius: 8px;
        font-size: 64px;
        .label {
            text-align: center;
            width: 119px;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                /* display: inline-block; */
                height: 64px;
                top: 28px;
                right: 0;
                width: 2px;
                background-color: rgb(221, 221, 221);
            }
        }
        .content {
            display: flex;
            flex: 1;
            .input {

                color: #313131;
            }
            .cursor {
                background-color: #4788c5;

                width: 2px;
                height: 64px;
                margin-top: 28px;
                margin-left: 2px;
            }
            .placeholder {
                height: 120px;
                padding-left: 38px;
            }
            .currency {}
        }
    }
</style>
<template>
    <div class="keyboard">
        <!-- 自定義輸入框 -->
        <div class="input-box" @touchstart.stop="focus">
            <!-- 左側標簽 -->
            <p class="label">￥ </p>
            <!-- 右側內容 -->
            <div class="content">

                <p class="placeholder" v-show="val.length === 0">
                    {{value}}
                </p>
                <!-- 光標 -->
                <p class="cursor" :style="{visibility: cursor ? 'visible' : 'hidden'}"></p>
            </div>
        </div>


    </div>

</template>
<script>

    export default {
        name: 'KeyboardInput',
        components: {

        },
        created() {
            /*閃爍光標*/
            this.blinkCursor();
            // document.addEventListener('touchstart', () => {
            //     this.blur();
            // });
        },
        props: {
            value: '',
            inter: {
                default: 5
            },
            decimal: {
                default: 2
            },
            // label: {
            //     default: '消費金額'
            // },
            placeholder: {
                default: '158898'
            }
        },
        data() {
            return {
                cursor: false,
                keyboard: false,
                /*value 在組件中的值*/
                val: '',
                aIllegal: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '0..', '.'],
                cursorDuration: 600,
                bodyHeight: '',
                bodyOverflow: ''
            }
        },
        methods: {
            /*focus*/
            focus() {
                /*顯示鍵盤*/
                this.showKeyboard();
                /*顯示光標*/
                this.showCursor();

            },
            blinkCursor() {
                clearInterval(this.intervalID);
                this.intervalID = setInterval(() => {
                    this.cursor = !this.cursor;
                }, this.cursorDuration);
            },
            unblinkCursor() {
                clearInterval(this.intervalID);
            },
            /*blur*/
            blur() {
                /*隱藏光標*/
                this.hideCursor();
                /*停止光標閃爍*/
                this.unblinkCursor();
                /*隱藏鍵盤*/
                this.hideKeyboard();
                /*
                    附加 00, 如果用戶輸入了一個以 . 結尾的值就點完成了, 
                    那么這個時候就在后面加上00
                */
                this.toCompletion();
                /*通知父組件, 老子值出來了*/
                /*
                    校驗用戶輸入的金額是不是為 0, 如果是的話, 直接重置
                */
                this.checkValue();
                this.notify();

            },
            showKeyboard() {
                this.keyboard = true;
            },
            hideKeyboard() {
                this.keyboard = false;
            },
            showCursor() {
                this.cursor = true;
            },
            hideCursor() {
                this.cursor = false;
            },
            checkValue() {
                if (parseFloat(this.val) === 0) {
                    this.val = '';
                }
            },
            /*判讀是否需要加0*/
            toCompletion() {
                let list = this.value.split('.');
                if (typeof list[1] === 'undefined') {
                    if (this.val !== '') {
                        this.val = this.val + '.';
                        this.completion(this.decimal);
                    }
                } else {
                    if (list[1].length < this.decimal) {
                        this.completion(this.decimal - list[1].length);
                    }
                }
            },
            completion(len) {
                let v = '';
                for (let i = 0; i < len; i++) {
                    v = v + '0';
                }
                this.val = this.val + v;
            },
            notify() {
                this.$emit('input', this.val);
            },
            del() {
                /*刪除值並不會觸發值的校驗, 所以需要手動再觸發一次*/
                this.val = this.val.slice(0, -1);
                this.notify();
            },
            /*輸入*/
            typing(value) {
                /*如果是點擊刪除*/
                if (value === '') {
                    this.del();
                }
                /*保存舊的值*/
                let oldValue = this.val;
                /*獲取新的值*/
                this.val = this.val + value;
                /*檢驗新值, 如果沒有通過檢測, 恢復值*/
                if (!this.passCheck(this.val)) {
                    this.val = oldValue;
                    return;
                }
                /*為了讓外界同步輸入, 需要發送事件*/
                this.notify();
            },
            passCheck(val) {
                /*驗證規則*/
                let aRules = [
                    this.illegalInput,
                    this.illegalValue,
                    this.accuracy
                ]
                return aRules.every((item) => {
                    return item(val);
                });
            },
            illegalInput(val) {
                if (this.aIllegal.indexOf(val) > -1) {
                    return false;
                }
                return true;
            },
            /*非法值*/
            illegalValue(val) {
                if (parseFloat(val) != val) {
                    return false;
                }
                return true;
            },
            /*驗證精度*/
            accuracy(val) {
                let v = val.split('.')
                if (v[0].length > this.inter) {
                    return false;
                }
                if (v[1] && (v[1].length) > this.decimal) {
                    return false;
                }
                return true;
            }
        }
    }

</script>