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.
74 lines
2.6 KiB
74 lines
2.6 KiB
<template>
|
|
<view @tap="changeOrderBy"
|
|
class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-justify-content-center">
|
|
<view><slot></slot></view>
|
|
<view v-if="orderByIn == 0" class="gui-order gui-flex gui-columns">
|
|
<text class="gui-block-text gui-icons gui-order-icon"
|
|
:style="{width:(size+10)+'rpx', height:(size)+'rpx',
|
|
lineHeight:(size)+'rpx', fontSize:fontSize+'rpx', color:color}"></text>
|
|
<text class="gui-block-text gui-icons gui-order-icon"
|
|
:style="{width:(size+10)+'rpx', height:(size)+'rpx',
|
|
lineHeight:(size)+'rpx', fontSize:fontSize+'rpx', color:color}"></text>
|
|
</view>
|
|
<view v-if="orderByIn == 1" class="gui-order gui-flex gui-columns">
|
|
<text class="gui-block-text gui-icons gui-order-icon"
|
|
:style="{width:(size+10)+'rpx', height:(size)+'rpx',
|
|
lineHeight:(size)+'rpx', fontSize:fontSize+'rpx', color:activeColor}"></text>
|
|
<text class="gui-block-text gui-icons gui-order-icon"
|
|
:style="{width:(size+10)+'rpx', height:(size)+'rpx',
|
|
lineHeight:(size)+'rpx', fontSize:fontSize+'rpx', color:color}"></text>
|
|
</view>
|
|
<view v-if="orderByIn == 2" class="gui-order gui-flex gui-columns">
|
|
<text class="gui-block-text gui-icons gui-order-icon"
|
|
:style="{width:(size+10)+'rpx', height:(size)+'rpx',
|
|
lineHeight:(size)+'rpx', fontSize:fontSize+'rpx', color:color}"></text>
|
|
<text class="gui-block-text gui-icons gui-order-icon"
|
|
:style="{width:(size+10)+'rpx', height:(size)+'rpx',
|
|
lineHeight:(size)+'rpx', fontSize:fontSize+'rpx', color:activeColor}"></text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
name : "gui-order",
|
|
props : {
|
|
size : {type:Number, default:18},
|
|
fontSize : {type:Number, default:36},
|
|
color : {type:String, default:'rgba(69, 90, 100, 0.3)'},
|
|
activeColor : {type:String, default:'#FF0036'},
|
|
orderBy : {type:Number, default:0},
|
|
limit : {type:Array, default:function(){return [0,2];}}
|
|
},
|
|
data() {
|
|
return {
|
|
orderByIn : 0
|
|
}
|
|
},
|
|
created:function(){
|
|
this.orderByIn = this.orderBy;
|
|
this.init();
|
|
},
|
|
watch:{
|
|
orderBy : function(v){
|
|
console.log(v);
|
|
this.orderByIn = v;
|
|
this.init();
|
|
}
|
|
},
|
|
methods:{
|
|
changeOrderBy:function(){
|
|
this.orderByIn++;
|
|
if(this.orderByIn > this.limit[1]){this.orderByIn = this.limit[0];}
|
|
this.$emit('change', this.orderByIn);
|
|
},
|
|
init:function(){
|
|
if(this.orderByIn < 0){this.orderByIn = 0;}
|
|
else if(this.orderByIn > 2){this.orderByIn = 2;}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gui-order{padding:0 15rpx;}
|
|
.gui-order-icon{text-align:center; overflow:hidden;}
|
|
</style>
|