## Grid佈局 ### 1 概述 網格佈局（Grid）將王爺分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局。Grid佈局與Flex不具有一定的相似性，都可以指定容器內部多個項目的位置，但是他們存在重大的區別。flex佈局時軸線佈局，只能指定項目針對軸線的位置，可以看作是一維佈局；gr ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。 組件化對於任何一個業務場景複雜的前端應用以及經過多次迭代之後的產品來說都是必經之路。組件化要做的不僅僅是錶面上看到的模塊拆分解耦，其背後還有很多工作來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的交互方式和構建系統等等
今天給大家介紹的一款組件自定義精美商品訂單星級評分組件 星級評分 愛心評分；附源碼下載地址：https://ext.dcloud.net.cn/plugin?id=13497
效果圖如下:
cc-starEvaluate
使用方法
<!-- stars:星級數據 @click：點擊事件 -->
<cc-starEvaluate :stars="stars" @click="setStar"></cc-starEvaluate>
<!-- 設置數據 預設五星 -->
stars: [{
id: 1,
types: true,
},
{
id: 2,
types: true,
},
{
id: 3,
types: true,
},
{
id: 4,
types: true,
},
{
id: 5,
types: true,
},
],
HTML代碼實現部分
<template>
<view>
<view class="evaluate">
<view class="Rate">
<p>整體評價</p>
<!-- stars:星級數據 @click：點擊事件 -->
<cc-starEvaluate :stars="stars" @click="setStar"></cc-starEvaluate>
</view>
<view class="Rate">
<p>物流評價</p>
<!-- stars:星級數據 @click：點擊事件 -->
<cc-starEvaluate :stars="starsTwo" @click="setStarTwo"></cc-starEvaluate>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 預設五星
stars: [{
id: 1,
types: true,
},
{
id: 2,
types: true,
},
{
id: 3,
types: true,
},
{
id: 4,
types: true,
},
{
id: 5,
types: true,
},
],
// 預設0星
starsTwo: [{
id: 1,
types: false,
},
{
id: 2,
types: false,
},
{
id: 3,
types: false,
},
{
id: 4,
types: false,
},
{
id: 5,
types: false,
},
],
};
},
onLoad(options) {
},
methods: {
// 總體評價
setStar(value) {
console.log("stars = " + value);
uni.showModal({
title:'點擊評價',
content:'點擊評價 = ' + value + '星'
})
},
// 物流評價
setStarTwo(value) {
console.log("stars = " + value);
uni.showModal({
title:'點擊評價',
content:'點擊評價 = ' + value + ' 星'
})
},
}
};
</script>
<style lang="scss" scoped>
page {
background-color: #F8F8F8;
}
.evaluate {
margin: 0 4%;
background-color: #FFFFFF;
box-shadow: 0upx 0upx 10upx #DDDDDD;
border-radius: 8upx;
position: relative;
top: 20upx;
.Rate {
padding: 0upx 30upx 30upx;
background-color: #FFFFFF;
border-bottom: 1upx solid #eee;
p {
height: 60upx;
line-height: 60upx;
font-size: 30upx;
color: #333;
}
}
}
</style>
