一、背景
有一个需求是要弹框后,焦点默认在某个按钮上,确认或者取消。
二、
我还是用前几话写的弹框插件来说,为了区分焦点在按钮上还是不在,把之前的css稍微改了一下。文末会附上完整代码。
1、没有加这个效果之前
点开弹框,按钮没有效果
目标是做出,一打开弹框就是酱紫的~
知道怎么做的话,写起来就好简单~
就是要等到DOM都加载完了再操作焦点。
// 弹框焦点默认在确认键
this.$nextTick(()=> {
$("#btnMsgBoxConfirm").focus();
});
在这个地方写
整个的messageBox.vue贴一下
<template>
<div v-key-bind-listen>
<div class="msgBox" v-show="isShowMessageBox">
<div class="msgBox_header">
<div class="msgBox_title">
<h3>{{ title }}</h3>
</div>
</div>
<div class="msgBox_content">
<p>{{ content }}</p>
</div>
<div class="msgBox_btns">
<button type="button" class="btn btn-lime btn-lg" id="btnMsgBoxConfirm" @click="confirm">确定</button>
<button type="button" class="btn btn-lime btn-lg" id="btnMsgBoxCancel" @click="cancel">取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'messageBox',
data(){
return {
title: '',
content: '',
isShowMessageBox: false,
resolve: '',
reject: '',
promise: '' // 保存promise对象
}
},
methods: {
close(state){
this.model.show = false;
if(this.model.callback){
this.model.callback(state);
}
},
// 确定,将promise断定为resolve状态
confirm: function () {
this.isShowMessageBox = false;
this.resolve('confirm');
this.remove();
},
// 取消,将promise断定为reject状态
cancel: function () {
this.isShowMessageBox = false;
this.reject('cancel');
this.remove();
},
// 弹出messageBox,并创建promise对象
showMsgBox: function () {
this.isShowMessageBox = true;
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
// 弹框焦点默认在确认键
this.$nextTick(()=> {
$("#btnMsgBoxConfirm").focus();
});
// 返回promise对象
return this.promise;
},
remove: function () {
setTimeout(() => {
this.destroy();
}, 300);
},
destroy: function () {
// this.$destroy();
// console.log(document.body.contains(this.$el))
// document.body.removeChild(this.$el);
// // 这边判断一下节点还是不是它的child了,是child才删
// // 不然会报错。其实这个报错也没啥影响,就是严谨一点
this.$destroy();
if (document.body.contains(this.$el)) {
document.body.removeChild(this.$el);
}
}
}
}
</script>
<style scoped>
.msgBox {
position: fixed;
z-index: 4;
left: 50%;
top: 35%;
transform: translateX(-50%);
width: 420px;
background-color: black;
opacity: 0.55;
}
.msgBox_header {
padding: 20px 20px 0;
}
.msgBox_title {
padding-left: 0;
margin-bottom: 0;
font-size: 26px;
font-weight: 800;
height: 18px;
color: greenyellow;
}
.msgBox_content {
padding: 30px 20px;
color: #fff;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.msgBox_btns {
padding: 10px 20px 15px;
text-align: right;
overflow: hidden;
}
#btnMsgBoxCancel{
background-color: black;
}
#btnMsgBoxCancel:hover{
background-color: #35a963;
}
#btnMsgBoxCancel:focus{
background-color: #35a963;
}
#btnMsgBoxConfirm{
background-color: black;
}
#btnMsgBoxConfirm:focus{
background-color: #3bbd6e;
}
#btnMsgBoxConfirm:hover{
background-color: #3bbd6e;
}
@keyframes show-messageBox {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bounce-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
好简单哟~