wardrobe/tm-vuetify/components/tm-listitem/tm-listitem.vue

<!-- 列表项目，类似单元格。 -->
<template>
	<view class="tm-listitem ">
		<view

			@click="click"
			:style="[
				bgColor?{background:bgColor}:''
			]"
			:class="[
				
				classStyle,
				`mx-${pz_themeCus.margin[0]} my-${pz_themeCus.margin[1]}`,
				disabled===true?(disabledColor + (black_tmeme?' bk ':'')) :(black_tmeme?'grey-darken-4 bk ':(bgColor?'':color)),
				dense?'nom':'',
				`shadow-${pz_themeCus.shadow}`,
				`round-${pz_themeCus.round}`,
				border?'border-a-1':''
			]"
		>
			<view :class="['px-' + pz_themeCus.padding[0], 'py-' + pz_themeCus.padding[1]]">
				<view class="flex-between ">
					<view class="left flex-start ">
						<view class="left-tm-content mr-24 flex-center" v-if="showLeftIcon">
							<slot name="left" :icon="{ icon: leftIcon, color: color_tmeme, fontsize: leftIconSize }">
								<tm-icons v-if="!group" :color="color_tmeme" :name="leftIcon" :size="leftIconSize"></tm-icons>
								<tm-icons v-if="group" :color="color_tmeme" :name="!showContent ? 'icon-caret-right' : 'icon-sort-down'" :size="24"></tm-icons>
							</slot>
						</view>
						<view class="tm-content  flex-col" style="width: 90%;">
							<view
							class="fulled flex-shrink"
								:class="[disabled===true?' text-grey-darken-1 ':(black_tmeme ? 'text-white' : `text-${titleColor}`)]"
								:style="{
									fontSize: fontSize + 'rpx'
								}"
							>
								<slot name="default" :title="title">{{ title }}</slot>
							</view>
							<view vif="label" class="fulled  text-size-s text-weight-xs text-overflow-1  text-grey-lighten-1" :class="[label ? (dense ? 'pt-0' : 'pt-4') : '']">
								<slot name="label" :label="label">{{ label }}</slot>
							</view>
						</view>
					</view>
					<view class="right text-grey-lighten-1 flex-end vertical-align-middle" :class="[black_tmeme ? 'bk' : '']">
						<view class="text-size-s pr-10 d-inline-block">
							<slot name="rightValue" :value="value">{{ value }}</slot>
						</view>
						<slot name="rightIcon" :icon="rightIcon">
							<tm-icons style="line-height: normal;" :color="rightIconColor" dense v-if="showRightIcon" :size="rightIconSize" :name="!showContent ? rightIcon : 'icon-angle-down'"></tm-icons>
						</slot>
					</view>
				</view>
				<view @click.stop="" class="group pt-24" v-if="showContent && group === true"><slot name="group" :show="showContent"></slot></view>
			</view>
			<view class="tm-listitem-border" :class="[pz_themeCus.borderBottom ? 'border-grey-lighten-4-b-1 ' : '',color, 'mx-' + pz_themeCus.padding[0], black_tmeme ? 'bk' : '']"></view>
		</view>
	</view>
</template>

<script>
/**
 * 列表
 * @description 配合tm-grouplist使用时，可以组合成手风琴模式。
 * @property {Boolean} black = [true|false] 默认：null，暗黑模式
 * @property {Number} round = [] 默认：4，单位upx, 外部圆角
 * @property {Array} margin = [] 默认：[0,0]，单位upx,外间距。
 * @property {Array} padding = [] 默认：[32,32]，单位upx,内间距。
 * @property {Number} shadow = [] 默认：6，单位upx,投影
 * @property {String} url = [] 默认：''，打开的链接。不空空时，将会打开链接，如果发生错误，会触发error事件。
 * @property {String} open-type = [navigate | navigateBack |reLaunch | redirect | switchTab] 默认：'navigate'，打开的链接的方式。navigate | navigateBack |reLaunch | redirect | switchTab
 * @property {String} class-style = [] 默认：''，自定义类。
 * @property {Boolean} dense = [true|false] 默认：false，去除外间距。
 * @property {Boolean} border = [true|false] 默认：false，开启边线模式。
 * @property {Boolean} border-bottom = [true|false] 默认：false，是否显示下划线。
 * @property {String} bg-color = [] 默认：""，自定义背景色。
 * @property {String} disabled-color = [] 默认：""，禁用时的背景色
 * @property {String} color = [] 默认："white"，主题色
 * @property {String|Number} left-icon-size = [] 默认："38"，左边图标 大小 。
 * @property {String|Number} right-icon-size = [] 默认："24"，右边图标 大小 。
 * @property {String|Number} left-icon = [] 默认："icon-gem"，左边图标
 * @property {Boolean} show-left-icon = [true|false] 默认：false，是否显示左边图标。
 * @property {String} left-icon-color = [] 默认："primary"，左图标 主题色。
 * @property {String} right-icon = [] 默认："icon-angle-right"，左图标
 * @property {String} right-icon-color = [] 默认："primary"，右图标颜色。
 * @property {Boolean} show-right-icon = [] 默认：false， 是否显示右边图标。
 * @property {String} value = [] 默认：""， 右边文字。
 * @property {String} title = [] 默认：""，标题。
 * @property {String} title-color = [] 默认："grey-darken-3"，标题颜色。
 * @property {String} font-size = [] 默认：32，标题文字大小。
 * @property {String} label = [] 默认：""，下方文字说明。
 * @property {Boolean} group = [true|false] 默认：false，是否开启拓展功能，点击展开内容。slot:group的内容。
 * @property {Boolean} disabled = [true|false] 默认：false，是否禁用
 * @property {Function} click 点击组件时触发
 * @property {Function} error (当url不为空时，打开出错时发出)
 * @property {Function} change (当group为true时才会触发事件，显示和隐藏扩展内容。)
 * @example <tm-listitem  title="而退役"  value="9"></tm-listitem>
 */
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
export default {
	components:{tmIcons},
	name: 'tm-listitem',
	props: {
		
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否开启嵌套内容。
		group: {
			type: Boolean,
			default: false
		},
		// 打开的链接。不空空时，将会打开链接，如果发生错误，会触发error事件。
		url: {
			type: String,
			default: ''
		},
		// 打开的链接的方式。navigate | navigateBack |reLaunch | redirect | switchTab
		openType: {
			type: String,
			default: 'navigate'
		},
		black: {
			type: String | Boolean,
			default: null
		},
		//class.
		classStyle: {
			type: String,
			default: ''
		},
		// 去除外间距。
		dense: {
			type: Boolean,
			default: false
		},
		// false
		border: {
			type: String | Boolean,
			default: false
		},
		// 是否显示下划线
		borderBottom: {
			type: Boolean,
			default: false
		},
		// 自定义背景色。
		bgColor: {
			type: String,
			default: ''
		},
		// 主题色名称。
		color: {
			type: String,
			default: 'white'
		},
		// 主题色名称。
		disabledColor: {
			type: String,
			default: 'grey-lighten-3 text'
		},
		
		round: {
			type: String | Number,
			default: 3
		},
		leftIconSize: {
			type: String | Number,
			default: '32'
		},
		leftIcon: {
			type: String,
			default: 'icon-gem'
		},
		// 是否显示左边图标。
		showLeftIcon: {
			type: Boolean | String,
			default: false
		},
		leftIconColor: {
			type: String,
			default: 'primary'
		},
		rightIcon: {
			type: String,
			default: 'icon-angle-right'
		},
		rightIconSize: {
			type: String | Number,
			default: '24'
		},
		rightIconColor: {
			type: String,
			default: 'grey-lighten-1'
		},
		// 是否显示右边图标。
		showRightIcon: {
			type: Boolean | String,
			default: true
		},
		// 右边文字。
		value: {
			type: String,
			default: ''
		},
		// 标题。
		title: {
			type: String,
			default: ''
		},
		titleColor:{
			type:String,
			default:'grey-darken-3'
		},
		// 询部的文字说明
		label: {
			type: String,
			default: ''
		},
		
		shadow: {
			type: String | Number,
			default: 2
		},
		fontSize: {
			type: String | Number,
			default: '32'
		},
		// 单位upx
		margin: {
			type: Array,
			default: () => {
				return [32, 20];
			}
		},
		padding: {
			type: Array,
			default: () => {
				return [24, 20];
			}
		},
		flat:{
			type:String|Boolean,
			default:false,
		},
		// 跟随主题色的改变而改变。
		fllowTheme:{
			type:Boolean|String,
			default:true
		}
	},
	computed: {
		pz_themeCus: {
			get: function() {
				if(this.flat===true){
					return {
						margin: [0, 0],
						padding: [0, 0],
						shadow: 0,
						round: 0,
						borderBottom: false
					};
				}
				return this.pz_theme;
			},
			set: function(val) {
				val = val || {};
				
				this.pz_theme = {...val}
			}
		},
		
		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.leftIconColor;
		}
	},

	data() {
		return {
			pz_theme: {
				margin: [0, 0],
				padding: [0, 0],
				shadow: 0,
				round: 0,
				borderBottom: false
			},
			showContent: false
		};
	},
	created() {
		this.pz_themeCus = {
			margin: this.margin,
			padding: this.padding,
			shadow: this.shadow,
			round: this.round,
			borderBottom: this.borderBottom
		};
	},
	mounted() {
		
	},
	methods: {
		click(e) {
			if(this.disabled===true) return;
			let t = this;
			
			
			
			if (this.group === true && typeof this.group === 'boolean') {
				this.showContent = !this.showContent;
				if (!this.$tm.getParentAls('tm-listitem', this.$parent)) {
					let preat = this.$tm.getParentAls('tm-grouplist', this.$parent);
					
					if(preat){
						preat.change(t._uid);
					}

				}

				this.$emit('change', this.showContent);
				return;
			}
			if (!this.url) {
				this.$emit('click', e);
				
				return ;
			}
			if (this.openType === 'switchTab') {
				uni.switchTab({
					url: this.url,
					fail: er => {
						t.$emit('error', er);
					}
				});
			}else{
				uni.navigateTo({
					url:this.url
				})
			}
		},
		setConfig(val){
			
			this.$nextTick(function(){
				this.pz_themeCus = {...this.pz_themeCus,...val};
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.tm-listitem {
	position: relative;
	.tm-listitem-border {
	}
	.nom{
		margin: 0 !important;
		padding: 0 !important;
	}
}
.left {
	max-width: 400upx;
	width: 400upx;

	.left-tm-content {
		max-width: 100upx;
		line-height: 0;
	}

	.tm-content {
		max-width: 290upx;
		justify-content: center;
		align-content: center;
		display: flex;
	}
}
.right{
	// #ifdef MP
	line-height: 0;
	// #endif
}
.group {
	transition: all 0.6s;
}
</style>