在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件
这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单
这里首先用一个单独的页面存放这个组件
<template>
//这里是搜索框的输入框 不需要的可以删掉
<view>
<view class="arrivalSearch">
<view class="arrivalSmallsearch">
<view class="arrivalSearchInput">
<input type="text" :placeholder="dateinit">
</view>
//这里是输入框旁边的图标(这里的图标是一张图片)
<image src="../../static/img/nav.png" mode="aspectFill" @click.stop="ShowHidden = !ShowHidden"> </image>
</view>
</view>
//这里是弹出来的下拉筛选框
<view class="arrivalNavigation" v-if="ShowHidden">
<view class="d4"></view>
<view class="sideNavigation">
<nav>
<ul>
<navigator url="../arrivalQuery/arrivalQuery">
<li>到货查询</li>
</navigator>
<view class="liBottomBorder"></view>
<navigator url="../retailStore/retailStore"><li>门店查询</li></navigator>
<view class="liBottomBorder"></view>
<navigator url="../itemNoQuery/itemNoQuery"><li>货号查询</li></navigator>
<view class="liBottomBorder"></view>
<navigator url="../priceReductionQuery/priceReductionQuery"><li>降价查询</li></navigator>
</ul>
</nav>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ShowHidden: false,
dateinit:'请输入货号',
};
},
methods: {
// 点击页面事件 隐藏需要隐藏的区域
HiddenClick () {
this.ShowHidden = false
},
},
mounted () {
// document.addEventListener('click', this.HiddenClick)
},
}
</script>
<style lang="less">
.arrivalSearch{
width: 100%;
height: 100rpx;
background-color: #fff;
box-shadow: 0 0 10rpx #eee;
.arrivalSmallsearch{
width: 96%;
display: flex;
.arrivalSearchInput{
height: 70rpx;
background-color: #F0F1F6;
border-radius: 40rpx;
font-size: 25rpx;
margin-left: 10rpx;
margin-top: 10rpx;
width: 608rpx;
}
input{
width: 80%;
margin-left: 40rpx;
margin-top: 10rpx;
}
image{
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
}
}
//从这里开始是弹出框的样式 不需要搜索框的 前面样式都不用加
.arrivalNavigation{
width: 250rpx;
position: absolute;
right:20rpx;
z-index: 99;
.sideNavigation{
width: 248rpx;
background-color: #202020;
color: #eee;
border-radius: 10rpx;
li{
height: 85rpx;
text-align: center;
line-height: 85rpx;
font-size: 25rpx;
}
.liBottomBorder{
border: 0.1rpx solid #373737;
}
}
.d4{
// position: absolute;
// left: 140rpx;
width: 0;
height: 0;
margin-left: 150rpx;
margin-top: -20rpx;
border-width:20rpx;
border-style: solid;
border-color: transparent #333 transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
}
</style>
然后在main.js中引入页面
import springBox from 'pages/springBox/springBox'
Vue.component('springBox',springBox)
最后直接在需要使用的页面使用组件就可以了
<springBox></springBox>
完成!!!