场景：下拉弹框显示时，想要点击其他地方即隐藏（不使用蒙板，下拉弹框定位到点击显示的位置）
tabindex可以使得相应的节点具有 focus 和 blur 事件
tabindex=负值
(通常是tabindex=‘-1‘)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
tabindex=‘0‘，
表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
tabindex=正值，
表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。
注：tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 -1。
tabindex == -1 时无法通过tab键选中该节点
tabindex == 0 或 1 都可以通过tab键选中该节点（不同的赋值表示不同的优先级）
template
<template>
<div>
<!-- 下拉框相关 -->
<div class="drop-button-container" @click="switchDropDownBox" tabindex="0" @blur="blurFunc">
<div>{{ currentPreferenceLine }}</div>
<div class="drop-button icon_drop"></div>
<!-- 下拉弹框 -->
<div class="drop-down-container drop-down-box-bg" v-if="isShowDropDownBox">
<div
class="item"
:class="item.isSelect ? ‘primary-color‘ : ‘base-text‘"
v-for="(item, index) in dropDownBoxData"
:key="index"
@click="swichPreferenceLine(index)">
{{item.text}}
</div>
</div>
</div>
</div>
</template>
script方法
export default {
name: ‘UserProfit‘,
computed: {
// 获取当前下拉框的选中项
currentPreferenceLine() {
return this.dropDownBoxData.find(item => item.isSelect).text;
}
},
data() {
return {
// 下拉框选项数据
dropDownBoxData: [
{
text: ‘DOW J‘,
isSelect: true,
},
{
text: ‘S/P 500‘,
isSelect: false
},
{
text: ‘NASDAQ‘,
isSelect: false
},
],
// 是否显示下拉框
isShowDropDownBox: false
};
},
methods: {
// 下拉框显示和隐藏
switchDropDownBox() {
this.isShowDropDownBox = !this.isShowDropDownBox;
},
// 切换辅助线 -- 下拉框项的选择
swichPreferenceLine(index) {
for (const i in this.dropDownBoxData) {
if (this.dropDownBoxData[i].hasOwnProperty(‘isSelect‘)) {
this.dropDownBoxData[i].isSelect = false;
}
}
if (this.dropDownBoxData[index].hasOwnProperty(‘isSelect‘)) {
this.dropDownBoxData[index].isSelect = true;
}
},
// 下拉框隐藏 -- 使用tabindex的失去焦点
blurFunc() {
window.console.log(‘blur‘);
this.isShowDropDownBox = false;
}
}
};
</script>
下拉弹框布局
<style lang=‘less‘ scoped>
.drop-button-container {
margin-left: 30px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.drop-button {
margin-left: 12px;
}
.drop-down-container {
position: absolute;
top: 4px;
right: 0;
z-index: 11;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
box-shadow: 0px 3px 29px 0px rgba(59,74,116,0.14);
border-radius: 16px;
.item {
font-size: 16px;
line-height: 16px;
font-weight: 500;
padding: 6px 0;
}
}
.icon_drop {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #000;
}
.drop-down-box-bg {
background-color: #e6e6e6;
}
.primary-color {
color: #fb7299,
}
.base-text {
color: #000
}
}
</style>
完整代码：
<template>
<div>
<!-- 下拉框相关 -->
<div class="drop-button-container" @click="switchDropDownBox" tabindex="0" @blur="blurFunc">
<div>{{ currentPreferenceLine }}</div>
<div class="drop-button icon_drop"></div>
<!-- 下拉弹框 -->
<div class="drop-down-container drop-down-box-bg" v-if="isShowDropDownBox">
<div
class="item"
:class="item.isSelect ? ‘primary-color‘ : ‘base-text‘"
v-for="(item, index) in dropDownBoxData"
:key="index"
@click="swichPreferenceLine(index)">
{{item.text}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: ‘UserProfit‘,
computed: {
// 获取当前下拉框的选中项
currentPreferenceLine() {
return this.dropDownBoxData.find(item => item.isSelect).text;
}
},
data() {
return {
// 下拉框选项数据
dropDownBoxData: [
{
text: ‘DOW J‘,
isSelect: true,
},
{
text: ‘S/P 500‘,
isSelect: false
},
{
text: ‘NASDAQ‘,
isSelect: false
},
],
// 是否显示下拉框
isShowDropDownBox: false
};
},
methods: {
// 下拉框显示和隐藏
switchDropDownBox() {
this.isShowDropDownBox = !this.isShowDropDownBox;
},
// 切换辅助线 -- 下拉框项的选择
swichPreferenceLine(index) {
for (const i in this.dropDownBoxData) {
if (this.dropDownBoxData[i].hasOwnProperty(‘isSelect‘)) {
this.dropDownBoxData[i].isSelect = false;
}
}
if (this.dropDownBoxData[index].hasOwnProperty(‘isSelect‘)) {
this.dropDownBoxData[index].isSelect = true;
}
},
// 下拉框隐藏 -- 使用tabindex的失去焦点
blurFunc() {
window.console.log(‘blur‘);
this.isShowDropDownBox = false;
}
}
};
</script>
<style lang=‘less‘ scoped>
.drop-button-container {
margin-left: 30px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.drop-button {
margin-left: 12px;
}
.drop-down-container {
position: absolute;
top: 4px;
right: 0;
z-index: 11;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
box-shadow: 0px 3px 29px 0px rgba(59,74,116,0.14);
border-radius: 16px;
.item {
font-size: 16px;
line-height: 16px;
font-weight: 500;
padding: 6px 0;
}
}
.icon_drop {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #000;
}
.drop-down-box-bg {
background-color: #e6e6e6;
}
.primary-color {
color: #fb7299,
}
.base-text {
color: #000
}
}
</style>
https://blog.csdn.net/weixin_40532650/article/details/109534124