我想写一个省市的选择框做成类似iview中picker那种，但是在写的时候发现，使用focus事件控制列表显示/隐藏切换不好用，查了半天没找到好的解决办法

下面是我的代码：

• {{item.province}}
  • {{item.city_label}}

export default {

name: "cityDicker",

data() {

return {

citylistshow: false, // 城市选择面板

selprovice: "",

selcity: "",

workCity: "",

cityList: [

{

province: "北京",

province_code: "001",

citys: [

{

city_label: "北京市",

city_code: "001001"

},

{

city_label: "北京郊区",

city_code: "001002"

}

]

},

{

province: "上海",

province_code: "002",

citys: [

{

city_label: "上海市",

city_code: "002001"

},

{

city_label: "其他",

city_code: "002002"

}

]

},

{

province: "深圳",

province_code: "003",

citys: [

{

city_label: "深圳",

city_code: "003001"

},

{

city_label: "其他",

city_code: "003002"

}

]

}

]

};

},

methods: {

cityFocus(flag) {

if (this.cityfocus === true) {

this.cityfocus = false;

} else {

this.citylistshow = flag;

console.log(this.citylistshow);

}

},

provinceClick(prov, e) {

this.citylistshow = true;

if (this.selprovice === prov) {

this.selprovice = "";

} else {

this.selprovice = prov;

}

},

cityClick(prov, e) {

if (this.selcity === prov) {

this.selcity = "";

this.workCity = "";

} else {

this.selcity = prov;

this.workCity = {

provice: this.selprovice,

city: this.selcity,

citycode: e.target.dataset.citycode

};

}

this.$emit("getWorkerCity", this.workCity);

console.log(this.workCity);

}

}

};

.city-select-picker {

display: inline-block;

position: relative;

z-index: 100;

.provice-list {

position: absolute;

background-color: #fff;

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

border-radius: 4px;

padding: 0 5px;

width: 500px;

left: 0;

top: 37px;

.provice-item {

display: inline-block;

padding: 3px 5px;

background-color: #f4f4f4;

margin: 10px 5px;

&:hover {

background-color: #e0e0e0;

}

}

}

.city-list {

position: absolute;

width: 500px;

left: 0;

margin-top: 10px;

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

padding: 0 5px 10px;

background-color: #fff;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

.city-item {

display: inline-block;

padding: 3px 5px;

background-color: #f4f4f4;

margin: 5px;

&:hover {

background-color: #e0e0e0;

}

}

}

.proactive {

background-color: #e0e0e0 !important;

}

}

运行的结果如下图：

当点击下面的弹出层的时候直接失去焦点就消失了，造成根本选不了的结果

我想要的结果是这种点击弹出的东西文本框不会失去焦点的样子，如截图：

点击年份文本框是不会失去焦点的这种，但是想半天一直没找到好用的实现思路，希望有大神能帮忙指点下思路，非常感谢！