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,170 @@
+<!-- 长宽比例组件 -->
+<template>
+	<view class="tm-ratio--wk d-inline-block">
+		<view  class="tm-ratio" :class="[color,black=='true'||black===true?'bk':'']" :style="style">
+			<slot name="default" :data="style"></slot>
+		</view>
+	</view>
+</template>
+<script>
+
+	 /**
+	  * 
+	  * 长宽比例组件
+	  * @property {String} ratio = [] 默认：4/3，比例
+	  * @property {Number | String} width = [] 默认：NaN，默认会根据父组件自动计算宽高，指定宽。
+	  * @property {Number | String} height = [] 默认：NaN，默认会根据父组件自动计算宽高，指定高。
+	  * @property {String} color = [white] 默认：white，背景色，主题名称。
+	  * @property {Boolean} black = [true|false] 默认：false，暗黑模式
+	  * @example <tm-ratio  height="240" ratio="16/9" ><template v-slot="{data}">{{data.width}}</template></tm-ratio>
+	  * 
+	  */
+	export default {
+		props: {
+			// 比例如:16/9,4/3,5/4
+			ratio: {
+				type: String,
+				default: '4/3'
+			},
+			width: {
+				type: Number | String,
+				default: NaN
+			},
+			height: {
+				type: Number | String,
+				default: NaN
+			},
+			color: {
+				type: String,
+				default: "white"
+			},
+			black: {
+				type: String|Boolean,
+				default: false
+			},
+		},
+		data() {
+			return {
+				style: '',
+				style_obj:{}
+			};
+		},
+		mounted() {
+			let t = this;
+			const query = uni.createSelectorQuery().in(this);
+			
+			query.select('.tm-ratio--wk').boundingClientRect().exec(dsd => {
+				var ds = dsd[0];
+				
+				let wsys = uni.getSystemInfoSync();
+				let maxWidth = wsys.windowWidth - ds.left - ds.right;
+				if (maxWidth <= 0) maxWidth = ds.width;
+				query.select('.tm-ratio').boundingClientRect(data => {
+
+					let rt = t.ratio;
+					if (!rt || rt.indexOf('/') == -1 || rt.split('/').length !== 2) {
+						rt = '4/3'
+					}
+					let ro = rt.split('/');
+					let ws = !isNaN(parseInt(ro[0])) ? parseInt(ro[0]) : 4;
+					let hs = !isNaN(parseInt(ro[1])) ? parseInt(ro[1]) : 3;
+
+					let bl = hs / ws;
+					
+				
+					if (isNaN(t.width) && isNaN(t.height)) {
+						
+						t.style ={
+							width: data.width + 'px',
+							height: data.width * bl + 'px',
+							minHeight: data.width + 'px',
+							minWidth: data.width + 'px'
+						};
+						t.style_obj = uni.$tm.objToString({
+							width: data.width,
+							height: data.width * bl,
+							minHeight: data.width ,
+							minWidth: data.width
+						});
+						return;
+					}
+					if (!isNaN(t.width) && isNaN(t.height)) {
+						let width = uni.upx2px(t.width)
+						t.style = {
+							width: (width > maxWidth ? maxWidth : width) + 'px',
+							height: width * bl + 'px',
+							minHeight: width * bl + 'px',
+							minWidth: (width > maxWidth ? maxWidth : width) + 'px'
+						};
+						t.style_obj = uni.$tm.objToString({
+							width: (width > maxWidth ? maxWidth : width) ,
+							height: width * bl,
+							minHeight: width * bl ,
+							minWidth: (width > maxWidth ? maxWidth : width)
+						});
+						return;
+					}
+					if (isNaN(t.width) && !isNaN(t.height)) {
+						let height = uni.upx2px(t.height)
+						let xsw = height / bl;
+						
+						t.style = {
+							width: (xsw > maxWidth ? maxWidth : xsw) + 'px',
+							height: height + 'px',
+							minHeight: height + 'px',
+							minWidth: (xsw > maxWidth ? maxWidth : xsw) + 'px'
+						};
+						t.style_obj = uni.$tm.objToString({
+							width: (xsw > maxWidth ? maxWidth : xsw) ,
+							height: height,
+							minHeight: height ,
+							minWidth: (xsw > maxWidth ? maxWidth : xsw) 
+						});
+						return;
+					}
+
+					// 如果同时提供了宽高，那么按比例。以最长边为第一值。
+					if (!isNaN(t.width) && !isNaN(t.height)) {
+						// 第一值，默认为宽度。
+						let xnh = uni.upx2px(t.width);
+						let isW = true;
+						if (xnh < uni.upx2px(t.height)) {
+							xnh = uni.upx2px(t.height);
+							isW = false;
+						}
+						let w = 0;
+						let h = 0;
+						if (isW) {
+							w = xnh;
+							h = xnh * bl;
+						} else {
+							w = xnh / bl;
+							h = xnh;
+						}
+
+						t.style = {
+							width: w + 'px',
+							height: h + 'px',
+							minHeight: h + 'px',
+							minWidth: w + 'px'
+						};
+						t.style_obj = uni.$tm.objToString({
+							width: w ,
+							height: h ,
+							minHeight: h ,
+							minWidth: w 
+						});
+						return;
+					}
+				
+					
+				}).exec();
+			})
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>