pc端vue登录如何调用软键盘_vue-自定义pc端软键盘
!@#$%^&*(){}:",/{{item}}{{item}}{{item}}deletespace7894561230.X+-exportdefault{data() {return{money:"",keylist: [],keylist2: [],keylist3: [],bigkeys1:[],bigkeys2:[],bigkeys3:[],smallkeys1:[],small
!
@
#
$
%
^
&
*
(
)
{
}
:
"
,
/
{{item}}
{{item}}
{{item}}
delete
space
7
8
9
4
5
6
1
2
3
0
.
X
+
-
data() {return{
money:"",
keylist: [],
keylist2: [],
keylist3: [],
bigkeys1:[],
bigkeys2:[],
bigkeys3:[],
smallkeys1:[],
smallkeys2:[],
smallkeys3:[],
selected:false};
},
created() {this.readle();
},
methods: {
readle() {
let smallkey1= ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
let bigkey1= ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"];
let smallkey2= ["a", "s", "d", "f", "g", "h", "j", "k", "l"];
let bigkey2= ["A", "S", "D", "F", "G", "H", "J", "K", "L"];
let smallkey3= ["shift", "z", "x", "c", "v", "b", "n", "m", "<", ">"];
let bigkey3= ["SHIFT","Z", "X", "C", "V", "B", "N", "M", "<", ">"];this.keylist =smallkey1;this.keylist2 =smallkey2;this.keylist3 =smallkey3;this.bigkeys1=bigkey1;this.bigkeys2=bigkey2;this.bigkeys3=bigkey3;this.smallkeys1=smallkey1;this.smallkeys2=smallkey2;this.smallkeys3=smallkey3;
},
_chraClick(e) {
let num=e.target.dataset.num;this.money +=num;this.$emit("updatekey",this.money);
},
_handleKeyPress(e) {
let num=e.target.dataset.num;switch(String(num)) {case "D":this.deletekey();break;case "enter":this.money+="\n";break;default:this.Addnum(num);break;
}this.$emit("updatekey",this.money)
},
deletekey() {
let values= this.money;if (!values.length) {return false;
}else{this.money = values.substring(0, values.length - 1);this.$emit("updatekey",this.money)
}
},
Addnum(num) {
let value= this.money;this.money = value +num;
},
upClick1(key){this.money+=key;this.$emit("updatekey",this.money)
},
upClick2(key){this.money+=key;this.$emit("updatekey",this.money)
},
upClick3(key){switch(String(key))
{case "shift":this.keylist=this.bigkeys1;this.keylist2=this.bigkeys2;this.keylist3=this.bigkeys3;break;case "SHIFT":this.keylist = this.smallkeys1;this.keylist2 = this.smallkeys2;this.keylist3 = this.smallkeys3;break;default:this.money+=key;break;
}this.$emit("updatekey",this.money)
},
_letterClick(e){
let num=e.target.dataset.num;switch(String(num))
{case "delete":this.deletekey();break;case "space":this.money +=" ";break;case "enter":this.money +="\n";break;
}
},
}
};
width:100%;
height: 215px;
background: #000;
opacity:0.7;
overflow: hidden;
}
.keyboard_key {
padding-top: 10px;
width:95%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
button {
background-color: aliceblue;
}//----数字键盘-----
.keyboard_number {
display: flex;
width:20%;
margin:0;
padding:0;
vertical-align: bottom;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.pos-right-pad-num {
display: flex;
width:75%;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.pos-right-pad-act {
width:25%;
}
.pad-num {
margin:0 !important;
width:33.3333333%;
height: 48px;
border:0;
border: 1px solid #000000;
font-size: 15px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}
.pad-num2 {
margin:0 !important;
width:100%;
height: 96px;
border:0;
border: 1px solid #000000;
font-size: 15px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}//字符键盘
.keyboard_character {
width:20%;
margin:0;
padding:0;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
margin-left: 5%;
.pad-num1 {
width:25%;
height: 48px;
border: 1px solid #000000;
font-size: 15px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}
}//字母键盘
.keyboard_Letter {
width:40%;
margin:0;
padding:0;
.group1 {
display: flex;
flex-direction: row;
.pad-num1 {
width:10%;
height: 48px;
border: 1px solid #000000;
font-size: 15px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}
}
.group2 {
display: flex;
flex-direction: row;
width:100%;
margin-left: 26px;
.pad-num1 {
width:10%;
height: 48px;
border: 1px solid #000000;
font-size: 15px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}
}
.group3 {
display: flex;
flex-direction: row;
.pad-num1 {
width:10%;
height: 48px;
border: 1px solid #000000;
font-size: 16px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}
}
.group4 {
display: flex;
flex-direction: row;
.pad-num1 {
width:15%;
height: 48px;
font-size: 16px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}
.pad-num2 {
width:70%;
height: 48px;
border: 1px solid #000000;
font-size: 16px;
cursor: pointer;&:hover {
position: relative;
cursor: pointer;
}&:active {
top: 1px;
left: 1px;
background-color: #201a1a;
}
}
}
}
.centerdiv {
border-right: 2px solid rgb(243, 239, 239);
padding-bottom: 1800px; /*关键*/margin-bottom: -1800px; /*关键*/padding-top: 1800px; /*关键*/margin-top: -1800px; /*关键*/}
.input-box {
font-size: 35px;
font-weight: bold;
height: 40px;
border-bottom: 1px solid #aaa;
padding: 10px 15px;
text-align: right;
width:90%;
}
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)