141 lines
3.1 KiB
Vue
141 lines
3.1 KiB
Vue
<template>
|
||
<view>
|
||
|
||
<view class="tm-grouplist overflow "
|
||
:class="['ma-' + margin, ' round-' + round, 'shadow-' + shadow, black_tmeme ? 'bk' : '']">
|
||
<view v-if="title&&title!='true'" class="px-32 py-16 text-weight-b " :class="[`text-size-${fontSize}`,titleTheme, black_tmeme ? 'bk' : '']">
|
||
<slot name="title" :title="title">{{ title }}</slot>
|
||
</view>
|
||
<view >
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 列表组
|
||
* @description (可嵌套使用)需要配合tm-listitem使用
|
||
* @property {Boolean} black = [true|false] 默认：null，暗黑模式
|
||
* @property {Number} margin = [] 默认：32，单位upx,外间距。
|
||
* @property {Number} shadow = [] 默认：10，单位upx,投影
|
||
* @property {Number} round = [] 默认：4，单位upx, 外部圆角
|
||
* @property {String} title = [] 默认：''，标题。
|
||
* @property {String} font-size = [xxs|xs|s|n|g|lg|xl] 默认：'n'，标题大小，注意是css库中的xxs,xs,s,n,g,lg,xl
|
||
* @property {Boolean} border-bottom = [] 默认：true ,是否显示底边线。
|
||
* @property {String} title-theme = [] 默认：primary，标题的主题色彩名。
|
||
* @property {Function} change 点击了列表那一个元素。并返回Index
|
||
* @example <tm-grouplist title="配置">
|
||
<tm-listitem title="应用栏" v-for="(item,index) in 4" :key="index"></tm-listitem>
|
||
</tm-grouplist>
|
||
*/
|
||
export default {
|
||
name: 'tm-grouplist',
|
||
props: {
|
||
black: {
|
||
type: String | Boolean,
|
||
default: null
|
||
},
|
||
borderBottom: {
|
||
type: String | Boolean,
|
||
default: true
|
||
},
|
||
// 单位upx
|
||
margin: {
|
||
type: String | Number,
|
||
default: 32
|
||
},
|
||
// 外部圆角
|
||
round: {
|
||
type: String | Number,
|
||
default: 3
|
||
},
|
||
// 投影
|
||
shadow: {
|
||
type: String | Number,
|
||
default: 4
|
||
},
|
||
// 组标题。
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 标题的主题色彩名。
|
||
titleTheme: {
|
||
type: String,
|
||
default: 'primary'
|
||
},
|
||
fontSize:{
|
||
type:String,
|
||
default:'n'
|
||
}
|
||
},
|
||
computed:{
|
||
black_tmeme:function(){
|
||
if(this.black!==null) return this.black;
|
||
return this.$tm.vx.state().tmVuetify.black;
|
||
}
|
||
},
|
||
provide(){
|
||
let t = this;
|
||
return {
|
||
GroupListStyles:()=>{
|
||
return {
|
||
margin: [0,0],
|
||
padding: [32,24],
|
||
shadow: 0,
|
||
round: 0,
|
||
borderBottom: true
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
targ:'tm-grouplist',
|
||
chuliWsok:false,//处理完宽度计算信息再进行显示内部内容。
|
||
};
|
||
},
|
||
created() {
|
||
// #ifdef H5
|
||
this.chuliWsok = true;
|
||
// #endif
|
||
},
|
||
mounted() {
|
||
this.inits();
|
||
},
|
||
watch:{
|
||
|
||
},
|
||
updated(){
|
||
this.inits();
|
||
},
|
||
methods: {
|
||
inits(){
|
||
|
||
},
|
||
// 事件一定是子项目tm-listitem为group模式时，才会触发。
|
||
change(vue_uid) {
|
||
// 具体点了哪一个项目，并展开了。
|
||
let t = this;
|
||
let ch = this.$children;
|
||
// #ifdef H5
|
||
ch = this.$children[0].$children[0].$children;
|
||
ch = ch[1].$children;
|
||
// #endif
|
||
// 在H5下无法找到$children。因此始终是-1
|
||
let index = ch.findIndex(item => {
|
||
return vue_uid == item._uid;
|
||
});
|
||
this.$emit('change', index);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" >
|
||
|
||
|
||
</style>
|