用flex布局实现软键盘

124 阅读 0 评论 82 点赞

我是靠谱客的博主沉默往事，这篇文章主要介绍用flex布局实现软键盘，现在分享给大家，希望可以做个参考。

软键盘用来模拟真实键盘，我们知道键盘中一些特殊符号键的大小和普通字符键的大小是不一样的，例如空格键。但一般各个键间距是一样的，这样的一种布局适合用flex布局来实现。

我们实现一个简单的例子：

我们实现上述图片布局。代码如下：

复制代码

#app{
    width: 800px;
    height: 300px;
    outline: red dotted 3px;   
    
}
#line_1{
    width: 800px;
    height: 100px;
    display: flex; /*flex 布局*/
}
#line_2{
    width: 800px;
    height: 100px;
    margin-top: 10px;
    display: flex;
}

.line1Style{
    height: 100px;
    background-color: grey;
    color: greenyellow;
    text-align: center; /*字符水平居中*/
    line-height: 100px; /*字符垂直居中*/
    margin-right: 5px;  /*各个item直接间距*/
    flex-shrink: 0;  /*不进行缩放*/
}
.line2Style{
    height: 100px;
    background-color: grey;
    color: greenyellow;
    text-align: center;
    line-height: 100px;
    margin-right: 5px;
    flex-shrink: 0;
}

</style>
</head>
 
<body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
 
<head>
<style type="text/css">

#app{
    width: 800px;
    height: 300px;
    outline: red dotted 3px;   
    
}
#line_1{
    width: 800px;
    height: 100px;
    display: flex; /*flex 布局*/
}
#line_2{
    width: 800px;
    height: 100px;
    margin-top: 10px;
    display: flex;
}

.line1Style{
    height: 100px;
    background-color: grey;
    color: greenyellow;
    text-align: center; /*字符水平居中*/
    line-height: 100px; /*字符垂直居中*/
    margin-right: 5px;  /*各个item直接间距*/
    flex-shrink: 0;  /*不进行缩放*/
}
.line2Style{
    height: 100px;
    background-color: grey;
    color: greenyellow;
    text-align: center;
    line-height: 100px;
    margin-right: 5px;
    flex-shrink: 0;
}

</style>
</head>
 
<body>    

    <script src="./vue.js"></script>

    <div id="app">
        <div id="line_1">
            <div :id="'line_1_' + i" class="line1Style" :style="line1StyleD()" v-for="(item, i) in listData1">{{item}}</div>
        </div>
        <div id="line_2">
            <div :id="'line_2_' + i" class="line2Style" :style="line2StyleD(i)" v-for="(item, i) in listData2">{{item}}</div>
        </div>
    </div>

<script>
    var app = new Vue({
        data : function(){
            return {
                listData1 : ["Q", "W", "E", "R", "T", "Y", "U"],
                listData2 : ["B", "Z", "X", "Space", "N", "M"]
            }
        },
        methods : {
            line1StyleD : function(){
                return{
                    width : "100px" //所有item 宽度为100px 
                }
            },  
            line2StyleD : function(i){
                if(i === 3){
                    return{
                        width : "205px"  //Space 这个item宽度为其他item的1倍
                    }
                }else{
                    return{
                        width : "100px"
                    }
                }
            }
        }
    }).$mount("#app");
</script>
</body>
</html>