一、背景 有一个需求是要弹框后，焦点默认在某个按钮上，确认或者取消。
二、 我还是用前几话写的弹框插件来说，为了区分焦点在按钮上还是不在，把之前的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>好简单哟～
