vue.js开发记账（3）

project from jirengu.com

NumberPad.vue组件

• 完成下面区域的内容：

• 页面就只有2层结构，1层是输出框output，另一层是14个按钮button，代码为：

<template>
    <div class="numberPad">
        <div class="output">{{output}}</div>
        <div class="buttons">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>删除</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>清空</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>OK</button>
            <button>0</button>
            <button>.</button>
        </div>
    </div>
</template>

• 首先，确保NumberPad.vue里面的ts代码模板为ts引入格式：

<script lang="ts">
    import Vue from 'vue';    //ts行间加分号';'
    import {Component} from 'vue-property-decorator';
    
    @Component
    export default class NumberPad extends Vue{
    
    }

• 功能实现。总体的响应是点击14个按钮，都会有对应的响应。分为不同的功能实现：

1. 数字区0-9，和小数点.要实现点击每个数字显示在输出框中，且数字区的细节流程控制有不可以输入两次0，两次小数点.,还有输出框的最大输出长度；
2. 删除，实现每次点击，输出框数字都缩进1个数字；
3. 清空，实现点击后，数据清空显示0；
4. ok，实现记账后，把数据提交到本地存储，功能后面实现。

• 默认输出框显示的是：字符串0

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'vue-property-decorator';
    @Component
    export default class NumberPad extends Vue {
        output ='0';
    }
</script>     

• 元素绑定@click事件：

<template>
    <div class="numberPad">
        <div class="output">{{output}}</div>
        <div class="buttons">
            <button @click="inputContent">1</button>
            <button @click="inputContent">2</button>
            <button @click="inputContent">3</button>
            <button @click="remove">删除</button>
            <button @click="inputContent">4</button>
            <button @click="inputContent">5</button>
            <button @click="inputContent">6</button>
            <button @click="clear">清空</button>
            <button @click="inputContent">7</button>
            <button @click="inputContent">8</button>
            <button @click="inputContent">9</button>
            <button class="ok">OK</button>
            <button @click="inputContent" class="zero">0</button>
            <button @click="inputContent">.</button>
        </div>
    </div>
</template>

• 写inputContent的事件响应：

inputContent = (){
    if(this.output.length === 16)
    {return;}
}

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'vue-property-decorator';
    @Component
    export default class NumberPad extends Vue {
        output ='0';
        inputContent(event:KeyboardEvent){  //TS指定事件类型
            const button = event.target as HTMLButtonElement;
            const input = button.textContent as string;
            if(this.output.lenght === 16) {return;}  //输出达到16个数字的时候就结束函数，不继续执行了
            if(this.output === '0'){
                
            }
        }
    }
</script>