You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.1 KiB
47 lines
1.1 KiB
<template>
|
|
<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-segmented-control"
|
|
:style="{borderRadius:borderRadius}">
|
|
<text v-for="(item, index) in items" :key="index"
|
|
:class="['gui-segmented-control-item','gui-block-text',
|
|
index == currentIn ? 'gui-segmented-current':'',
|
|
index == currentIn ? 'gui-fade-in':'']"
|
|
:style="{borderRadius:borderRadius}"
|
|
@tap.stop="changeSC" :data-index="index">{{item}}</text>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
name : "gui-segmented-control",
|
|
props : {
|
|
items : {
|
|
type : Array,
|
|
default : function () { return new Array();}
|
|
},
|
|
current : { type : Number, default : 0},
|
|
borderRadius:{type:String, default:'6rpx'}
|
|
},
|
|
data() {
|
|
return {
|
|
currentIn: 0
|
|
}
|
|
},
|
|
created: function(){
|
|
this.currentIn = this.current;
|
|
},
|
|
watch:{
|
|
current : function (val) {
|
|
this.currentIn = val;
|
|
}
|
|
},
|
|
methods:{
|
|
changeSC:function (e) {
|
|
var index = Number(e.currentTarget.dataset.index);
|
|
this.currentIn = index;
|
|
this.$emit('change', index);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gui-segmented-control-item{width:50rpx; flex:1; text-align:center;}
|
|
</style>
|