uni-Identify-quality/tm-vuetify/components/tm-groupButton/tm-groupButton.vue

<template>
	<view class="tm-groupButton  " :class="[`mx-${margin[0]}`,`my-${margin[1]}`]">
		<view class="overflow fulled "  :class="[`round-${round}`]">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 按钮组
	 * @param {Number} round = [] 默认4，圆角
	 * @param {Number} margin = [] 默认 [0,24] 上下间距
	 * @param {Number} active-color = [] 默认 primary 点按激活的颜色主题
	 * @property {Function} change 点按按钮选中时的触发，返回当前索引值。
	 */
	export default {
		name:"tm-groupButton",
		props: {
			round: {
				type: Number|String,
				default: 4
			},
			margin: {
				type: Array,
				default: ()=>[0,24]
			},
			activeColor: {
				type: String,
				default: 'primary'
			},
		},
		data() {
			return {
				activeIndex:null,
			};
		},
		mounted() {
			this.$nextTick(function(){
				this.inits();
			})
		},
		updated(){
			this.$nextTick(function () {
				this.inits();
			})
		},
		methods: {
			inits() {
				let t = this;
				let ch = [];
				// #ifndef H5
				ch = this.$children;
				// #endif
				// #ifdef H5
				ch = this.$children[0].$children[0].$children;
				// #endif
				ch.forEach((item, index) => {
					if (item.$options.name === 'tm-button') {
						let str = '';
						if(index==0){
							str = ' round-l-'+t.round+' round-r-0'
						}else if(index==ch.length-1){
							str = ' round-r-'+t.round+' round-l-0'
						}else{
							str = ' round-l-0 round-r-0'
						}
						item.customClass_puted=" ma-0 "+str;
						item.customDense_puted=true;
						item.onclick=function(){
							t.colorDefault();
							item.$emit('click',...arguments)
							t.$emit('change',index)
							t.activeIndex=index;
							item.color_tmeme = t.activeColor
						}
						if(index!==0){
							item.setConfigStyle('border-l-1')
						}
					}
				});
				
			},
			colorDefault(){
				let t = this;
				let ch = [];
				// #ifndef H5
				ch = this.$children;
				// #endif
				// #ifdef H5
				ch = this.$children[0].$children[0].$children;
				// #endif
				ch.forEach((item, index) => {
					if (item.$options.name === 'tm-button') {
						item.color_tmeme = item.theme
					}
				});
			}
		}
	}
</script>

<style lang="scss">

</style>