今天接到粉絲私信，詢問是否可以通過Canvas繪製一些圖形，然後根據粉絲提供的模板圖，通過Canvas進行模擬繪製，通過分析發現，圖形雖然相對簡單，但是如果不藉助相應的軟體，純代碼繪製還是稍微費些時間。今天將繪製圖形源碼分享出來，僅供學習分享之用，如有不足之處，還請指正。 ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。
今天給大家介紹的一款組件仿美團右側側邊欄彈框篩選框popup alert；附源碼下載地址 ： https://ext.dcloud.net.cn/plugin?id=13602
效果圖如下：
實現代碼如下
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>
