106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
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>
|