bc_wx_applet/components/use-list-title/use-list-title.vue

<template>
	<view :class="type == 'round' ? 'padding-lr-sm' : ''">
		<!-- 列表标题 -->
		<view class="use-list-title dflex-b padding-lr-sm w-full bg-main" :class="type == 'round' ? 'border-radius' : ''" @click="goto">
			<view class="dflex">
				<u-icon :name="icon" :color="color" :size="iconSize"></u-icon>
				<view v-if="iconfont && iconfont != ' '" class="iconfont __left margin-right-sm" :class="iconfont" :style="{ color: color }"></view>
				<text :style="{fontSize: size + 'rpx', fontWeight: fwt }">{{ title }}</text>
			</view>
			<view class="dflex" v-if="showRight">
				<text v-if="tip" class="tip margin-right-xs">{{tip}}</text>
				<view class="iconfont fs-sm" :class="rightIcon" :style="{ color: rightColor }"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			default: 'square'
		},
		title: {
			type: String,
			default: '列表标题'
		},
		iconSize:{
			type: String,
			default: '28'
		},
		size: {
			type: String,
			default: '28'
		},
		fwt: {
			type: String,
			default: 'normal'
		},
		tip: {
			type: [String, Number],
			default: ''
		},
		icon: {
			type: String,
		},
		color: {
			type: String,
			default: '#C0C4CC'
		},
		rightIcon: {
			type: String
		},
		rightColor: {
			type: String,
			default: '#c0c0c0'
		},
		showRight: {
			type:Boolean,
			default:true
		}
	},
	data() {
		return {};
	},
	methods: {
		goto() {
			this.$emit('goto', {
				type: 'goto'
			});
		}
	}
};
</script>

<style lang="scss">
.use-list-title {
	height: 100rpx;
	line-height: 100rpx;
}
.use-list-title {
	.__left{
		font-size: $font-lg + 8upx;
	}
	
	.iconfont {
		color: #c0c0c0;
	}
	
	.tip {
		font-size: $font-sm;
		color: #c0c0c0;
	}
}
</style>