成人色游戏,星星港湾业主论坛,重庆公务员
在开发过程中，为了效果好看，往往需要自己开发一个下拉列表，而不是使用 html 自身的 select 下拉列表。然而当编写自定义下拉列表的时候，就会碰到一个问题：如果用户在下拉列表的范围外进行鼠标点击的操作，如何关闭已经打开的下拉列表？
解决思路如下：在 dom 的根节点上添加一个 click 事件，同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候，说明是在下拉列表范围外的点击（因为下拉列表内阻止了事件的冒泡），就可以关闭已经打开的下拉列表。
如果是纯 js 代码，有人可能会使用 document.onclick 来添加根节点事件。不过，我现在使用 vue.js，会选择使用 vue.js 的方式处理这个问题。
vue.js 使用组件化的方式组织代码，会有一个根组件，可以在这个根组件上加上 @click 事件，来响应区域外的点击事件。在一个完整的应用中，可能有多种场景需要这种区域外点击关闭的功能。除了最普通的表单里的下拉列表外，还可能是网站右上角的消息提示框，或者菜单。比较合适的做法是把点击事件的具体处理逻辑放到各个组件中去。
那么如何让各个子组件响应根组件上的点击事件呢？可以使用vuex来做到这一点。在这里 vuex 起到了组件之间互相传递信息的作用。
读者可以在这个网址下载我编写的 demo 项目：
推荐读者使用 yarn install 安装所需的依赖。
下面说一下关键代码：
程序入口 main.js：
我要评论
import vue from 'vue'
import app from './app.vue'
import vuerouter from 'vue-router'
import routes from './router'
import vuesuperagent from 'vue-superagent'
import vuex from 'vuex'
import 'babel-polyfill';
import store from './vuex/store';
vue.use(vuerouter);
vue.use(vuesuperagent);
vue.use(vuex);
const router = new vuerouter({
mode: 'history',
routes
})
new vue({
el: '#app',
router,
store,
render: h => h(app)
})
根节点 app.vue，添加了点击事件。
<template>
<div @click="clickroot">
<router-view></router-view>
</div>
</template>
<script>
export default {
methods:{
clickroot(event){
this.$store.dispatch("clickrootnumaction", 1);
}
}
}
</script>
以上所述是小编给大家介绍的vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论