<template> <view class="content solid-bottom"> <view class="mix-list-cell" :class="border" @click="eventClick" hover-class="cell-hover" :hover-stay-time="50"> <text v-if="icon" class="cell-icon yticon" :style="[{color: iconColor,}]" :class="icon"></text> <text v-if="cuIcon" class="cell-icon" :class="'cuIcon-' + cuIcon" :style="'color:'+color"></text> <text class="cell-tit clamp margin-left-xs">{{title}}</text> <text v-if="tips" class="cell-tip margin-right-xs">{{tips}}</text> <text class="cell-more yticon" :class="typeList[navigateType]"></text> </view> </view> </template> <script> /** * 简单封装了下, 应用范围比较狭窄,可以在此基础上进行扩展使用 * 比如加入image, iconSize可控等 */ export default { data() { return { typeList: { left: 'icon-zuo', right: 'icon-you', up: 'icon-shang', down: 'icon-xia' }, } }, props: { icon: { type: String, default: '' }, cuIcon: { type: String, default: '' }, color: { type: String, default: '' }, title: { type: String, default: '标题' }, tips: { type: String, default: '' }, navigateType: { type: String, default: 'right' }, border: { type: String, default: 'b-b' }, hoverClass: { type: String, default: 'cell-hover' }, iconColor: { type: String, default: '#333' } }, methods: { eventClick(){ this.$emit('eventClick'); } }, } </script> <style lang='scss'> .icon .mix-list-cell.b-b:after{ left: 90upx; } .mix-list-cell{ display:flex; align-items:baseline; padding: 16upx 30upx; line-height:60upx; position:relative; &.cell-hover{ background:#fafafa; } &.b-b:after{ left: 30upx; } .cell-icon{ align-self:center; width:56upx; max-height:60upx; font-size:44upx; } .cell-more{ align-self: center; font-size:30upx; color: #606266; /* margin-left:$uni-spacing-row-sm; */ } .cell-tit{ flex: 1; font-size: 32upx; color: #303133; margin-right:10upx; } .cell-tip{ font-size: 30upx; color: #909399; } } </style>