之前我一直在,要想提高自己的代碼質量,
就一定要封裝自己的組件,
所以我就盡量使用自己的組件。這樣可以提高自己的效率
寫組件的好處:減少代碼的冗余
封裝組件的時候,為了不讓子元素的padding,
影響父級元素的寬度。
父級元素使用了怪異盒子
/* 怪異盒子 不會計算padding */
box-sizing: border-box;
為了給提供者,可以修改盒子的背景色等。
如果是h5端的話,直接在主界面中給組件添加一個類就可以修改了
如果是在微信小程序中,需要給主界面的組件添加一個類,然后使用穿透屬性
組件
<template>
<view class="part-demo">
<view class="part-demo-flex" @click="hanlderThe(item)" v-for="(item,index) in picLuanglist">
<view class="left-part">
{{item.lauang}}
</view>
<view class="right-part">
{{item.madata}}
</view>
</view>
</view>
</template>
<script>
export default {
props:{
picLuanglist:{
type:Array
}
},
methods:{
hanlderThe(mess){
this.$emit("hanlder",[mess])
}
}
}
</script>
<style scoped>
.part-demo{
margin: auto;
width: 690rpx;
background:"#ffffff";
border-radius: 20rpx;
box-shadow: 0pt 0pt 13pt 6pt rgba(179,179,179,0.1);
padding-left: 30rpx;
padding-right: 32rpx;
/* 怪異盒子 不會計算padding */
box-sizing: border-box;
}
.part-demo-flex{
display: flex;
justify-content: space-between;
height: 94rpx;
line-height: 94rpx;
}
.left-part{
width: 500rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 32rpx;
font-weight: 400;
color: #963c3c;
}
.right-part{
font-size: 24rpx;
font-weight: 400;
color: #963c3c;
text-align: right;
}
</style>
主頁面
<pic-laung-dec-list-part :picLuanglist="picLuanglist"
@hanlder="currentHanler"
class="my-updata"
></pic-laung-dec-list-part>
import picLaungDecListPart from "../../components/picLaungDecListPart.vue"
picLuanglist:[
{lauang:"關於開展2020年教職工送溫暖活動",madata:"02-01"},
{lauang:"關於舉行致敬!度頒獎晚會的通知",madata:"02-11"},
{lauang:"關於開展教職工“送溫暖”活動的",madata:"03-21"},
{lauang:"關於舉行 “致敬!度頒獎晚會的通知",madata:"04-11"},
{lauang:"開展校園資產管理培訓會議通知",madata:"04-21"},
]
components:{
"pic-laung-dec-list-part":picLaungDecListPart
},
methods:{
currentHanler(mess){
console.log(mess[0])
}
}
如何想在主界面中,修改css樣式咋辦????
/*適用H5*/
.my-updata {
background: #09BB07;
}
/*適用小程序*/
.my-updata >>> .part-demo{
background: #09BB07;
}