javascript - vue.js如何如何实现点击document 让隐藏的下拉框功能

问题描述

问 题

1。自己写一个下拉框的组件，但是没有实现点击document让下拉框消失的功能，

<template>
<div class="choose-slidedown" @click.stop="showItem">
<p :class="{choosed: bChoosed}" :style="pStyle">
<span>{{choosedLabel}}</span>
</p>
<ul class="list" v-if="bVisible">

<li v-for="item in useroptions" :class="{active: item.bActive}" @click="chooseItem(item)" >{{item.label}}</li>

</ul>
</div>
</template>

export default {
name: 'slidedown',
props:
{

pStyle: {
  type: Object
},
arrowStyle: {
  type: Object
},
useroptions: {
  type: Array,
  default () {
    return [{
      value: '100',
      label: '100万',
      bActive: false
    }, {
      value: '200',
      label: '200万',
      bActive: false
    }, {
      value: '300',
      label: '300万',
      bActive: false
    }, {
      value: '500',
      label: '500万',
      bActive: false
    }, {
      value: '1000',
      label: '1000万',
      bActive: false
    }]
  }
}

},
data () {

return {
  value: '',
  label: '请选择',
  bVisible: false,
  bChoosed: false
}

},
computed: {

choosedLabel () {
  var temp = this.useroptions.filter(item => { return item.bActive === true })
  if (temp[0]) {
    return temp[0]['label']
  } else {
    return '请选择'
  }
}

},
methods: {

chooseItem: function (item) {
  this.useroptions.map(item => { item.bActive = false })
  item.bActive = true
  this.value = item.value
  this.label = item.label
  this.bChoosed = true
  this.$emit('receiveData', this.label, this.value)
},
showItem () {
  this.bVisible = !this.bVisible
}

},
created () {

// 现在还在测试中
document.onclick = () => {
  this.$set(this.$data, 'bVisible', false)
  console.log(this.$data.bVisible)
}

}
}
</script

但是现在底部的document.onclick = () => {
this.bVisible = false
}
生效了，但是下拉框就是不隐藏，该怎么解决？

解决方案

试试用@blur 这个失去焦点的事件是不是符合你的要求.对了如果要在div上用给div加tabindex="1"

测试的例子

这篇关于javascript - vue.js如何如何实现点击document 让隐藏的下拉框功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！