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

<template>
	<!-- 基础容器 -->
	<view
		
		@click="$emit('click', $event)"
		class="sheet  fulled"
		:style="[
			bgColor?{backgroundColor: bgColor }:'',
			widths?{width:widths}:'',
			heights?{height:heights}:'',
		]"
		:class="[
			text ? 'text' : '',
			flat ? 'flat' : '',
			'shadow-' + shadowthemeName + '-' + shadow,
			'round-' + round,
			black_tmeme ? 'bk' : '',
			black_tmeme == 'true' || black_tmeme === true ? 'grey-darken-5' : (bgColor?'':color),
			dense === true || dense == 'true' ? 'nom' : '',
			'mx-'+margin[0],'my-'+margin[1],
			'px-'+padding[0],'py-'+padding[1],
			classs,
			border ? 'border-a-1' : '',
			outlined ? 'outlined' : ''
		]"
		
	>
		<view class="fulled" v-if="showSheet">
			<slot name="default"></slot>
		</view>
	</view>
</template>
<script>
	/**
	 * 基础容器
	 * @description 基本是大部分组件的基础组件。
	 * @property {String | Boolean} black = [true|false] 暗黑模式。
	 * @property {String} classname = [] 自定认容器类
	 * @property {String|Number} round = [] 圆角
	 * @property {Array} margin = [] 外间距默认[32,32]
	 * @property {Array} padding = [] 内间距默认[32,32]
	 * @property {Boolean|String} dense = [] 默认false,去除内部和外部间距。
	 * @property {String|Number} width = [100%|auto] 宽度数字时单位为upx.可以是百分比
	 * @property {String|Number} height = [100%|auto] 宽度数字时单位为upx.可以是百分比
	 * @property {String} color = [white|blue|primary] 主题颜色名称。默认：white
	 * @property {String} bgColor = [] 自定义背景颜色rgb,rgba,#0000等格式。
	 * @property {String|Number} shadow = [5|10] 投影大小
	 * @property {Boolean|String} border = [true|false] 是否开启边线
	 * @property {Boolean|String} flat = [true|false] 是否开启扁平模式。
	 * @property {Boolean|String} text = [true|false] 是否开启文本模式
	 * @example  <tm-sheet :margin="[32,32]" >9</tm-sheet>
	 */
export default {
	props: {
		black: {
			type: String | Boolean,
			default: null
		},
		classname: {
			type: String,
			default: ''
		},
		round: {
			type: String | Number,
			default: '4'
		},
		margin:{
			type:Array,
			default:()=>{return [32,32]; }
		},
		padding:{
			type:Array,
			default:()=>{return [32,32]; }
		},
		dense: {
			type: Boolean|String,
			default: false
		},
		width: {
			type: String | Number,
			default: 'auto'
		},
		height: {
			type: String | Number,
			default: 'auto'
		},
		// 主题颜色名称。
		color: {
			type: String,
			default: 'white'
		},
		// 自定义背景色。
		bgColor: {
			type: String,
			default: ''
		},
		shadow: {
			type: String | Number,
			default: 5
		},
		border: {
			type: Boolean|String,
			default: false
		},
		outlined: {
			type: Boolean|String,
			default: false
		},

		flat: {
			type: Boolean,
			default: false
		},
		// 是否为文本模式，即减淡背景颜色。
		text: {
			type: String | Boolean,
			default: false
		}
	},

	computed: {
		// 投影的颜色名字。
		shadowthemeName: function() {
			if (!this.color) return 'none';
			return this.color.split('-')[0];
		},
		classs: function() {
			return ' ' + this.classname + ' ';
		},
		widths: function() {
			if (typeof this.width === 'string') {
				if (/([rpx|upx|rem|em|vx|vh|px|%]|auto)$/.test(this.width)) {
					return this.width;
				}
				return uni.upx2px(parseInt(this.width)) + 'px';
			}

			if (typeof this.width == 'number') return uni.upx2px(this.width) + 'px';
		},
		heights: function() {
			if (typeof this.height === 'string') {
				if (/([rpx|upx|rem|em|vx|vh|px|%]|auto)$/.test(this.height)) {
					return this.height;
				}
				return uni.upx2px(parseInt(this.height)) + 'px';
			}
			if (typeof this.height == 'number') return uni.upx2px(this.height) + 'px';
		},
		black_tmeme:function(){
			if(this.black!==null) return this.black;
			return this.$tm.vx.state().tmVuetify.black;
		}
	},
	data() {
		return {
			showSheet:true,
		};
	},
	created() {
		// #ifdef APP-VUE || APP-PLUS || MP
		this.showSheet = false;
		// #endif
	},
	mounted() {
		let t= this;
		
		// #ifdef APP-VUE || APP-PLUS || MP
		setTimeout(function() {
			t.showSheet = true;
		}, 30);
		// #endif
	}
};
</script>
<style lang="scss" scoped>
.nom{
	margin: 0 !important;
	padding: 0 !important;
}
</style>