v1.0.0-beta 源码正式开源

2026-06-12 13:19:31 +08:00 · 2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
@@ -0,0 +1,180 @@
+<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>