wardrobe/tm-vuetify/components/tm-sliderNav/tm-sliderNav.vue

<template>
	<view class="tm-sliderNav fulled-height">
		<scroll-view scroll-y :style="{
				height:activeHeight+'px',
				width:activeWidth+'px',
			}">
			<tm-listitem  :disabled="item['disabled']==true?true:false" :black="black_tmeme"
			@click="change(index)" 
			v-for="(item,index) in formaData" :key='index'
			:color="activeIndex==index?(text?' text ' + color_tmeme:'white'):bgColor" 
			:show-right-icon="false" 
			:margin="[0,0]" 
			:padding="[10,32]"
			:fontSize="fontSize"
			:class-style="activeIndex==index?`border-${color_tmeme}-l-2`:`border-${bgColor}-l-2`"
			round="0" shadow="0"
			>
			<tm-badges color='red' :fllowTheme="false" :offset="[12,-10]" v-if="item.dot>0&&dot" :dot="false" :label="item.dot"></tm-badges>
			<view class="" >
				<text :class="[`text-${activeIndex==index?color_tmeme:fontColor}`,item['disabled']?'opacity-3':'']">{{item[rangKey]}}</text>
			</view>
			</tm-listitem>
		</scroll-view>
	</view>
</template>

<script>

	/**
	 * 侧边导航
	 * @property {Number|String} height = [] 默认0，单位upx,自动使用父组件的高度。
	 * @property {Number|String} width = [] 默认190，单位upx,宽度
	 * @property {Number} round = [] 默认4，单位upx,圆角
	 * @property {Array} list = [] 默认[]，数据结构对象，必须需要含有唯一标识符id即可。[{title:'苏州'}],，可以含有dot,显示角标。每一个类目和子类可以含有disabled值，用来禁用类目或者选项。
	 * @property {String} rang-key = [] 默认'title'，数据结构对象中，需要展示标签的key
	 * @property {String} color = [] 默认 primary，主题色名
	 * @property {String} bg-color = [] 默认 grey-lighten-5，主题色名未选择时的背景色。
	 * @property {String} font-color = [] 默认 grey，未选中时的文字颜色
	 * @property {String} font-size = [] 默认 28，项目文字大小单位rpx
	 * @property {Boolean} black = [] 默认 false，是否暗黑模式。
	 * @property {Boolean} dot = [] 默认 false，是否显示角标数字,当前选中的数量。
	 * @property {Boolean} text = [] 默认 false，使用主题文本色为高亮色。
	 * @property {Function} change 每次选择变化都会触发全局change,
	 * @example <tm-sliderNav  :text="true" :list="list"></tm-sliderNav>
	 */

	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
	import tmBadges from "@/tm-vuetify/components/tm-badges/tm-badges.vue"
	export default {
		components:{tmListitem,tmGrouplist,tmBadges},
		name:"tm-sliderNav",
		props:{
			// 高度，默认为0时，自动使用父组件的高度.单位upx
			height: {
				type: String | Number,
				default: 0
			},
			//单位upx
			width: {
				type: String | Number,
				default: 190
			},
			//单位upx
			round: {
				type: Number,
				default: 4
			},
			// 对象数组
			list:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			// 显示标签的key.
			rangKey:{
				type:String,
				default:'title'
			},
			// 主题色名
			color:{
				type:String,
				default:'primary'
			},
			fontColor:{
				type:String,
				default:'grey-darken-1'
			},
			
			black:{
				type:Boolean|String,
				default:null
			},
			// 是否显示角标数字当前选中的数量。
			dot:{
				type:Boolean,
				default:true
			},
			// 使用主题文本色为高亮色。
			text:{
				type:Boolean,
				default:false
			},
			fontSize:{
				type:String|Number,
				default:'28'
			},
			// 未选择时的背景色。
			bgColor:{
				type:String,
				default:'grey-lighten-5'
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		watch:{
			list:{
				deep:true,
				handler(){
					this.dataList = this.list;
				}
			}
		},
		data() {
			return {
				activeHeight:0,
				activeWidth:0,
				activeIndex:0,
				formaData:[]
			};
		},
		computed:{
			dataList:{
				get:function(){
						
						return this.formaData
					},
				set:function(val){
					let t = this;
					let p = [...val];
					for(let j=0;j<p.length;j++){
						if(!p[j].hasOwnProperty('dot')){
							p[j]['dot'] = 0;
						}
					}
				
					this.formaData = p;
				}
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
		},
		mounted() {
			let t = this;
			this.$nextTick(async function() {
				this.activeHeight = uni.upx2px(this.height);
				if (!this.activeHeight) {
					let wsz = await this.$Querey(".tm-sliderNav",this).catch(e=>{})
					this.activeHeight = wsz[0].height||250;
					this.activeWidth =uni.upx2px(this.width)||100;
				}
				this.dataList = this.list;
			});
		},
		methods: {
			change(index) {
				this.activeIndex=index;
				this.$emit('change',index);
			}
		},
	}
</script>

<style lang="scss">

</style>