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;
}

posted @   何人陪我共长生  阅读(4290)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示