v1.0.0-beta 源码正式开源

2026-06-12 21:29: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,137 @@
+<template>
+	<view class="tm-verificationImg flex-center flex-col">
+		<view class="flex-shrink rounded overflow relative" 
+		:style="{
+			width:`${size}rpx`,
+			height:`${size}rpx`,
+			
+		}"
+		>	
+			<view v-if="success" class="tm-verificationImg-success fulled fulled-height rounded absolute flex-center opacity-8" >
+					<tm-icons name="icon-check" color="white" :size="100"></tm-icons>
+				</view>
+			<view :style="{transform: `rotate(${default_value_num}deg)`}">
+				<tm-images model="aspectFit" :width="size" :height="size" round="rounded" :src="src"></tm-images>
+			</view>
+		</view>
+		<view :style="{width:`${size}rpx`}" class="py-32">
+			<tm-slider :disabled="disabled" :fllowTheme="fllowTheme" :color="color_tmeme" v-model="default_value_num" :max="360"></tm-slider>
+		</view>
+	</view>
+</template>
+
+<script>
+	//https://jx2d.cn/yuwuimages/test.png
+	//测试图片角度为正120
+	/**
+	 * 图片安全验证
+	 * @property {String} model = [normal|rotate] 默认：normal，rotate表示图片本身有角度的模式。normal是随机一张正常的图片（图片本身是没有角度的）
+	 * @property {Number} rotate = [] 默认：0，当前model=normal时，应承打乱图片 的角度。当model=rotate，是特指图片本身的角度。
+	 * @property {Number} size = [] 默认：200，大小。
+	 * @property {String} color = [] 默认：primary，主题色。
+	 * @property {String} src = [] 默认：''随机一张图片，图片地址。
+	 * @property {Boolean} disabled = [] 默认：false,是否禁用
+	 * @property {Function} change 旋转的时候触发，返回参数为当前的检验，正确是为true,失败为false
+	 */
+	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
+	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
+	import tmSlider from "@/tm-vuetify/components/tm-slider/tm-slider.vue"
+	export default {
+		components:{tmSlider,tmIcons,tmImages},
+		name:"tm-verificationImg",
+		props:{
+			//rotate表示图片本身有角度的模式。normal是随机一张正常的图片（图片本身是没有角度的）
+			model:{
+				type:String,
+				default:'normal' ,//normal|rotate ，
+			},
+			//当前model=normal时，应承打乱图片 的角度。当model=rotate，是特指图片本身的角度。
+			rotate:{
+				type:Number,
+				default:0
+			},
+			size:{
+				type:Number|String,
+				default:200
+			},
+			color:{
+				type:String,
+				default:'primary'
+			},
+			src:{
+				type:String,
+				default:'https://picsum.photos/300'
+			},
+			// 跟随主题色的改变而改变。
+			fllowTheme:{
+				type:Boolean|String,
+				default:true
+			},
+			disabled:Boolean
+		},
+		data() {
+			return {
+				default_value_num:0,
+				imgrotate:0,
+				wucha:5,
+				success:false
+			};
+		},
+		computed:{
+			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.color;
+			},
+		},
+		mounted() {
+			if(this.model=='normal'){
+				this.default_value_num = this.rotate
+				this.imgrotate = 0
+			}else{
+				this.default_value_num = 0
+				this.imgrotate = this.rotate
+			}
+		},
+		watch:{
+			default_value_num:function(val){
+				let zque = Math.abs(360-this.imgrotate);
+				if(this.model=='normal'){
+					if(val>=360){
+						this.success=true
+						
+					}else{
+						this.success=false
+					}
+				}else{
+					if(val>=zque-5 && val <=zque+5){
+						this.success=true
+					}else{
+						this.success=false
+					}
+				}
+				this.$emit('change',this.success)
+			}
+		},
+		methods: {
+			name() {
+				
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+.tm-verificationImg{
+	.tm-verificationImg-success{
+		top: 0;
+		left: 0;
+		z-index: 9;
+		background-color: rgba(0,0,0,0.2);
+		backdrop-filter: blur(2px);
+		-webkit-backdrop-filter: blur(2px);
+		
+	}
+}
+</style>