frontend/examking-app/plugins/uview-ui/components/u-subsection/u-subsection.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<view class="u-subsection" :style="[subsectionStyle]">
		<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
		 v-for="(item, index) in listInfo" :key="index">
			<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
		</view>
		<view class="u-item-bg" :style="[itemBarStyle]"></view>
	</view>
</template>

<script>
	/**
	 * subsection 分段器
	 * @description 该分段器一般用于用户从几个选项中选择某一个的场景
	 * @tutorial https://www.uviewui.com/components/subsection.html
	 * @property {Array} list 选项的数组，形式见上方"基本使用"
	 * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
	 * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
	 * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
	 * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
	 * @property {String Number} font-size 字体大小，单位rpx（默认28）
	 * @property {String Number} height 组件高度，单位rpx（默认70）
	 * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
	 * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
	 * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
	 * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
	 * @event {Function} change 分段器选项发生改变时触发
	 * @example <u-subsection active-color="#ff9900"></u-subsection>
	 */
	export default {
		name: "u-subsection",
		props: {
			// tab的数据
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 当前活动的tab的index
			current: {
				type: [Number, String],
				default: 0
			},
			// 激活的颜色
			activeColor: {
				type: String,
				default: '#303133'
			},
			// 未激活的颜色
			inactiveColor: {
				type: String,
				default: '#606266'
			},
			// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
			mode: {
				type: String,
				default: 'button'
			},
			// 字体大小，单位rpx