前端Vue仿美团右侧侧边栏弹框筛选框popup alert

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

今天给大家介绍的一款组件仿美团右侧侧边栏弹框筛选框popup alert；

阅读全文下载完整代码请关注微信公众号： 前端组件开发

效果图如下：

实现代码如下

cc-rightPopup

使用方法

<!-- pop-show:是否显示弹框  color:主题色 classList：分类数组 @sureClick：筛选确认 @hideClick：隐藏事件  -->

<cc-rightPopup :pop-show="popShow" :colors="colors" :classList="classList" @sureClick="sureClick"

@hideClick="hideright"></cc-rightPopup>

// 隐藏处理

hideright() {

this.popShow = false;

},

// 筛选确认

sureClick(paramDict, selArr) {

this.popShow = false;

uni.showModal({

title: '筛选数据',

    content: '筛选价格数据 = ' + JSON.stringify(paramDict) + ' 筛选按钮数据= ' + JSON.stringify(selArr)

})

}

HTML代码实现部分

<template>

<view class="content">

<button style="margin: 60px 90px;" @click="showPopClick">点击弹框</button>

<!-- pop-show:是否显示弹框  color:主题色 classList：分类数组 @sureClick：筛选确认 @hideClick：隐藏事件  -->

<cc-rightPopup :pop-show="popShow" :colors="colors" :classList="classList" @sureClick="sureClick"

@hideClick="hideright"></cc-rightPopup>

</view>

</template>

<script>

export default {

data() {

return {

colors: '#fa436a',

popShow: false,

classList: [{

name: '营业事件',

id: 1,

child: [{

name: '0-5时',

id: 2

}, {

name: '5-10时',

id: 3

}, {

name: '10-14时',

id: 2

}, {

name: '14-18时',

id: 3

}, {

name: '18-22时',

id: 2

}, {

name: '22-24时',

id: 3

}]

}, {

name: '用餐人数',

id: 2,

child: [{

name: '单人餐',

id: 1

}, {

name: '双人餐',

id: 2

}, {

name: '3-4人餐',

id: 2

},

{

name: '5-10人餐',

id: 2

}

]

}],

}

},

methods: {

showPopClick() {

this.popShow = true;

},

hideright() {

this.popShow = false;

},

sureClick(paramDict, selArr) {

this.popShow = false;

uni.showModal({

title: '筛选数据',

content: '筛选价格数据 = ' + JSON.stringify(paramDict) + ' 筛选按钮数据= ' + JSON.stringify(selArr)

})

}

}

}

</script>

<style>

page {

background-color: #f2f2f2;

margin-bottom: 50px;

}

</style>