【075】Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表?解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候,说明是在下拉列表范围外的点击(
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表?
解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表。
如果是纯 JS 代码,有人可能会使用 document.onclick
来添加根节点事件。不过,我现在使用 Vue.js,会选择使用 Vue.js 的方式处理这个问题。
Vue.js 使用组件化的方式组织代码,会有一个根组件,可以在这个根组件上加上 @click
事件,来响应区域外的点击事件。在一个完整的应用中,可能有多种场景需要这种区域外点击关闭的功能。除了最普通的表单里的下拉列表外,还可能是网站右上角的消息提示框,或者菜单。比较合适的做法是把点击事件的具体处理逻辑放到各个组件中去。
那么如何让各个子组件响应根组件上的点击事件呢?可以使用Vuex来做到这一点。在这里 Vuex 起到了组件之间互相传递信息的作用。
读者可以在这个网址下载我编写的 Demo 项目:http://download.csdn.net/detail/zhangchao19890805/9855750。
推荐读者使用 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>
Vuex 文件结构
vuex
│
└─modules
├─clickRoot
│ ├─actions.js
│ ├─getters.js
│ ├─index.js
│ └─mutations.js
│
└─store.js
actions.js
export default {
// action 允许异步加载,实际项目中
// 这里可以发起个请求,再返回。
clickRootNumAction(context, value) {
context.commit('clickRootNum', value);
}
}
getters.js
export default {
getClickRootNum(state) {
return state.clickRootNum;
}
}
index.js
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
const state = {
clickRootNum: 0
}
export default {
state,
actions,
getters,
mutations
}
mutations.js
export default {
clickRootNum(state, value) {
let sum = state.clickRootNum + value
state.clickRootNum = sum;
}
}
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import clickRoot from './modules/clickRoot'
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production';
export default new Vuex.Store({
modules: {
clickRoot
},
strict: debug
})
页面代码 test.vue
<template>
<div >
<p>测试</p>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
<div class="dropDownList">
<button class="controll" @click.prevent.stop="listShow()"
@keydown.prevent.40="arrowDown1" @keydown.prevent.38="arrowUp1">
{{selectItem}}
<span :class="['triangle',showList==false?'triangleShow':'triangleHidden']"></span>
</button>
<ul class="showList" v-if="showList" @click.prevent.stop>
<input v-model="filterText" class="search"/>
<li v-for="item in newObj" class="optionArea" @click="selectOption(item)"> {{item.type}} </li>
</ul>
</div>
</td>
<td style="vertical-align: top;">
<div class="dropDownList">
<button class="controll" @click.prevent.stop="listShow2()"
@keydown.prevent.40="arrowDown2" @keydown.prevent.38="arrowUp2">
{{selectItem2}}
<span :class="['triangle',showList2==false?'triangleShow':'triangleHidden']"></span>
</button>
<ul class="showList" v-if="showList2" @click.prevent.stop>
<input v-model="filterText2" class="search"/>
<li v-for="item in newObj2" class="optionArea" @click="selectOption2(item)"> {{item.type}} </li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data(){
return {
showList:false,
obj:[
{type:"男装"},
{type:"女装"},
{type:"童装"},
{type:"老年装"},
],
filterText:"",
selectItem:"请选择",
showList2:false,
obj2:[
{type:"奔驰"},
{type:"桑塔纳"},
{type:"大众"},
{type:"比亚迪"},
],
filterText2:"",
selectItem2:"请选择"
};
},
methods:{
listShow(){
this.showList=!this.showList;
if (this.showList2) {
this.showList2 = false;
}
},
selectOption(item){
this.selectItem=item.type;
this.showList=false;
},
// 第一个下拉列表 按键:向下的箭头
arrowDown1(e){
if (!this.showList) {
this.showList = true;
}
if (this.showList2) {
this.showList2 = false;
}
},
// 第一个下拉列表 按键:向上的箭头
arrowUp1(e){
if (this.showList) {
this.showList = false;
}
if (this.showList2) {
this.showList2 = false;
}
},
listShow2(){
this.showList2=!this.showList2;
if (this.showList) {
this.showList = false;
}
},
selectOption2(item){
this.selectItem2=item.type;
this.showList2=false;
},
// 第二个下拉列表 按键:向下的箭头
arrowDown2(e){
if (!this.showList2) {
this.showList2 = true;
}
if (this.showList) {
this.showList = false;
}
},
// 第一个下拉列表 按键:向上的箭头
arrowUp2(e){
if (this.showList2) {
this.showList2 = false;
}
if (this.showList) {
this.showList = false;
}
}
},
computed:{
newObj:function(){
let self = this;
return self.obj.filter(function (item) {
return item.type.toLowerCase().indexOf(self.filterText.toLowerCase()) !== -1;
})
},
newObj2:function(){
let self = this;
return self.obj2.filter(function (item) {
return item.type.toLowerCase().indexOf(self.filterText2.toLowerCase()) !== -1;
})
}
},
watch:{
'$store.getters.getClickRootNum': function () {
if (this.showList){
this.showList = false;
}
if (this.showList2) {
this.showList2 = false;
}
}
}
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.dropDownList{
margin-left:50px;
width: 150px;
.controll{
position: relative;
width: 150px;
border: 1px solid #E3E9EF;
cursor: pointer;
.triangle{
display: inline-block;
position: absolute;
top: 7px;
right: 10px;
cursor: pointer;
}
.triangleHidden{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #676F7F;
}
.triangleShow{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #676F7F;
}
}
.showList{
margin: 0;
padding: 0;
border: 1px solid #E3E9EF;
// padding-top: 5px;
padding-bottom: 5px;
margin-top: 2px;
width: 145px;
.search{
width: 141px;
border: 1px solid #E3E9EF;
}
.optionArea{
list-style: none;
cursor: pointer;
font-size: 14px;
margin-left: 5px;
&:hover{
background-color: #B2CFEB;
color: #fff;
}
}
}
}
</style>
更多推荐
所有评论(0)