189 lines
5.0 KiB
Vue
189 lines
5.0 KiB
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>
|