vue自定义控件（属性、事件）

vue自定义控件（属性、事件）、自定义事件、自定义属性

scimence

3182人浏览 · 2023-04-28 18:09:29

scimence · 2023-04-28 18:09:29 发布

1、自定义属性：

2、自定义事件：

示例：

<!-- 试卷讲评页面 -->
<template>

	<div class="Content">
		<div v-if="typeof(iteamDatas) === undefined || iteamDatas.length === 0" class="PaperDiv2" >
			<image src="../../static/images/data_empty.png"></image>
		</div>
		<div v-else class="PaperDiv" v-for="iteamData in iteamDatas">
			<paper-iteam v-bind:paperData="iteamData" @IteamClick="paperIteamClick"> </paper-iteam>
		</div>
	</div>

</template>


<script>
	// import yu from '../../yu.js'
	import PaperIteam from '../../components/custom/PaperIteam.vue'

	export default {
		components: {
			PaperIteam,
			// TabHeader,
		},

		data() {
			return {
				iteamDatas: [{
						tiMu: '一.1 (4分)',
						deFenLv: 75,
						image: 'http://dev.xfkj.cc/upload/pic/1.png',
						avgClass: 3.745,
						avgGrade: 3.845,
						allRight: 44,
						allWrong: 3,
						anserDetail: 'Detail_1',
					},
					{
						tiMu: '二.1 (5分)',
						deFenLv: 95.3,
						image: 'http://dev.xfkj.cc/upload/pic/2.png',
						avgClass: 6.745,
						avgGrade: 3.845,
						allRight: 44,
						allWrong: 3,
						anserDetail: 'Detail_2',
					},
					{
						tiMu: '三.1 (5分)',
						deFenLv: 35.3,
						image: 'http://dev.xfkj.cc/upload/pic/3.png',
						avgClass: 6.745,
						avgGrade: 3.845,
						allRight: 44,
						allWrong: 3,
						anserDetail: 'Detail_2',
					},
					{
						tiMu: '四.1 (5分)',
						deFenLv: 90.3,
						image: 'http://dev.xfkj.cc/upload/pic/4.png',
						avgClass: 6.745,
						avgGrade: 3.845,
						allRight: 44,
						allWrong: 3,
						anserDetail: 'Detail_2',
					},
				],
			}
		},
		onLoad(param) {
			// console.log(param.id)
			// this.examId = param.id;
		},
		onShow() {},
		methods: {
			
			// 示例数据：
			// {
			// 	"state": 1,
			// 	"msg": "",
			// 	"data": {
			// 		"ExamName": "第二波测试",
			// 		"QuestionName": "一.3",
			// 		"Answer": "",
			// 		"QuestionTh": "3",
			// 		"GradePassRate": 0,
			// 		"ClassPassRate": 0,
			// 		"QuestionUrl": "",
			// 		"GradeAvg": 0,
			// 		"ClassAvg": 0,
			// 		"OptionRates": [{
			// 				"OptionName": "A",
			// 				"OptionNum": 1,
			// 				"OptionRate": 50
			// 			},
			// 			{
			// 				"OptionName": "B",
			// 				"OptionNum": 1,
			// 				"OptionRate": 50
			// 			},
			// 		],
			// 	},
			// }

			// 点击题目详情
			paperIteamClick(paperData) {
				console.log("iteamClick已经调用！" + paperData.tiMu);
				// uni.setStorageSync("paperIteamData", paperData);	// 存储当前点击列表项的数据

				// let that = this;
				// yu.dpost(208, (result) => {
				// 	if (result.state == 1) {

				// 		let dataI = result.data;

				// 		// 获取题目详情信息
				// 		let detail = {
				// 			tiMu: dataI.QuestionName,
				// 			deFenLv: dataI.ClassPassRate,
				// 			deFenLvGrade: dataI.GradePassRate,
				// 			image: dataI.QuestionUrl,
				// 			avgClass: dataI.ClassAvg,
				// 			avgGrade: dataI.GradeAvg,
				// 			allRight: paperData.allRight,
				// 			allWrong: paperData.allWrong,
				// 			anser: dataI.Answer,
				// 			append: dataI,
				// 		};

				// 		// 题目图表信息
				// 		var tmp = [];
				// 		var valCount = 0;
				// 		var valMax = 0;
				// 		for (let i = 0; i < result.data.OptionRates.length; i++) {
				// 			dataI = result.data.OptionRates[i];
				// 			valCount += dataI.OptionNum;
				// 			if(dataI.OptionRate > valMax) valMax = dataI.OptionRate;	// 记录最大值
				// 		}

				// 		for (let i = 0; i < result.data.OptionRates.length; i++) {
				// 			dataI = result.data.OptionRates[i];

				// 			// var rate = that.FloatN(dataI.OptionNum * 100 / valCount, 2);
				// 			var rate = dataI.OptionRate;
				// 			var showWidth= rate * 100.0 / valMax;
							
				// 			let iteam = {
				// 				name: dataI.OptionName,
				// 				val: showWidth,
				// 				msg: dataI.OptionNum + '人 占比' + rate + '%',
				// 			};

				// 			tmp.push(iteam)
				// 		}
				// 		detail.chatData = tmp;

				// 		uni.setStorageSync("paperIteamData", detail); // 存储当前点击列表项的数据

				// 		// 跳转答题详情页
				// 		yu.tz('../fenxi/paper_iteam_detail');

				// 	} else {
				// 		yu.alert(result.msg);
				// 	}

				// }, {
				// 	examid: this.examId,
				// 	gradeid: this.grade,
				// 	classid: this.class,
				// 	subjectid: this.subjectId,
				// 	th: paperData.id,
				// });

			},

			// 将float值保留,小数点后n位
			FloatN(fValue, n) {
				let val = parseFloat(fValue).toFixed(n);
				return val;
			},

		}
	}
</script>


<style scoped>
	.Content {
		width: 90%;
		height: 100%;
		margin: 5rpx auto;
	}

	.HeadDiv {
		width: 100%;
		height: auto;
	}

	.PaperDiv {
		margin-top: 0px;
		width: 100%;
		height: 90%;
		overflow: auto;
	}
	
	.PaperDiv2 {
		text-align: center;  
		width: 100%;
		/* box-shadow: 0 0 5px 0px rgb(126, 125, 125); */
	}
	
	.PaperDiv2 image {
		margin-top: 360rpx;
		/* margin-bottom: 360rpx; */
		width: 346rpx;
		height: 346rpx;
	}
</style>

<style>
	/* 边框底部划线 */
	.bottomLine {
		border-bottom: 1px solid #ccc;
	}

	/* 边框线 */
	.boxShadow {
		box-shadow: 0 0 5px 0px rgb(126, 125, 125);
	}
</style>

PaperIteam.vue

 <template>

 	<div class="Content">

		<div class="tittle">
			{{ paperData.tiMu }}
			
			<div class="deFenlv" v-bind:style="'color:' + deFenLvColor + '; background-color:' + deFenLvColorBg">
				班级得分率{{ paperData.deFenLv }}%
			</div>
		</div>

 		<div v-if="paperData.image !== ''" class="ImageDiv">
 			<img class= "Image" v-bind:src="paperData.image">
 			<!-- <img class="Image" v-bind:src="'data:image/png;base64,' + image"> -->
 		</div>

 		<div class="avgInfo">
			
 			<pre v-if="paperData.tiMuType==0">
				班级/年级平均分：<span></span> <text>  {{paperData.avgClass}}</text>/{{paperData.avgGrade}}  全对{{paperData.allRight}}人  全错{{paperData.allWrong}}人
			</pre>
			<pre v-else>
				班级/年级平均分：<span></span> <text>  {{paperData.avgClass}}</text>/{{paperData.avgGrade}} 
			</pre>
			
 		</div>

 		<div class="details" @click="openDetails(paperData)">
			<div v-if="paperData.tiMuType==0">
				答题详情 >
			</div>
			<div v-else class="details2">
			</div>
 		</div>
 	</div>

 </template>

 <script>
 	export default {
 		name: 'PaperIteam',
 		props: {
 			// soft: String,
 			paperData: {},
 		},
 		data() {
 			return {
 				tiMu: '一.1 (4分)',
 				deFenLv: 75,
				// 从Base64编码的字符串，载入图像
 				// image: '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',
 				image: 'http://dev.xfkj.cc/upload/pic/1.png',
 				avgClass: 3.745,
 				avgGrade: 3.845,
 				allRight: 44,
 				allWrong: 3,
 				id: 'Detail_1',
 			}
 		},

 		// filters: {

 		//   contentFormat(content)
 		//   {
 		//       if(content.length > 56)
 		//       {
 		//           return content.substring(0, 56) + '...';
 		//       }
 		//       else return content;
 		//   }
 		// },

 		mounted() {},
 		created() {

 		},
 		computed: {
 			// 当得分率变动时,颜色值自动随之变动 
 			deFenLvColor() {
 				if (this.paperData.deFenLv >= 80) return "#3b9d70";
 				else if (this.paperData.deFenLv >= 60) return "#e4b04c";
 				else return "#e22121";
 			},
			deFenLvColorBg() {
				if (this.paperData.deFenLv >= 80) return "#e7fce3";
				else if (this.paperData.deFenLv >= 60) return "#fdf4d6";
				else return "#f3e2e2";
			}
 		},
 		methods: {

			// 题目详情
 			openDetails(paperData) {
				
				this.$emit('IteamClick', paperData)
				
 				// uni.removeStorageSync("token");
 				// uni.removeStorageSync("name");
 				// uni.removeStorageSync("pass");
 				// uni.reLaunch({
 				// 	url: '../fenxi/paper_review?id=' + id
 				// });
 			}

 		}

 	}
 </script>

 <style scoped>
 	.Content {
 		position: relative;
 		text-align: left;
 		display: inline-block;

 		width: 100%;
 		/* background-color: gray; */
 		vertical-align: middle;

 		border-bottom: 1px solid #ccc;
 		padding: 4rpx 0px 4rpx 0px;
		margin-bottom: 10rpx;
 	}
	.ImageDiv{
		width: 100%;
		height: max-content;
		overflow: auto;
		/* min-height: 200rpx; */
	}
 	.Image {
 		width: 90%;
 		max-height: 50px;
		/* 修改为auto微信小程序中未显示 */
		/* height:auto; */
		/* min-height: 50rpx; */
 		margin: 20px;
		object-fit: cover;
 	}

 	.tittle {
		width: 100%;
		display: inline-block;
 		/* position: absolute; */
 	}

 	.deFenlv {
 		/* position: absolute; */
 		float: right;
 		font-size: small;
		font-weight: 500;
 		/* color: seagreen; */
 		/* color: #7ccd7d; */
 		/* background-color: rgb(228, 226, 226); */
 		border-radius: 5px;
 		padding: 3px;
 		/* margin-right: 5px; */
 	}

 	.avgInfo {
 		font-size: small;
 		color: rgb(162, 162, 162);
		margin-top: 20rpx;
 	}

 	.avgInfo text {
 		font-size: small;
 		color: rgb(213, 83, 80);
 	}

 	.details {
 		float: right;
 		font-size: small;
 		color: rgb(66, 165, 245);
		padding: 20rpx 0rpx 30rpx 0rpx;
 	}
	
	.details2 {
		float: right;
		height: 40rpx;
	}
 </style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^