uni-app組件 信息列表組件


之前我一直在,要想提高自己的代碼質量,
就一定要封裝自己的組件,
所以我就盡量使用自己的組件。這樣可以提高自己的效率
寫組件的好處:減少代碼的冗余
封裝組件的時候,為了不讓子元素的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;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM