Avec le développement de la technologie, la complexité du développement devient de plus en plus élevée. La méthode de développement traditionnelle transforme un système en une application complète. Il arrive souvent qu'un petit changement ou une petite augmentation de fonction puisse entraîner un changement de la logique globale. Modifications, ce qui fait que tout le corps est affecté par un seul poil.
Grâce au développement de composants, un développement et une maintenance séparés peuvent être efficacement réalisés et ils peuvent être combinés à volonté. Améliorez considérablement l'efficacité du développement et réduisez les coûts de maintenance.
Aujourd'hui, je vais introduire un composant qui imite l'alerte contextuelle de la boîte de filtre sur le côté droit de Meituan ; l'adresse de téléchargement du code source est jointe : https://ext.dcloud.net.cn/plugin?id=13602
Les rendus sont les suivants :
[Le transfert d'image du lien externe a échoué, le site source peut avoir un mécanisme de lien antivol, il est recommandé d'enregistrer l'image et de la télécharger directement (img-dCgLNhgW-1689509203340)(https://p3-juejin.byteimg.com/ tos-cn-i-k3u1fbpfcp /80811c30cb684ed0bbedf7dca0c3337e~tplv-k3u1fbpfcp-zoom-1.image)]
Le code d'implémentation est le suivant
cc-rightPopup
Instructions
<!-- 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)
})
}
Partie implémentation du code 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>