外卖满减优惠券组件

展示样式：

样式说明：父组件限制宽度，超出宽度会显示下拉箭头，如果没有超出则不显示下拉箭头。

子组件代码：

<template>
	 <view :class="[isAuto ? '' : 'No-auto', 'discount-list']">
		 <view class="discount-item" v-for="(item,index) in list" :key="index">{{item}}</view>
		 <view v-show="isShow">
			 <image class="discount__icon" v-show="!selected" mode="aspectFit" src="../../static/images/icon/icon_tri_down.png" @tap.native.stop="onTap"></image>
			 <image class="discount__icon" v-show="selected" mode="aspectFit" src="../../static/images/icon/icon_tri_up.png" @tap.native.stop="onTap"></image>
		 </view>
		
	 </view>
</template>

<script>
	export default {
		name: 'discount-list',
		data(){
			return {
				selected:false,
		        isShow:false,
				isAuto:true
			}
		},
		props: {
			icon: {
				type: String,
				default: ''
			},
			extend: {
				type: Boolean,
				default:false
			},
			list:{
				type:Array
			}
		},
		computed:{
		
		},
		mounted(){
			
			let view = uni.createSelectorQuery().in(this).select(".discount-list");
			view.boundingClientRect(data => {
			  if(data.height>25){
				  this.isShow=true
				  this.isAuto=false
			  }
			}).exec();
		},
		methods:{
			onTap(){
				this.selected=!this.selected
				this.isAuto=!this.isAuto
			
			}
		}
	}
</script>

<style lang="scss">
	.discount-list{
		overflow:hidden;

		.discount-item{
			float: left;
			margin-right: 15upx;
			margin-bottom: 8upx;
			height:34upx;
			background:rgba(255,255,255,1);
			border-radius:4px;
			border:1px solid rgba(255,48,30,1);
			color: #FF301E;
			padding:3upx 8upx;
			font-size: 20upx;
		}
		
		.discount__icon{
			width: 32upx;
			height:32upx;
			position: absolute;
			right: -10upx;
			top: 5upx;
		}
	}
	.No-auto{
		height: 50upx;
	}
</style>

父组件代码：

<discount-list   :list="discountList"></discount-list>

注：因为开发用的是uni-app框架，所以

计算组件高度部分代码需要根据情况修改